Skip to main content

colors.css

This file serves as the central color system for gwern.net, defining CSS custom properties (variables) for every component and element across the site.

Pathcss/colors.css
LanguageCSS
Lines329
Sourcecss/colors.css
at 406d3e423

Read this when Use this page when tracing styling, layout, typography, color, or mode-specific CSS around colors.

Overview​

This file serves as the central color system for gwern.net, defining CSS custom properties (variables) for every component and element across the site. It provides the light mode color values that are later overridden by dark mode adjustments.

The color system is comprehensive and semantic, with variables organized by component rather than by raw color values. This means colors are named for their purpose (e.g., --GW-TOC-border-color) rather than their appearance (e.g., --color-gray-200), making it easier to maintain thematic consistency and adapt the palette.

The file contains approximately 335 lines defining over 200 color variables covering everything from basic body text and links to complex UI elements like popups, sidenotes, code blocks, and custom admonitions. All colors use the --GW- prefix to namespace them from potential conflicts.

Key Variable Groups​

General​

  • --GW-body-background-color: Main page background (white #fff in light mode)
  • --GW-body-text-color: Main text color (black #000 in light mode)
  • --GW-text-selection-background-color / --GW-text-selection-color: Text selection styling
  • --GW-body-link-color: Default link color (#333)
  • --GW-body-link-hover-color: Hover state (#888)
  • --GW-body-link-visited-color: Visited links (#666)
  • --GW-body-link-inverted-*: Light-colored variants (#eee/#ccc/#ddd) for links on dark backgrounds

Layout Components​

  • Blockquotes: 4-level nested emphasis system with progressively darker backgrounds and borders
  • Table of Contents: Border, background, button colors, number colors, hover states
  • Collapse blocks: Disclosure buttons, hover states, special variants for blockquotes and inline collapses
  • Headings: Border colors for H1/H2
  • Figures: Outline colors for images and captions
  • Tables: Comprehensive table styling including zebra striping, sorted columns, scrollbars

Code & Syntax​

  • Code blocks: Background, border, scrollbar, line highlighting
  • Syntax highlighting: 20+ token types with a custom light-mode-friendly theme (mostly blues, greens, grays)

Interactive Elements​

  • Popups/Popovers: Title bars, borders, shadows, scrollbars (with focused/unfocused states)
  • Page toolbar: Button icons, text, active/disabled states
  • Footnotes/Sidenotes: Borders, highlights, scrollbars, backlinks
  • Admonitions: 4 types (note, tip, warning, error) with distinct color schemes

Special Features​

  • Math blocks: Background colors and flash animation
  • Dropcaps: 5 different dropcap font families with custom colors
  • Reader mode: Masked links key toggle panel
  • Image focus: Hover drop shadows
  • X of the day: Border color

Loading​

This file is not served directly. At commit time, build/pre-commit.hook.php runs build/build_mode_css.php, which concatenates colors.css + light-mode-adjustments.css into light-mode-GENERATED.css, and separately runs build/color-scheme-convert.php on colors.css to auto-generate a dark palette (colors-dark-GENERATED.css), which is concatenated with dark-mode-adjustments.css into dark-mode-GENERATED.css.

Both generated files are then inlined into the <head> via the SSI include include/inlined-head.html (built by build/build_head_includes.php): the light styles as <style id="inlined-styles-colors">, and the dark styles as <style id="inlined-styles-colors-dark" media="all and (prefers-color-scheme: dark)">. dark-mode.js toggles the media attribute on the dark style block to force light, force dark, or follow the system preference.

The colors defined here are the light mode palette; the dark mode palette is mostly auto-generated from this file by color-scheme-convert.php, with manual exceptions in dark-mode-adjustments.css.

See Also