/* Dashboard themes. Each re-hues the accent family + surface ladder + text; the whole UI is built on these tokens so a single data-theme on repaints everything. "phosphor" is the default (defined in tokens.css). Applied early (inline head script) to avoid a flash. CONTRACT for a new theme: --muted and --faint are both body-text tiers, not decoration, so both must clear 4.5:1 (WCAG AA 1.4.3) against --surf-2 — the lightest surface either one lands on. Every --faint below is verified at >=4.60:1; see the token's note in tokens.css. */ /* ── Amber — retro amber CRT ─────────────────────────────────────────────── */ :root[data-theme="amber"] { --bg: #0a0702; --surf-1: #130d03; --surf-2: #1a1206; --surf-3: #271a08; --inset: #050300; --line-hair: #302610; --line: #4a3a16; --line-2: #6b5420; --green: #ffb000; --green-soft: #3a2909; --green-text: #ffdd93; --green-dim: #d99320; --glow: 0 0 9px rgba(255, 176, 0, 0.8); --head: #fff8e8; --text: #f2e6cf; --muted: #b39b78; --faint: #927c56; --amber: #ff7a1a; /* keep warnings distinct from the gold accent */ } /* ── Ice — cyan on midnight ──────────────────────────────────────────────── */ :root[data-theme="ice"] { --bg: #04070f; --surf-1: #07101f; --surf-2: #0a1628; --surf-3: #102338; --inset: #020409; --line-hair: #16283f; --line: #1f3d5e; --line-2: #2e5b8a; --green: #38bdf8; --green-soft: #0a2d45; --green-text: #a5e4ff; --green-dim: #38a3d9; --glow: 0 0 9px rgba(56, 189, 248, 0.8); --head: #f0f9ff; --text: #dbeafe; --muted: #8aa9c9; --faint: #6384a1; --amber: #fbbf24; } /* ── Synthwave — hot magenta on violet ───────────────────────────────────── */ :root[data-theme="synthwave"] { --bg: #0b0614; --surf-1: #150a24; --surf-2: #1c0f30; --surf-3: #2a1745; --inset: #060310; --line-hair: #2e1a45; --line: #46266b; --line-2: #6b3aa0; --green: #ff4fd8; --green-soft: #390a31; --green-text: #ffb0ef; --green-dim: #d94fbf; --glow: 0 0 10px rgba(255, 79, 216, 0.85); --head: #fdf0ff; --text: #f0dcf7; --muted: #b98ec9; --faint: #9b70b1; --cyan: #22d3ee; } /* ── Nebula — indigo / violet ────────────────────────────────────────────── */ :root[data-theme="nebula"] { --bg: #07060f; --surf-1: #0f0d20; --surf-2: #14122b; --surf-3: #1f1c40; --inset: #040309; --line-hair: #241f45; --line: #362e68; --line-2: #4f45a0; --green: #8b7bff; --green-soft: #241d4d; --green-text: #c7bfff; --green-dim: #8a7dd9; --glow: 0 0 10px rgba(139, 123, 255, 0.8); --head: #f3f1ff; --text: #ddd8f7; --muted: #948fc9; --faint: #7f78be; --cyan: #22d3ee; } /* ── Matrix — pure #0F0 on #000 ──────────────────────────────────────────── */ :root[data-theme="matrix"] { --bg: #000000; --surf-1: #020a02; --surf-2: #041004; --surf-3: #071807; --inset: #000000; --line-hair: #0a3d0a; --line: #0f550f; --line-2: #158015; --green: #00ff00; --green-soft: #0a3d0a; --green-text: #7bff7b; --green-dim: #00c000; --glow: 0 0 9px rgba(0, 255, 0, 0.85); --head: #d6ffd6; --text: #3dff3d; --muted: #1f9f1f; --faint: #1c8f1c; --amber: #ffcc00; /* keep warnings/errors legible against the green */ } /* ── Zomboid Red — phosphor CRT bled out ─────────────────────────────────── */ :root[data-theme="zomboid-red"] { --bg: #0a0405; --surf-1: #140809; --surf-2: #1c0a0b; --surf-3: #2a1113; --inset: #050202; --line-hair: #35191b; --line: #4e2427; --line-2: #75383a; /* --green-soft is the accent WELL, and .badge.running / .badge.online / .who-av paint the accent as text ON it at 10-11px — so this pair carries body-text contrast, not decoration. A deeper maroon than the rest of the ladder is what buys that: #ee3d49 on #2a080c is 4.74:1 (AA); the obvious #3d0e13 sits at 4.25:1 and is the one pair a red accent fails. */ --green: #ee3d49; --green-soft: #2a080c; --green-text: #ffa294; --green-dim: #c9605a; --glow: 0 0 9px rgba(238, 61, 73, 0.8); --head: #fff4ef; --text: #f0dcd6; --muted: #b8938c; --faint: #9e726a; /* The accent is red here, so both signal colors have to step away from it (same trick the amber theme pulls on its gold). Danger is the hard one: several signals are conveyed by color ALONE (.ppip status dots, .btn vs .btn-danger hover borders — the .rail-mono monograms that used to be on this list are gone, replaced by a mark whose status pip differs in SHAPE and states its status in the accessible name, css/servermark.css), so a merely-lighter red is not enough — a rose-shifted red still reads as "the accent, but paler". Both escape routes from the accent's hue are blocked below by --amber's gold, so danger steps the other way, into an alarm magenta. Measured as CIEDE2000 against the accent (the metric that actually tracks "can you tell these apart"): #ff66d1 is ΔE 27.5, vs 13.9 for the rose #ff6b8a it replaces, and vs 26.0 for the closest any other theme puts its danger token to its own accent (synthwave). --amber goes full gold, ΔE 48.6 from the accent and 65.1 from danger. Contrast on the ladder is unaffected: danger is 6.80:1 on --surf-3 (.btn-danger) and 7.56:1 on --surf-1 (.badge.crashed). */ --red: #ff66d1; --amber: #ffc933; /* --on-accent is otherwise theme-fixed (tokens.css), because it inks a bright accent fill. This accent is the darkest of any theme's, so the shared #02180a no longer clears AA on .btn-main: a near-black with no green cast takes the label from 4.75:1 to 5.33:1. */ --on-accent: #0a0002; } /* ── Hytale Azure — twilight sky, cobalt accent ──────────────────────────── */ :root[data-theme="hytale-azure"] { /* The ground carries this theme, not the accent: a fourth blue accent on its own would not separate it from "ice", which is already cyan-on-midnight. So the ladder is a genuinely CHROMATIC ultramarine where ice's is a black that happens to be blue — in CIELAB the two grounds are C* 20.6 vs 3.6 at L* 3.7 vs 1.9, i.e. ΔE00 11.85 apart (and 11.23 from nebula's), where the six shipped grounds sit only 1.7–9.6 from each other. Legibility is unaffected by the lift: --text over it is 15.16:1, inside the shipped 14.63–17.71 band. */ --bg: #060a28; --surf-1: #0a1131; --surf-2: #0d1636; --surf-3: #142043; --inset: #040626; --line-hair: #1b284d; --line: #2a3f70; --line-2: #3f62a6; /* Ice's accent is a pale clinical cyan, L* 72 / C* 42 / LAB hue 248; this one is a deep saturated azure at L* 57 / C* 65 / hue 284, so it steps away on all three axes at once (ΔE00 19.5). It also clears the categorical --cyan badge colour by ΔE00 34.0, where ice's own accent manages only 14.6. --green-soft is the accent WELL, and .badge.running / .badge.online / .who-av paint the accent as text ON it at 10-11px — so that pair carries body-text contrast, not decoration. Reusing the ladder's --surf-3 as the well would land on 4.53:1, AA by 0.03; the deeper azure below buys 4.82:1. */ /* --green-dim is the QUIETER tier of the accent (.lbl, .eyebrow, .pk-value bars), and it has to read as a different tier where the two sit in one view. Every other theme gets that by darkening its accent — which does not work here: this accent is already dark (L* 56.9) and the dim sits just above it at L* 60.1, so darkening closes the gap instead of opening it (L* -6 measures ΔE00 4.2, WORSE than the 4.29 it started at, and drops --green-dim on --surf-2 to 4.57:1, under the 4.83 floor the shipped themes hold). The separation this palette has room for is CHROMA: same lightness, 20% less of it, which lands the accent→dim step at ΔE00 6.73 — inside the 5.69–7.59 the nearest peers (nebula, ice, zomboid-red) hold — and leaves contrast where it was (5.60:1 on --surf-2, 6.14:1 on --bg). It stays ΔE00 7.5 from the neutral --muted, so a label still reads as accent-tinted rather than as body copy. */ --green: #3f86f7; --green-soft: #081b3e; --green-text: #adceff; --green-dim: #7091cf; --glow: 0 0 9px rgba(63, 134, 247, 0.8); --head: #f4f8ff; --text: #d7e4fd; --muted: #90a4d0; --faint: #6b82b6; /* No danger/warning override, unlike the red and gold accents that had to re-point theirs: a blue accent leaves both signal hues free. Measured against this accent, the tokens.css defaults sit at ΔE00 44.9 (danger) and 60.4 (warning) — well past the 26.0 and 19.5 the shipped themes get away with — and they keep AA on the ladder: danger is 5.07:1 on --surf-2, 4.56:1 on --surf-3 (.btn-danger) and 5.28:1 on --surf-1 (.badge.crashed). */ /* --on-accent is otherwise theme-fixed (tokens.css), but the shared ink is a green-black: on this fill .btn-main's 85%-opacity kbd hint drops to 4.35:1, under AA at --fs-xs, which base.css depends on holding for every theme. The same near-black with a blue cast rather than a green one restores it to 5.05:1 and lifts the label from 5.24:1 to 5.85:1. */ --on-accent: #00030f; } /* ── Interface density ───────────────────────────────────────────────────── */ :root[data-density="compact"] { --s1: 6px; --s2: 9px; --s3: 12px; --s4: 16px; --s5: 22px; } /* ── CRT mode (opt-in) — scanline overlay + a touch more phosphor bloom ───── */ :root[data-crt="on"] body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.22) 3px, rgba(0, 0, 0, 0.22) 3px); mix-blend-mode: multiply; } :root[data-crt="on"] { --glow: 0 0 15px var(--green); } :root[data-crt="on"] .lbl, :root[data-crt="on"] .sname, :root[data-crt="on"] .connect .addr, :root[data-crt="on"] .badge.running, :root[data-crt="on"] .sv-tab.active { text-shadow: 0 0 8px currentColor; } :root[data-crt="on"] .btn-main { box-shadow: 0 0 16px var(--green-soft); } /* ── Reduce motion (opt-in, independent of the OS setting) ───────────────── */ :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }