Files
xamxam/public/assets/css
Pontoporeia ca8081575c Add prefers-color-scheme dark mode for public pages
Scope: variables.css, search.css, todo/04-accessibility.md

- variables.css: add @media (prefers-color-scheme: dark) block scoped to
  body:not(.admin-body); overrides all semantic tokens with dark equivalents:
  --bg-* (#111→#333 range), --text-* (#eee/aaa/777),
  --border-* (#333/#444), --accent-primary lightened to #b87fd4
  (4.5:1 contrast on #111 background), --accent-secondary stays #9557b5,
  --accent-foreground flipped to #111111 for dark buttons,
  --accent-muted adjusted to rgba(184,127,212,0.15),
  status colours muted for dark (success #4db886, error #e05555,
  warning #d4a830); new --search-error-{bg,border,color} tokens added
  to :root (light: #fff0f0/#c00) and overridden in dark (#2a1515/#e05555)

- search.css: replace three hardcoded hex values in .search-error rule
  with var(--search-error-bg/border/color) so dark mode applies cleanly

- Admin pages are entirely unaffected: .admin-body body class is excluded
  from the dark-mode selector; system.css already has its own dark palette
2026-04-06 15:33:08 +02:00
..
2026-04-06 15:32:34 +02:00

CSS Architecture

File Structure

  • variables.css - CSS custom properties (variables) for colors and theme values
  • colors.css - Reference documentation of all color values used in the project
  • common.css - Shared styles: reset, header/nav, search bar, accessibility utilities
  • main.css - Home page styles
  • admin.css - Admin section styles
  • system.css - System page styles
  • search.css - Search/Directory page styles
  • apropos.css - About page styles
  • tfe.css - Individual thesis page styles
  • easymde.min.css - EasyMDE editor styles (minified, third-party)
  • modern-normalize.min.css - Modern normalize reset (minified, third-party)

Imports

All CSS files automatically import variables.css to access CSS custom properties.

Variables

Shared Variables (public pages)

  • --purple, --purple-dark, --purple-light - Purple palette
  • --black, --white - Base colors
  • --grey-light - Light grey background
  • --border-color - Border color
  • --text-muted - Muted text color

Admin Variables

  • --admin-bg, --admin-bg-alt - Background colors
  • --admin-border - Border color
  • --admin-text, --admin-text-muted - Text colors
  • --admin-purple - Accent color
  • --admin-input-bg - Input background