/* Theme tokens for the app's own (non-sakura) colors. The server always renders an explicit data-theme (auto/light/dark) on , so the selectors key off it. Dark values are the exact "vader" palette, so dark mode is unchanged. */ :root, :root[data-theme="light"], :root[data-theme="auto"] { --app-bg: #f9f9f9; --app-fg: #4a4a4a; --app-accent: #1d7484; --app-surface: #f1f1f1; --app-border: #d1d1d1; --help-icon-filter: none; } :root[data-theme="dark"] { --app-bg: #120c0e; --app-fg: #d9d8dc; --app-accent: #eb99a1; --app-surface: #40363a; --app-border: #40363a; --help-icon-filter: invert(); } /* auto + OS prefers dark: mirror the forced-dark palette */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --app-bg: #120c0e; --app-fg: #d9d8dc; --app-accent: #eb99a1; --app-surface: #40363a; --app-border: #40363a; --help-icon-filter: invert(); } } /* The theme toggle: a small icon button pinned top-right on every page. Resets sakura's accent button skin to a plain bordered icon (id specificity wins). */ /* Reset the page's generic `form` styling (default.css makes forms full-width flex columns) so the toggle stays a small fixed corner control. */ #theme-form { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 100; margin: 0; display: block; width: auto; min-width: 0; } #theme-toggle { background: transparent; border: none; color: var(--app-fg); padding: 0.3rem; cursor: pointer; display: flex; align-items: center; } #theme-toggle:hover { background: transparent; color: var(--app-accent); } #theme-toggle svg { width: 1.9rem; height: 1.9rem; display: block; }