/* Shared theme layer, loaded before the per-page stylesheet on all four pages. Every colour the pages use is declared here as a semantic custom property, so a rule never names a raw colour and a theme change cannot leave a corner behind. The dark values are overridden twice: once under [data-theme="dark"] for an explicit choice, and once under prefers-color-scheme for the OS default, guarded by :not([data-theme="light"]) so the toggle always wins. The green header band, the hot/cold circles and the mobile nav drawer are the same in both themes -- they are already dark-on-colour and read fine either way. */ :root { color-scheme: light; --page-bg: #ffffff; --nav-bg: #fafafa; --text: #000000; --surface: #ffffff; --surface-alt: #f2f2f2; --border: #f2f2f2; --accent: #2dc84d; --on-accent: #ffffff; --hero-title: #000000; --danger: #ff0000; --shadow-near: rgba(0, 0, 0, 0.2); --shadow-far: rgba(0, 0, 0, 0.19); /* the platform buttons on /overview, outlined from script-overview.js */ --control-border: #808080; /* keepkey, ledger and trezor are single-colour dark wordmarks that vanish against a dark card, so in dark mode they are redrawn in white. */ --logo-white: none; --icon-invert: none; --os-icon-boost: none; } :root[data-theme="dark"] { color-scheme: dark; --page-bg: #22272e; --nav-bg: #2d333b; --text: #d8dee5; --surface: #2d333b; --surface-alt: #373e47; --border: #444c56; /* the BCH green is bright enough to keep as-is on a dark surface */ --accent: #2dc84d; --on-accent: #ffffff; --hero-title: #000000; --danger: #ff7a70; --shadow-near: rgba(0, 0, 0, 0.55); --shadow-far: rgba(0, 0, 0, 0.5); --control-border: #6e7781; --logo-white: brightness(0) invert(1); --icon-invert: invert(1); --os-icon-boost: brightness(1.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page-bg: #22272e; --nav-bg: #2d333b; --text: #d8dee5; --surface: #2d333b; --surface-alt: #373e47; --border: #444c56; --accent: #2dc84d; --on-accent: #ffffff; --hero-title: #000000; --danger: #ff7a70; --shadow-near: rgba(0, 0, 0, 0.55); --shadow-far: rgba(0, 0, 0, 0.5); --control-border: #6e7781; --logo-white: brightness(0) invert(1); --icon-invert: invert(1); --os-icon-boost: brightness(1.45); } } body { background: var(--page-bg); color: var(--text); } /* --- theme toggle -------------------------------------------------------- */ /* Injected into the nav by theme.js, so the markup lives in one place rather than being pasted into four s. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; vertical-align: middle; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* the two glyphs sit on top of each other and swap with a small spin */ .theme-toggle .icon-stack { position: relative; display: block; width: 16px; height: 16px; } .theme-toggle svg { position: absolute; inset: 0; width: 16px; height: 16px; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .theme-toggle .sun { opacity: 0; transform: rotate(-70deg) scale(0.5); } .theme-toggle .moon { opacity: 1; } .theme-toggle.is-dark .sun { opacity: 1; transform: rotate(0) scale(1); } .theme-toggle.is-dark .moon { opacity: 0; transform: rotate(70deg) scale(0.5); } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle svg { transition: none; } } /* The hamburger has no fill of its own so it renders black; the platform icons are a mid slate that goes dim on a dark page. Both are , so they are corrected with a filter rather than currentColor. */ .menu { filter: var(--icon-invert); } .iconOS { filter: var(--os-icon-boost); } /* flattened to a pure white silhouette, which is lossless here because each of the three is a single dark colour */ .logo[src*="keepkey"], .logo[src*="ledger"], .logo[src*="trezor"] { filter: var(--logo-white); }