/* ========================================================================== Themes — token overrides only Two themes, one product. Cream is the default: bright and warm, drawn from the BTC-SOLO design reference — a warm off-white page, near-white cards on a hairline warm border, soft low shadows instead of glass, and a deeper burnt orange (#da6f0c, sampled from the reference's primary button). Midnight is the same product at night: dark, quieter, identical in every other respect. Midnight's values are the base set in variables.css; this file holds Cream's overrides. Which one is *default* is decided in core/config.js and applied as an explicit `data-theme` on , so neither theme is "the absence of the other" and changing the default moves no selector. A theme is a set of *values*, never a set of rules: no selector here changes a size, a spacing step, a font, a radius, a border width or a layout property. Switching themes cannot move a pixel. That includes the branding. The lockup — stacked, centred, sized — lives in layout.css and is shared; a theme swaps only the two logo images, which are the same artwork in two palettes (see tools/make-logo-dark.mjs). There is one mark, whichever theme you are in. Adding a theme: 1. add a `:root[data-theme="…"]` block below overriding the same tokens 2. add the two `.brand__mark` / `.brand__text` image swaps 3. add it to THEMES in core/config.js Nothing else in the app needs to know it exists. ========================================================================== */ :root[data-theme="cream"] { /* Form controls, scrollbars and the UA's own widgets follow this. */ color-scheme: light; /* --- Surfaces -------------------------------------------------------- */ --bg-base: #f4f1ec; --surface-1: #ffffff; --surface-2: #faf8f5; --surface-3: #f1ede7; /* "Glass" becomes paper: opaque cards on a warm ground. The blur is dropped to none because a translucent card over a light page reads as dirty rather than layered. */ --glass-bg: #fffdfb; --glass-bg-strong: #f7f3ee; --glass-border: #e9e3da; --glass-border-strong: #d8d0c4; --glass-highlight: rgba(255, 255, 255, 0); --glass-blur: 0px; --glass-filter: none; --surface-inset: #f4f1ec; --surface-overlay: rgba(255, 255, 255, 0.98); --divider: rgba(26, 22, 18, 0.07); /* --- Ink ------------------------------------------------------------- */ --text-primary: #17181c; --text-secondary: #4d5560; --text-muted: #6c6e74; --text-inverse: #ffffff; /* --- Brand ----------------------------------------------------------- */ /* Sampled off the reference's Copy Address button and active nav label. */ --brand: #da6f0c; --brand-hover: #f07f18; --brand-dim: rgba(218, 111, 12, 0.10); --brand-glow: rgba(218, 111, 12, 0.16); --brand-border-hover: rgba(218, 111, 12, 0.38); /* The reference's orange is 3.3:1 on paper — right for a plate or a chart stroke, short of AA for a 14px label. Text gets a darker sibling; every surface keeps the sampled colour, so the identity is unchanged. */ --brand-ink: #aa5709; /* --- Status ---------------------------------------------------------- Darkened from the dark theme's values: the same hues at the same lightness would fail contrast on a near-white card. */ --status-good: #0f7a45; --status-good-dim: rgba(15, 122, 69, 0.12); --status-warning: #996100; --status-warning-dim: rgba(168, 107, 0, 0.12); --status-serious: #b94d1b; --status-serious-dim: rgba(191, 79, 28, 0.12); --status-critical: #c5322f; --status-critical-dim: rgba(197, 50, 47, 0.12); /* --- Chart series ---------------------------------------------------- Same order and same roles as the dark palette, re-picked for a white plot area. Each clears 3:1 against the *worse* of card and page, which is the graphical-object threshold — these are strokes and fills, not body text. tools/test/theme.test.mjs enforces it. */ --series-1: #dc6a0a; /* pool hashrate */ --series-2: #2563eb; /* network hashrate */ --series-3: #0f7a45; /* difficulty */ --series-4: #6d3fd4; /* workers */ --series-5: #be1558; /* shares / SPS */ /* --- News categories -------------------------------------------------- Small uppercase text on white, so every one clears 4.5:1. */ --news-mining: #a95809; --news-market: #0d6f3f; --news-regulation: #bf3330; --news-tech: #1d4ed8; --news-network: #0e6f80; --news-security: #6127c4; --news-bitcoin: #676e7a; /* --- Chart chrome ---------------------------------------------------- */ --grid-line: rgba(26, 22, 18, 0.07); --axis-line: rgba(26, 22, 18, 0.14); /* --- Elevation -------------------------------------------------------- Warm and shallow. The dark theme's shadows are near-black at high alpha, which on a light page reads as grime rather than lift. */ --shadow-sm: 0 1px 2px rgba(38, 30, 22, 0.05); --shadow-md: 0 1px 3px rgba(38, 30, 22, 0.05), 0 6px 20px rgba(38, 30, 22, 0.05); --shadow-lg: 0 12px 34px rgba(38, 30, 22, 0.11); } /* -------------------------------------------------------------------------- Literal colours that no token could reach Every rule below overrides a hardcoded value in the base stylesheets. They are here rather than in those files so the dark theme's own declarations stay exactly as they were. None of them changes geometry: only colour, gradient stops, and one background-image swap for the logo. -------------------------------------------------------------------------- */ /* The ambient page wash. The dark theme paints three coloured glows over a near-black base; on paper the same glows become a faint warm gradient. */ :root[data-theme="cream"] body::before { background: radial-gradient( 1100px 620px at 12% -8%, rgba(218, 111, 12, 0.06), transparent 62% ), radial-gradient( 900px 520px at 88% 4%, rgba(37, 99, 235, 0.045), transparent 60% ), radial-gradient( 760px 460px at 50% 108%, rgba(109, 63, 212, 0.035), transparent 62% ); } /* Sidebar and topbar: opaque paper, not smoked glass. The rail is set to #fefdfb — the ground colour sampled from the uploaded artwork itself. The logo crops carry that ground with them (keying it out would alter the file), so matching the rail to it is what makes the artwork sit on the sidebar with no rectangle behind it. */ :root[data-theme="cream"] .sidebar { background: #fefdfb; } :root[data-theme="cream"] .topbar { background: rgba(251, 248, 244, 0.88); } :root[data-theme="cream"] .scrim { background: rgba(38, 30, 22, 0.32); } /* The card's specular top edge is a dark-theme device; on paper it would be an invisible white line over white. */ :root[data-theme="cream"] .card::before { background: none; } /* Brand lockup — the palette swap, and nothing else. The lockup itself (stacked, centred, sized) lives in layout.css and is shared, because the mark must be the same mark in both themes. Cream points the two images at the original crops; Midnight uses the derived pair. Only `background-image` is overridden: the `background` shorthand would reset the `contain` sizing and the centring with it, and the mark would jump to its natural size in one theme and not the other. */ :root[data-theme="cream"] .brand__mark { background-image: url("../img/logo-emblem.png"); } :root[data-theme="cream"] .brand__text { background-image: url("../img/logo-wordmark.png"); } /* Skeleton shimmer: dark theme sweeps white over black. */ :root[data-theme="cream"] .skeleton { background: linear-gradient( 90deg, var(--surface-inset) 25%, rgba(26, 22, 18, 0.06) 37%, var(--surface-inset) 63% ); } /* Gauge track. */ :root[data-theme="cream"] .gauge__track { stroke: rgba(26, 22, 18, 0.10); } /* News rows: the hover headline goes to full black on paper, not full white, and the divider inverts. */ :root[data-theme="cream"] .news__item + .news__item { border-top: 1px solid rgba(26, 22, 18, 0.07); } :root[data-theme="cream"] .news__item:hover .news__headline { color: #000; } /* An inset highlight designed for a dark surface. */ :root[data-theme="cream"] .donate__qr { box-shadow: inset 0 1px 0 rgba(26, 22, 18, 0.04); } /* The donation panel's brand wash, restruck in the reference's orange over paper. Same geometry, same stops — only the tint changes. */ :root[data-theme="cream"] .donate { background: radial-gradient( 18rem 12rem at 90% -10%, rgba(218, 111, 12, 0.09), transparent 70% ), var(--glass-bg); } /* The QR fallback's hint, and the success state's ink on the green button. */ :root[data-theme="cream"] .qr__error-hint { color: var(--text-muted); } :root[data-theme="cream"] .donate__copy[data-state="success"] { color: #ffffff; } /* Scrollbar thumb hover — the dark theme's slate is invisible on paper. */ :root[data-theme="cream"] *::-webkit-scrollbar-thumb:hover { background-color: #c9c1b5; }