/* Day/night theme support for Weightpedia. Dark is the default (variables defined in style.css); setting data-theme="light" on switches to the light palette below. The attribute is managed by /static/theme.js (persisted in localStorage). */ /* --- toggle button (lives in the navbar on every page) --- */ .theme-toggle { margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-size: 0.85rem; line-height: 1; padding: 4px 9px; cursor: pointer; font-family: var(--font-mono); } .theme-toggle:hover { color: var(--text); border-color: var(--text-muted); } .theme-toggle::after { content: "\2600"; } /* sun: switch to light */ [data-theme="light"] .theme-toggle::after { content: "\263E"; } /* moon: switch to dark */ /* --- light palette --- */ [data-theme="light"] { --bg: #fafbfc; --bg-surface: #ffffff; --bg-elevated: #eef0f5; --bg-hover: #e4e7ef; --text: #343b58; --text-muted: #71778f; --text-bright: #14151c; --border: #d7dae4; --accent: #2e5fd0; --accent-dim: #9db4ee; /* Category colors */ --cat-monosemantic: #4e7128; --cat-narrow: #2e5fd0; --cat-polysemantic: #848cb5; --cat-middle: #92621f; --cat-unlabeled: #9aa0b5; --cat-to_check: #d6285f; /* Band colors */ --band-top1: #c0392b; --band-1to5: #ca6f1e; --band-5to20: #1e8449; /* Probability bars */ --prob-decrease: #d6285f; --prob-increase: #4e7128; --prob-pert: rgba(0, 0, 0, 0.12); /* KL colors */ --kl-pos: #2e5fd0; --kl-neg: #b15c00; --kl-green: rgb(36, 140, 60); } /* --- fix-ups for hardcoded dark inline styles in generated pages --- */ [data-theme="light"] [style*="color:#e0e0e0"], [data-theme="light"] [style*="color: #e0e0e0"] { color: var(--text-bright) !important; } [data-theme="light"] [style*="color:#ccc"], [data-theme="light"] [style*="color: #ccc"] { color: var(--text) !important; } [data-theme="light"] [style*="color:#aaa"], [data-theme="light"] [style*="color: #aaa"], [data-theme="light"] [style*="color:#888"], [data-theme="light"] [style*="color: #888"] { color: var(--text-muted) !important; } [data-theme="light"] [style*="background:#1e1f2e"], [data-theme="light"] [style*="background: #1e1f2e"] { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; }