Dark Mode Implementation

System-preference dark mode that preserves the “industrial plotting paper” aesthetic.

Approach

Follows system preference via prefers-color-scheme: dark media query. No manual toggle—simpler and more consistent with user expectations.

Design Philosophy

The light mode evokes aged plotting paper. Dark mode must translate this metaphor, not just invert colors. Think: dark engineering paper, chalkboard with grid lines.

Key insight: The dot grid is the aesthetic. It must remain visible in dark mode.

Final Palette

Light Mode                    Dark Mode
──────────────────────────────────────────────────────
#FAFAF9  paper (bg)      →   #1E1D1B  warm dark paper
#000000  black (text)    →   #E6E4DF  warm cream text
#1A1A1A  dark-gray       →   #D0CEC8  light gray
#666666  mid-gray        →   #9C9A94  olive mid-gray
#E5E5E5  light-gray      →   #2A2926  subtle dark
#CCCCCC  border-color    →   #3D3B37  warm border
#E8E8E6  grid-color      →   #2F2D2A  visible grid
#F5F5F3  code-bg         →   #252422  warm code-bg
#EFEFE9  inline-code-bg  →   #2D2B28  warm inline-code

Implementation

CSS Variables (styles.css)

/* Dark mode: industrial plotting paper (dark variant) */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1E1D1B;
    --white: #1E1D1B;
    --black: #E6E4DF;
    --dark-gray: #D0CEC8;
    --mid-gray: #9C9A94;
    --light-gray: #2A2926;
    --border-color: #3D3B37;
    --grid-color: #2F2D2A;
    --code-bg: #252422;
    --inline-code-bg: #2D2B28;
    --selection-bg: #E6E4DF;
    --selection-text: #1E1D1B;
  }
}

Code Highlighting (_quarto.yml)

highlight-style:
  light: kate
  dark: zenburn

Status: Complete