/* * Color themes. Each block overrides CSS variables from :root in app.css. * Activated by data-theme="..." on the element (set in App.razor). * * Status colors (online/away/danger/success/warning) are intentionally NOT * overridden — they carry semantic meaning that should stay consistent across * themes (green = online universally, red = danger, etc.). * * Default theme (discord-dark) has no block here — it falls through to :root. */ /* ========================================================================== Midnight — near-black backdrop with deep violet accent ========================================================================== */ [data-theme="midnight"] { --bg-darkest: #050510; --bg-header: #0d0d18; --bg-sidebar: #14141e; --bg-hover: #1c1c28; --bg-primary: #0a0a14; --bg-secondary: #161620; --bg-input: #1f1f2b; --bg-muted: #2a2a38; --bg-tertiary: #1a1a26; --text-white: #ffffff; --text-primary: #d4d4e0; --text-secondary: #a0a0b0; --text-muted: #7a7a90; --text-tertiary: #66667a; --text-placeholder: #50506a; --accent-primary: #7c4dff; --accent-hover: #6a3dd9; --accent-light: #e3d9ff; --accent-focus: #b388ff; --accent-tint: hsl(259 100% 65% / 0.16); --border-dark: #0d0d18; --border-subtle: #050510; } /* ========================================================================== Nord — cool slate-grey with frost-blue accent ========================================================================== */ [data-theme="nord"] { --bg-darkest: #1c2129; --bg-header: #242933; --bg-sidebar: #2e3440; --bg-hover: #353c4a; --bg-primary: #2e3440; --bg-secondary: #3b4252; --bg-input: #434c5e; --bg-muted: #4c566a; --bg-tertiary: #353c4a; --text-white: #eceff4; --text-primary: #e5e9f0; --text-secondary: #d8dee9; --text-muted: #a3aab8; --text-tertiary: #8d95a4; --text-placeholder: #6e7689; --accent-primary: #88c0d0; --accent-hover: #6da8b9; --accent-light: #d1e6ec; --accent-focus: #5e81ac; --accent-tint: hsl(193 43% 67% / 0.18); --border-dark: #242933; --border-subtle: #1c2129; } /* ========================================================================== Ocean — teal-to-navy gradient with cyan accent ========================================================================== */ [data-theme="ocean"] { --bg-darkest: #061319; --bg-header: #0a1929; --bg-sidebar: #0f2538; --bg-hover: #14334a; --bg-primary: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); --bg-canvas: #0f2027; /* solid for the root canvas (iOS status bar, overscroll) - a gradient cannot color it */ --bg-secondary: #1c3a52; --bg-input: #14334a; --bg-muted: #2a4d68; --bg-tertiary: #0f2538; --text-white: #e0f7fa; --text-primary: #c9e8ee; --text-secondary: #a0c5ce; --text-muted: #7ea3ad; --text-tertiary: #6a8a98; --text-placeholder: #506e7d; --accent-primary: #26d0ce; --accent-hover: #1ab0ae; --accent-light: #b8eeed; --accent-focus: #00bcd4; --accent-tint: hsl(179 70% 49% / 0.16); --border-dark: #061319; --border-subtle: #030a0e; } /* ========================================================================== Sunset — purple-to-coral gradient with rose-pink accent ========================================================================== */ [data-theme="sunset"] { --bg-darkest: #1a0e26; --bg-header: #261535; --bg-sidebar: #321c43; --bg-hover: #422450; --bg-primary: linear-gradient(135deg, #2d1b3d 0%, #6b2d5c 50%, #c44569 100%); --bg-canvas: #2d1b3d; /* solid for the root canvas (iOS status bar, overscroll) - a gradient cannot color it */ --bg-secondary: #432555; --bg-input: #4d2d63; --bg-muted: #6b4282; --bg-tertiary: #382144; --text-white: #fff5fb; --text-primary: #f0e0eb; --text-secondary: #d4b8c8; --text-muted: #b08aa0; --text-tertiary: #946d85; --text-placeholder: #7a5b6e; --accent-primary: #ff6b9d; --accent-hover: #e54d82; --accent-light: #ffd1e1; --accent-focus: #ff8fb5; --accent-tint: hsl(335 100% 71% / 0.16); --border-dark: #1a0e26; --border-subtle: #0d0713; } /* ========================================================================== Aurora — indigo/navy gradient with violet accent ========================================================================== */ [data-theme="aurora"] { --bg-darkest: #0a0420; --bg-header: #120a2e; --bg-sidebar: #1a1240; --bg-hover: #251950; --bg-primary: linear-gradient(135deg, #1a0a2e 0%, #16213e 50%, #0f3460 100%); --bg-canvas: #1a0a2e; /* solid for the root canvas (iOS status bar, overscroll) - a gradient cannot color it */ --bg-secondary: #1f1850; --bg-input: #261c60; --bg-muted: #382a78; --bg-tertiary: #1f1645; --text-white: #f0e8ff; --text-primary: #dcd0f7; --text-secondary: #b5a8d8; --text-muted: #8e82b0; --text-tertiary: #756988; --text-placeholder: #5b526e; --accent-primary: #a78bfa; --accent-hover: #8b6fe0; --accent-light: #e3d8ff; --accent-focus: #c4b5fd; --accent-tint: hsl(254 92% 76% / 0.18); --border-dark: #0a0420; --border-subtle: #050210; } /* ========================================================================== Daylight — light backgrounds, dark text. Note: --text-white is the highest-emphasis text (used for headings), so under a light theme it inverts to near-black for proper contrast. ========================================================================== */ [data-theme="light"] { --bg-darkest: #e0e0e5; --bg-header: #ffffff; --bg-sidebar: #f0f0f3; --bg-hover: #e8e8ed; --bg-primary: #f5f5f7; --bg-secondary: #ebebef; --bg-input: #ffffff; --bg-muted: #d4d4d9; --bg-tertiary: #d8d8df; --text-white: #0a0a14; --text-primary: #1c1d21; --text-secondary: #4a4b50; --text-muted: #6e6f73; --text-tertiary: #8b8c91; --text-placeholder: #b0b1b5; --accent-primary: #5865f2; --accent-hover: #4752c4; --accent-light: #dee0fc; --accent-focus: #4760e8; --accent-tint: hsl(235 86% 65% / 0.12); --border-dark: #d0d0d5; --border-subtle: #c4c4ca; /* Dark tint: the default white one is invisible on a light canvas. */ --pattern-tint: hsl(0 0% 0% / 0.025); } /* ========================================================================== Solarized Light — Ethan Schoonover's palette, transcribed not redesigned The palette is fixed and public (base03..base3 plus eight accents), so most of this block is copying. Three things needed a decision: 1. Solarized light ships exactly TWO backgrounds: base3 #fdf6e3 (canvas) and base2 #eee8d5, whose job in the spec is "background highlights". A chat shell needs nine rungs. The deep end is not invented - #ddd6c1, #d9d2c2 and #d3cbb7 are the tones Microsoft's own Solarized Light port for VS Code added for exactly this reason (activity bar, tab strip, borders); the two between them are straight interpolations from base2 down to #ddd6c1. 2. Surfaces stand out by going DEEPER, never lighter. Nothing in the palette is lighter than base3, and base2 is the spec's own highlight tone - so the composer, the chrome and row hover all step DOWN from the canvas. That is the opposite of Daylight, where the header and input are white, and it is the one structural thing to preserve if these values are ever retuned. 3. No patterns (see the plain-club rule below) - this is paper. ========================================================================== */ [data-theme="solarized-light"] { --bg-primary: #fdf6e3; /* base3 - the canvas; the colour people mean by "Solarized Light" */ --bg-header: #eee8d5; /* base2 */ --bg-sidebar: #eee8d5; /* base2 */ --bg-input: #eee8d5; /* base2 - a field reads by stepping down from the canvas, not up */ --bg-hover: #e8e2ce; /* base2 -> #ddd6c1, 1/3 */ --bg-secondary: #e3dcc8; /* base2 -> #ddd6c1, 2/3 */ --bg-darkest: #ddd6c1; --bg-tertiary: #d9d2c2; --bg-muted: #d3cbb7; /* The spec's light ramp, shifted one rung darker at the top. Solarized calls base00 "body text", but that is 4.1:1 on base3 - under AA, and here the body text is conversation people read for hours, not code they skim. So base01 (5.0:1) takes the message body and base00 slides down to secondary. Below that the rungs are verbatim; --text-muted is the one interpolation, because base00 and base0 alone leave a gap this shell has a slot for. */ --text-white: #073642; /* base02 - the spec's "most emphasized"; headings, usernames */ --text-primary: #586e75; /* base01 */ --text-secondary: #657b83; /* base00 */ --text-muted: #74888d; /* base00 -> base0, midpoint */ --text-tertiary: #839496; /* base0 */ --text-placeholder: #93a1a1; /* base1 - the spec's "comments"; faint on purpose */ /* Blue is Solarized's accent wherever the scheme has a UI. Being blue is also what lets the status colours stay untouched - see the note at the bottom. */ --accent-primary: #268bd2; /* blue */ --accent-hover: #1c6397; --accent-focus: #2072ac; /* Message links land here and are NOT underlined, so this is blue darkened until it clears 4.5:1 on base3. The palette blue itself is only 3.4:1 there. */ --accent-light: #0f5578; /* Inverts on a light theme for the same reason --text-white does: its only job is ink on the pale reacted-reaction pill, which is a light tint on every theme. */ --accent-tint: hsl(205 69% 49% / 0.12); --border-dark: #ddd6c1; --border-subtle: #d3cbb7; /* Status colours are deliberately NOT solarized, tempting as the palette is. Its green (#859900) sits at hue 68 and its yellow (#b58900) at hue 45 - 23 degrees apart, which at dot size stops telling online from away. That is precisely the failure the Themes 2.0 convention warns about, and this theme has no collision forcing the trade: the accent is blue, so presence can keep the app's own greens. Solarized's identity here is the paper and the blue, not the dots. */ } /* ========================================================================== Room vs DM Generalises what the 3px header line under the header has always done: tell you at a glance whether you are in a room or a DM. Every theme gets a faint diagonal hairline in DMs; a theme can swap the shape for something of its own. Scoped to .chat-container (not ) because Blazor sets data-context there. Deliberately limited to pattern and tint - never a status colour. ========================================================================== */ .chat-container[data-context="dm"] { --canvas-pattern: var(--pattern-waves); --pattern-color: var(--pattern-tint); } /* The DM marker splits by temperament: ocean and sunset keep the flowing waves; the neon themes and Tea House override further down with their own; and the plain club (discord-dark, midnight, nord, aurora, solarized-light) deliberately has NO pattern - part of the lineup's choice: users who want plain DMs pick these. The explicit `none` below is required, not redundant: without it they would fall back to the generic waves rule - and BOTH lines are needed (see the comment inside the rule). */ [data-theme="discord-dark"] .chat-container[data-context="dm"], [data-theme="midnight"] .chat-container[data-context="dm"], [data-theme="nord"] .chat-container[data-context="dm"], [data-theme="aurora"] .chat-container[data-context="dm"], [data-theme="solarized-light"] .chat-container[data-context="dm"] { /* BOTH lines are required. `mask-image: none` means unmasked - fully painted - so killing only the mask leaves the generic DM rule's tint as a wash over the whole conversation (shipped briefly as exactly that bug: nord DMs lightened to the sidebar's colour). */ --canvas-pattern: none; --pattern-color: transparent; } /* PARKED: pebbles for the three themes above, tuned and approved 2026-08-25 ("if we use them it will be like this") but deactivated in favour of plain DMs. To bring them back, replace the `none` rule above with: [data-theme="discord-dark"] .chat-container[data-context="dm"], [data-theme="midnight"] .chat-container[data-context="dm"], [data-theme="nord"] .chat-container[data-context="dm"] { --canvas-pattern: var(--pattern-pebbles); --pattern-color: hsl(0 0% 100% / 0.009); } The alpha keeps the settled relationship: filled 40px blobs carry far more ink than stroke motifs, so pebbles run well below the shared DM tint. (The number itself is half of what was approved that day - it rode along with the 2026-08-27 halving of every pattern alpha, so it stays comparable to the tints around it.) */ [data-theme="light"] .chat-container[data-context="dm"] { --canvas-pattern: var(--pattern-pebbles); --pattern-color: hsl(0 0% 0% / 0.016); } /* Tea House: rain-on-a-pond ripples. The scene itself belongs to the clock, so the context gets the pattern. */ [data-theme="teahouse"] .chat-container[data-context="dm"] { --canvas-pattern: var(--pattern-ripples); } /* ========================================================================== Terminal — the 90s cypherpunk mailing list, PGP, "cypherpunks write code" A terminal, not a nightclub: phosphor on near-black, restraint, minimal glow. Note the accent green and the online green are deliberately DIFFERENT greens. Themes may now override status colours, but the failure mode is not a wrong green - it is presence-green and accent-green being the SAME green, which makes the online dot stop carrying information. ========================================================================== */ [data-theme="terminal"] { --bg-darkest: #030505; --bg-header: #080c0b; --bg-sidebar: #0d1211; --bg-hover: #16201d; --bg-primary: #07090a; --bg-secondary: #0f1614; --bg-input: #151d1a; --bg-muted: #24322e; --bg-tertiary: #0b100f; /* Body text is deliberately NOT phosphor. Saturated green over a long message is exhausting; the green lives in the accent. */ --text-white: #eafff0; --text-primary: #c8d3cc; --text-secondary: #9fb0a8; --text-muted: #7d8f87; --text-tertiary: #6a7a73; --text-placeholder: #55635d; --accent-primary: #33ff66; --accent-hover: #22cc4f; --accent-light: #ccffdb; --accent-focus: #66ff8f; --accent-tint: hsl(140 100% 60% / 0.14); --status-online: #7dffb0; /* pale mint, distinct from the vivid accent green */ --status-online-hover: #5ce094; --status-away: #ffb000; --status-away-hover: #ffc84d; --color-success: #33ff66; --color-warning: #ffb000; --color-danger: #ff5f56; /* stays unmistakably red - it guards destructive actions */ --border-dark: #080c0b; --border-subtle: #030505; /* Phosphor specks - stray glow on the terminal glass. A signature pattern earns more alpha than a DM marker; below roughly half the DM tint the specks stop being subtle and are simply absent. */ --canvas-pattern: var(--pattern-specks); --pattern-color: hsl(140 100% 60% / 0.0375); --pattern-tint: hsl(140 100% 60% / 0.04); --glow-accent: 0 0 6px hsl(140 100% 60% / 0.35); /* a CRT, not a nightclub */ --glow-status: 0 0 6px currentColor; /* The header chip's bg IS the status colour; white text vanishes on this pale mint. The darkest bg doubles as ink. */ --status-chip-text: var(--bg-darkest); } /* DMs are the encrypted channel: the specks thicken. */ [data-theme="terminal"] .chat-container[data-context="dm"] { --canvas-pattern: var(--pattern-specks-dense); } /* ========================================================================== Neon Glow — cyberpunk neon noir Where the glow axis earns its keep. No status collision at all here: the accent is magenta, so every status colour can be neon-ified in place. Kept deliberately unlike Terminal - quiet/green/minimal vs saturated/ magenta/glowing. If they read as siblings in the picker, one of them is wrong. ========================================================================== */ [data-theme="neon-glow"] { --bg-darkest: #08051a; --bg-header: #110b28; --bg-sidebar: #181036; --bg-hover: #261a4d; --bg-primary: #0d0820; --bg-secondary: #1c1240; --bg-input: #221647; --bg-muted: #3d2a6b; --bg-tertiary: #150e2e; --text-white: #fdf7ff; --text-primary: #e6dcf5; --text-secondary: #bcaed4; --text-muted: #9a8cb5; --text-tertiary: #82749d; --text-placeholder: #6a5c85; --accent-primary: #ff2e88; --accent-hover: #d81f6f; --accent-light: #ffd0e5; --accent-focus: #22d3ee; --accent-tint: hsl(330 100% 59% / 0.16); --status-online: #39ff8b; --status-online-hover: #22d96f; --status-away: #ffc93c; --status-away-hover: #ffd970; --color-success: #39ff8b; --color-warning: #ffc93c; --color-danger: #ff4d5e; --border-dark: #110b28; --border-subtle: #08051a; /* Rain on the window - cyan droplets against the magenta accent is the whole neon-noir pairing. Signature pattern, so it reads rather than hides. */ --canvas-pattern: var(--pattern-drops); --pattern-color: hsl(190 90% 55% / 0.055); --pattern-tint: hsl(330 100% 59% / 0.05); --glow-accent: 0 0 8px hsl(330 100% 59% / 0.55); --glow-status: 0 0 6px currentColor; /* Same reason as Terminal: neon status greens need dark chip text. */ --status-chip-text: var(--bg-darkest); } /* In DMs the rain stays but flips to the magenta tint (the generic DM rule would otherwise swap the drops for the shared waves). */ [data-theme="neon-glow"] .chat-container[data-context="dm"] { --canvas-pattern: var(--pattern-drops); }