/* * CommuBoard - theme tokens. * * Colors follow the framework color scheme (body.color_scheme_light / * body.color_scheme_dark, set by Rhymix.detectColorScheme()) and reuse the * layout's own custom properties when the layout defines them. The literal * values below are only fallbacks for layouts that do not define them. */ .cb-board { --cb-bg: var(--bg-body, #ffffff); --cb-bg-sub: var(--bg-sidebar, #f8f9fa); --cb-bg-hover: var(--bg-hover, #f1f3f5); --cb-bg-input: var(--bg-input, #ffffff); --cb-text: var(--text-primary, #333333); --cb-text-sub: var(--text-secondary, #666666); --cb-text-muted: var(--text-placeholder, #868e96); --cb-border: var(--border-color, #e9ecef); --cb-shadow-color: var(--shadow-color, rgba(0, 0, 0, 0.08)); /* Derived tokens the layout does not provide. */ --cb-border-strong: color-mix(in srgb, var(--cb-border) 100%, var(--cb-text) 25%); --cb-bg-notice: color-mix(in srgb, var(--cb-bg) 45%, var(--cb-bg-hover)); /* * Reply surfaces. Mixed against --cb-text rather than between the two * background tokens, because --cb-bg-hover is only a couple of steps off * white in light mode and blending within that range stays invisible. * Pulling toward the text color darkens in light mode and lightens in dark * mode - either way it moves away from the page background. */ --cb-bg-reply: color-mix(in srgb, var(--cb-bg-hover) 100%, var(--cb-text) 3%); --cb-bg-reply-head: color-mix(in srgb, var(--cb-bg-hover) 100%, var(--cb-text) 7%); --cb-text-visited: var(--cb-text-muted); --cb-accent: #5865f2; --cb-accent-text: #ffffff; --cb-best: #f08c00; --cb-badge-bg: #868e96; --cb-badge-text: #ffffff; --cb-vote-up: #3b5bdb; --cb-vote-down: #e03131; --cb-scrim: rgba(0, 0, 0, 0.35); } body.color_scheme_dark .cb-board { --cb-bg: var(--bg-body, #181818); --cb-bg-sub: var(--bg-sidebar, #1e1e1e); --cb-bg-hover: var(--bg-hover, #333333); --cb-bg-input: var(--bg-input, #2c2c2c); --cb-text: var(--text-primary, #e0e0e0); --cb-text-sub: var(--text-secondary, #a0a0a0); --cb-text-muted: var(--text-placeholder, #666666); --cb-border: var(--border-color, #333333); --cb-shadow-color: var(--shadow-color, rgba(0, 0, 0, 0.5)); --cb-best: #ffc078; --cb-badge-bg: #495057; --cb-vote-up: #748ffc; --cb-vote-down: #ff8787; --cb-scrim: rgba(0, 0, 0, 0.55); } /* * First-paint fallback. * * When the visitor has not explicitly chosen a scheme there is no * rx_color_scheme cookie, so the server emits a bare and the dark * class is only added by detectColorScheme() after the document starts * parsing. Without this block the board would paint with light values and * then repaint dark, which reads as a flash. Literal values are required * here because the layout's own --bg-* variables are still on their light * values at that moment. */ @media (prefers-color-scheme: dark) { body:not(.color_scheme_light):not(.color_scheme_dark) .cb-board { --cb-bg: #181818; --cb-bg-sub: #1e1e1e; --cb-bg-hover: #333333; --cb-bg-input: #2c2c2c; --cb-text: #e0e0e0; --cb-text-sub: #a0a0a0; --cb-text-muted: #666666; --cb-border: #333333; --cb-shadow-color: rgba(0, 0, 0, 0.5); --cb-best: #ffc078; --cb-badge-bg: #495057; --cb-vote-up: #748ffc; --cb-vote-down: #ff8787; --cb-scrim: rgba(0, 0, 0, 0.55); } } /* color-mix fallback for older engines. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .cb-board { --cb-border-strong: #ced4da; --cb-bg-notice: #f1f3f5; --cb-bg-reply: #ebedee; --cb-bg-reply-head: #e5e7e8; } body.color_scheme_dark .cb-board { --cb-border-strong: #4a4a4a; --cb-bg-notice: #2a2a2a; --cb-bg-reply: #383838; --cb-bg-reply-head: #3e3e3e; } }