Skip to main content

dark-mode-adjustments.css

This stylesheet contains all the color and visual adjustments necessary to transform gwern.net from its default light theme to a dark theme.

Pathcss/dark-mode-adjustments.css
LanguageCSS
Lines173

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

Overview​

This stylesheet contains the manually-authored dark mode adjustments for gwern.net. It is not the whole dark theme: the bulk of the dark palette (colors-dark-GENERATED.css) is auto-generated from colors.css by build/color-scheme-convert.php, and this file is concatenated after it into dark-mode-GENERATED.css. It applies when dark mode is active—by default following the system prefers-color-scheme preference, or when the user forces dark mode via the theme switcher in the page toolbar.

Rather than duplicating all styles, this file overrides a handful of CSS custom properties (correcting cases where the automatic color inversion is unsatisfactory) and applies color inversion filters to images and certain UI elements. The overrides set --GW-body-background-color: #161616 and --GW-body-text-color: #f1f1f1.

The file is relatively compact (~170 lines) because it leverages the existing color variable system—most components automatically adapt when the generated dark palette redefines their color variables. This file handles the special cases: image filtering (with filter removal on hover) and icon inversions.

Key Selectors/Variables​

Core Colors (:root overrides)​

  • --GW-body-background-color: #161616
  • --GW-body-text-color: #f1f1f1

Pattern/Texture Variables​

  • --GW-popups-popup-title-bar-pattern: Dotted pattern for popup title bars (dark variant)
  • --GW-popovers-popover-backdrop-color: Darker backdrop (60% black instead of 40%)
  • --GW-checkerboard-scrollbar-background-image: Inverted scrollbar checkerboard pattern

Filter Classes​

  • .dark-mode-invert, .dark-mode-invert::before, .dark-mode-invert::after:
    • Apply filter: var(--dark-mode-invert-filter, none) to invert specified elements
    • Used for icons, list markers, and UI elements that need inversion

Image Handling​

The sophisticated image filtering system in dark mode:

  • .invert / .invert-auto images:

    • filter: grayscale(50%) invert(100%) brightness(95%) hue-rotate(180deg)
    • Converts photos to dark-friendly versions while preserving recognizability
    • Hover removes filter to show original

  • Non-invertible images (no class):

    • filter: grayscale(50%) - Desaturated but not inverted
    • Hover removes filter

  • .invert-not / .invert-not-auto images:

    • filter: none - No filtering (for artwork, diagrams with color-coded legends)

  • Image alt-text: Inverted separately to maintain readability

  • Transition behavior: A filter transition is defined, but later rules set transition: none for figure img and variants, disabling transitions for those images

Special Elements​

  • Admonition icons: Selective inversion (tip inverted, note/warning/error not inverted)
  • Table sorting icons: Uses dark-mode-specific arrow sprites
  • Loading spinners: Inverted and made more visible (40% opacity)
  • Recently-modified icons: Inverted
  • Manicule (pointing hand) icons: Inverted

Loading​

This stylesheet is concatenated into dark-mode-GENERATED.css at build time and inlined in the head include. JavaScript toggles the media attribute on the inlined dark-mode style block to force dark, force light, or follow system preference.

See Also