Skip to main content

build_mode_css.php

This script orchestrates the generation of color mode stylesheets for gwern.net's light/dark theme system.

Pathbuild/build_mode_css.php
LanguagePHP
Lines22
Sourcebuild/build_mode_css.php
at 406d3e423

Read this when Use this page when tracing PHP asset generation, build hooks, template assembly, or maintenance scripts around build_mode_css.

Overview​

This script orchestrates the generation of color mode stylesheets for gwern.net's light/dark theme system. It performs three key operations: converting base colors to dark mode using an Oklch color transformation algorithm, combining color definitions with mode-specific adjustment rules, and outputting ready-to-use CSS files for each theme.

The script delegates the actual color conversion to a separate PHP utility (color-scheme-convert.php) that implements perceptually-uniform color space transformations. This ensures dark mode colors maintain appropriate contrast and visual hierarchy while adapting to reduced lightness levels (0.55 factor).

Unlike the font CSS generators, this script uses shell command execution (backticks) to invoke external tools and combine files with cat, making it more of a build orchestrator than a pure generator. The resulting CSS files are used as critical initial styles loaded in the document head.

Key Functions/Variables​

This script contains no custom functions—it's a simple procedural script that executes three shell commands in sequence.

Global variables:

  • $build_dir: Path to the build scripts directory
  • $css_dir: Path to the CSS output directory

External tools:

  • color-scheme-convert.php: Converts colors between color spaces and applies lightness transformations using the Oklch color model

Input/Output​

Inputs:

  • /css/colors.css - Base color definitions (light mode)
  • /css/light-mode-adjustments.css - Light mode-specific CSS adjustments
  • /css/dark-mode-adjustments.css - Dark mode-specific CSS adjustments

Outputs:

  • /css/colors-dark-GENERATED.css - Dark mode color definitions (Oklch-transformed)
  • /css/light-mode-GENERATED.css - Complete light mode initial CSS (colors + adjustments)
  • /css/dark-mode-GENERATED.css - Complete dark mode initial CSS (dark colors + adjustments)

Command 1: Generate dark colors via Oklch transformation

php build/color-scheme-convert.php css/colors.css 1 "Oklch" 0.55 > css/colors-dark-GENERATED.css

Converts all colors in colors.css to Oklch color space, applies a 0.55 lightness factor, and outputs the dark variants.

Command 2: Concatenate light mode files

cat css/colors.css css/light-mode-adjustments.css > css/light-mode-GENERATED.css

Command 3: Concatenate dark mode files

cat css/colors-dark-GENERATED.css css/dark-mode-adjustments.css > css/dark-mode-GENERATED.css

Usage​

Invoked by pre-commit.hook.php (the Git pre-commit build hook), which require_onces this script whenever colors.css, the mode-adjustment stylesheets, or color-scheme-convert.php have changed. It can also be run manually:

php build/build_mode_css.php

Each generated file path is appended to the shared $updated_files array (from build_variables.php), which the pre-commit hook then stages with git add.

The generated mode-specific CSS files are inlined into HTML templates to provide instant theme support without FOUC (flash of unstyled content).

See Also