/* ===================================================================== themes.css — the looks the system ships with. Every component reads its colour from the tokens in tokens.css and never reaches for a raw hue, so a theme is nothing more than a different set of values for a dozen of them. That is the whole reason the token layer exists. Green is the default and lives in tokens.css; the rest override it here, keyed off data-theme on the element so the choice is in place before the first paint. A dark rail needs pale ink and a pale rail needs dark ink, so every light theme turns over the whole --c-nav-* set, not only the background. A hard-coded white on a white sidebar simply disappears. ===================================================================== */ /* A white pill with the sidebar's own purple inside it, as specified. */ /* -- Dark blue ---------------------------------------------------------- */ :root[data-theme="dark-blue"] { --c-brand: #1d4ed8; --c-brand-dark: #1a43b8; --c-brand-darker: #17325a; --c-brand-tint: #e6edfb; --c-brand-line: #c3d4f6; --c-nav: #0b1f3a; --c-nav-hover: #12294a; --c-nav-active: #17325a; --ring: 0 0 0 3px rgba(29, 78, 216, .18); } /* -- Light -------------------------------------------------------------- */ :root[data-theme="light"] { --c-brand: #1d5cee; --c-brand-dark: #1749c4; --c-brand-darker: #12399b; --c-brand-tint: #e9f0fe; --c-brand-line: #c6d8fb; --c-nav: #ffffff; --c-nav-hover: #f5f6f8; --c-nav-active: #f5f6f8; --c-nav-line: #ededed; --c-nav-ink: #7a7a85; --c-nav-ink-dim: #9a9aa4; --c-nav-ink-strong: #1a1a2e; --c-nav-raise: #f5f6f8; --c-nav-ring: rgba(26, 26, 46, .45); --c-nav-scroll: rgba(26, 26, 46, .18); --c-bad: #f5504a; --c-bad-line: #fbc5c3; --c-bad-tint: #fdecec; --ring: 0 0 0 3px rgba(29, 92, 238, .16); } /* The logo tile keeps the brand blue on a white rail, where a tinted square would vanish. */ :root[data-theme="light"] .brand__mark { background: #1d5cee; color: #fff; } /* -- Dark --------------------------------------------------------------- Not a dark rail beside a white page - the whole surface goes down, or the sidebar reads as a hole cut in a bright screen. */ :root[data-theme="dark"] { --c-brand: #5b8cff; --c-brand-dark: #7ba3ff; --c-brand-darker: #9dbaff; --c-brand-tint: #1c2333; --c-brand-line: #2f3a52; /* The page behind the cards. Named --c-page in tokens.css - a theme that invents its own name for it silently changes nothing. */ --c-page: #0f1014; --c-surface: #1a1c22; --c-sunken: #15171c; --c-line: #2a2d36; --c-line-strong: #3a3e4a; --c-ink: #e8eaee; --c-ink-2: #c2c6cf; --c-ink-3: #9aa0ac; --c-ink-4: #767c88; --c-nav: #15161a; --c-nav-hover: #212429; --c-nav-active: #2a2e35; --c-nav-line: rgba(255, 255, 255, .08); --c-nav-ink: rgba(255, 255, 255, .74); --c-nav-ink-dim: rgba(255, 255, 255, .46); --c-nav-ink-strong: #ffffff; --c-ok-tint: #16261d; --c-ok-line: #26492f; --c-warn-tint: #2a2214; --c-warn-line: #4d3c1c; --c-bad-tint: #2a1719; --c-bad-line: #4d2429; --c-info-tint: #16202e; --c-info-line: #26405e; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35); --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .60), 0 3px 8px -4px rgba(0, 0, 0, .40); --shadow-lg: 0 28px 56px -16px rgba(0, 0, 0, .70), 0 8px 20px -8px rgba(0, 0, 0, .50); --ring: 0 0 0 3px rgba(91, 140, 255, .28); color-scheme: dark; } /* Form controls and the printable sheet are the two places that name a literal white; on a dark page both have to follow the surface. */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--c-sunken); border-color: var(--c-line); color: var(--c-ink); } :root[data-theme="dark"] .form-control::placeholder { color: var(--c-ink-4); } :root[data-theme="dark"] .table-x thead th { background: var(--c-sunken); } /* -- A pale rail needs an edge, or it runs into the page behind it ------ */ :root[data-theme="light"] .app-sidebar, /* On a light rail the active row reads as a shape rather than a glow, so it is given the weight the dark themes get from brightness. */ :root[data-theme="light"] .nav-item.is-active, /* ===================================================================== The Theme tab. ===================================================================== */ .theme-grid > .fieldset + .fieldset { margin-top: 18px; } /* The size selects fill their column, the same as the theme and font ones above them: six controls in one form should be one width, not two. */