/* * Dark theme example. * * Demonstrates how to build a theme by overriding the variables documented in * `theme.css` (board colors, piece glyphs, surfaces, text, etc.). Include this * file after `theme.css` in the page layout. * * Activation: * - The toggle in the header sets `data-theme="dark"` (or `"light"`) on the * element and persists the choice to localStorage. See * `wwwroot/js/site-utils.ts`. * - When the visitor has not made an explicit choice, the operating system's * `prefers-color-scheme` preference is honored (see the media query below), * so dark mode applies automatically even before scripts run. */ /* * The dark palette. Applied whenever the resolved theme is "dark". * * ⚠️ CANONICAL SOURCE OF TRUTH for the dark palette. Plain CSS cannot share a * declaration list across a media query, so the `prefers-color-scheme: dark` * fallback below intentionally mirrors this block verbatim. If you change a * value here, mirror the same change in `:root:not([data-theme])` (and vice * versa) so the two blocks do not drift. They are kept adjacent on purpose. */ :root[data-theme="dark"] { /* ── Layout & surfaces ── */ --surface-page: #0f172a; --surface-elevated: #1e293b; --surface-muted: #273449; --border-subtle: #334155; --border-strong: #475569; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); /* Brand — lifted for contrast against dark surfaces */ --brand-primary: #3b82f6; --brand-primary-hover: #60a5fa; --brand-accent: #2dd4bf; --brand-accent-soft: rgba(45, 212, 191, 0.16); /* Links */ --link-color: #60a5fa; --link-hover-color: #93c5fd; /* Editorial accent — softened oxblood that reads on dark */ --accent-editorial: #e07a7a; /* Text colors */ --text-primary: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-light: #64748b; /* ── Board colors ── */ --board-light-color: #6e7f96; --board-dark-color: #3b475a; /* Highlight with a brighter glow so it stands out on the dark board */ --board-highlight-color: rgba(250, 204, 21, 0.40); --board-highlight-border: rgba(250, 204, 21, 0.85); /* Arrows — keep the warm tone but brighten for the darker backdrop */ --arrow-color-start: rgba(255, 190, 60, 0.9); --arrow-color-end: rgba(255, 120, 30, 0.95); --arrow-color: rgba(255, 170, 50, 0.92); /* Focus ring */ --focus-ring-color: var(--brand-primary); /* Piece glyphs — solid (filled) Unicode glyphs for both colors so the pieces stay legible on the muted dark board; CSS color/stroke (see `games.css` .piece-white / .piece-black) keeps the two sides distinct. */ --piece-white-king: "♚"; --piece-white-queen: "♛"; --piece-white-rook: "♜"; --piece-white-bishop: "♝"; --piece-white-knight: "♞"; --piece-white-pawn: "♟"; --piece-black-king: "♚"; --piece-black-queen: "♛"; --piece-black-rook: "♜"; --piece-black-bishop: "♝"; --piece-black-knight: "♞"; --piece-black-pawn: "♟"; } /* * No-JavaScript fallback: honor the OS dark preference when the visitor has * not explicitly chosen a theme (i.e. no `data-theme` attribute is present). * Once the toggle sets an explicit `data-theme`, the rule above (or the light * defaults in `theme.css`) takes over. */ @media (prefers-color-scheme: dark) { /* * Mirror of the canonical `:root[data-theme="dark"]` block above. Keep the * two in sync — see the comment on that block. (Plain CSS offers no way to * reuse a declaration list inside a media query.) */ :root:not([data-theme]) { --surface-page: #0f172a; --surface-elevated: #1e293b; --surface-muted: #273449; --border-subtle: #334155; --border-strong: #475569; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --brand-primary: #3b82f6; --brand-primary-hover: #60a5fa; --brand-accent: #2dd4bf; --brand-accent-soft: rgba(45, 212, 191, 0.16); --link-color: #60a5fa; --link-hover-color: #93c5fd; --accent-editorial: #e07a7a; --text-primary: #e2e8f0; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-light: #64748b; --board-light-color: #6e7f96; --board-dark-color: #3b475a; --board-highlight-color: rgba(250, 204, 21, 0.40); --board-highlight-border: rgba(250, 204, 21, 0.85); --arrow-color-start: rgba(255, 190, 60, 0.9); --arrow-color-end: rgba(255, 120, 30, 0.95); --arrow-color: rgba(255, 170, 50, 0.92); --focus-ring-color: var(--brand-primary); --piece-white-king: "♚"; --piece-white-queen: "♛"; --piece-white-rook: "♜"; --piece-white-bishop: "♝"; --piece-white-knight: "♞"; --piece-white-pawn: "♟"; --piece-black-king: "♚"; --piece-black-queen: "♛"; --piece-black-rook: "♜"; --piece-black-bishop: "♝"; --piece-black-knight: "♞"; --piece-black-pawn: "♟"; } } /* ── Theme toggle button (header) ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: inherit; cursor: pointer; padding: 0.25rem 0.5rem; font-size: 1.1rem; line-height: 1; } .theme-toggle:hover { color: var(--brand-primary); } .theme-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); }