/* Theme palettes for the local WBW reader. * * Switched by setting data-palette on . Each palette redefines the same * seven surface variables that reader.css declares, plus the four highlight * colours from annotate.css so annotations stay legible on every background. * * Colour values are the canonical ones published by each upstream scheme * (Nord, Solarized, Gruvbox, Catppuccin, Dracula, Rosé Pine, Tokyo Night, * Kanagawa, One). With no data-palette set the reader keeps its original * automatic light/dark behaviour. */ /* Light-theme highlight set, reused by every light palette. */ [data-palette="paper"], [data-palette="solarized-light"], [data-palette="rose-pine-dawn"], [data-palette="gruvbox-light"], [data-palette="one-light"]{ --hl-yellow:#ffe9a3; --hl-green:#c6ecc6; --hl-blue:#c5e2f7; --hl-pink:#f9cfe0; --hl-yellow-b:#e0b93a; --hl-green-b:#5aa85a; --hl-blue-b:#3f8fc4; --hl-pink-b:#cc6e97; color-scheme:light; } /* Dark-theme highlight set, reused by every dark palette. */ [data-palette="nord"], [data-palette="tokyo-night"], [data-palette="catppuccin"], [data-palette="dracula"], [data-palette="gruvbox"], [data-palette="rose-pine"], [data-palette="kanagawa"]{ --hl-yellow:#5c4d17; --hl-green:#25451f; --hl-blue:#1d3a4d; --hl-pink:#4a2233; --hl-yellow-b:#c9a63a; --hl-green-b:#68a860; --hl-blue-b:#4e9ac9; --hl-pink-b:#c97fa2; color-scheme:dark; } /* ---------------- light ---------------- */ [data-palette="paper"]{ --bg:#fbfaf7; --panel:#f2efe9; --ink:#23201c; --soft:#6a635a; --line:#e0dad0; --accent:#c8553d; --accent-soft:#f6e5e0; } [data-palette="solarized-light"]{ --bg:#fdf6e3; --panel:#eee8d5; --ink:#073642; --soft:#657b83; --line:#e3dcc6; --accent:#268bd2; --accent-soft:#dbe9f2; } [data-palette="rose-pine-dawn"]{ --bg:#faf4ed; --panel:#fffaf3; --ink:#575279; --soft:#797593; --line:#dfdad9; --accent:#b4637a; --accent-soft:#f4e5e8; } [data-palette="gruvbox-light"]{ --bg:#fbf1c7; --panel:#f2e5bc; --ink:#3c3836; --soft:#7c6f64; --line:#e5d9ac; --accent:#af3a03; --accent-soft:#f7e0cd; } [data-palette="one-light"]{ --bg:#fafafa; --panel:#f0f0f1; --ink:#383a42; --soft:#8b8c92; --line:#e3e3e5; --accent:#4078f2; --accent-soft:#e2ebfe; } /* ---------------- dark ---------------- */ [data-palette="nord"]{ --bg:#2e3440; --panel:#3b4252; --ink:#eceff4; --soft:#a9b4c6; --line:#434c5e; --accent:#88c0d0; --accent-soft:#3c4a55; } [data-palette="tokyo-night"]{ --bg:#1a1b26; --panel:#24283b; --ink:#c0caf5; --soft:#9aa5ce; --line:#2f334d; --accent:#7aa2f7; --accent-soft:#2a3355; } [data-palette="catppuccin"]{ --bg:#1e1e2e; --panel:#181825; --ink:#cdd6f4; --soft:#a6adc8; --line:#313244; --accent:#cba6f7; --accent-soft:#332e46; } [data-palette="dracula"]{ --bg:#282a36; --panel:#21222c; --ink:#f8f8f2; --soft:#9aa5cc; --line:#44475a; --accent:#ff79c6; --accent-soft:#452e40; } [data-palette="gruvbox"]{ --bg:#282828; --panel:#32302f; --ink:#ebdbb2; --soft:#a89984; --line:#3c3836; --accent:#fe8019; --accent-soft:#432f1d; } [data-palette="rose-pine"]{ --bg:#191724; --panel:#1f1d2e; --ink:#e0def4; --soft:#908caa; --line:#26233a; --accent:#ebbcba; --accent-soft:#3b2f38; } [data-palette="kanagawa"]{ --bg:#1f1f28; --panel:#2a2a37; --ink:#dcd7ba; --soft:#9a9682; --line:#363646; --accent:#7e9cd8; --accent-soft:#2d3450; } /* ---------------- picker UI ---------------- */ .theme-btn{position:fixed;top:16px;right:22px;z-index:78;width:40px;height:40px; border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink); cursor:pointer;font-size:16px;line-height:1;box-shadow:0 3px 12px rgba(0,0,0,.12)} .theme-btn:hover{border-color:var(--accent);color:var(--accent)} .theme-pop{position:fixed;top:64px;right:22px;z-index:79;width:288px;padding:14px; display:none;background:var(--panel);border:1px solid var(--line);border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.28);font-family:var(--sans)} .theme-pop.show{display:block} .theme-pop h4{margin:0 0 9px;font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--soft);font-weight:600} .theme-pop h4+h4{margin-top:16px} .theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .theme-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px; border:1px solid transparent;background:var(--bg);color:var(--ink);cursor:pointer; font-family:var(--sans);font-size:12.5px;text-align:left} .theme-opt:hover{border-color:var(--accent)} .theme-opt[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600} .theme-opt .chip{flex:none;width:17px;height:17px;border-radius:5px; border:1px solid rgba(128,128,128,.35);position:relative;overflow:hidden} .theme-opt .chip i{position:absolute;right:0;top:0;bottom:0;width:45%;display:block} @media(max-width:980px){ .theme-btn{top:14px;right:14px;width:36px;height:36px} .theme-pop{right:10px;left:10px;width:auto;top:58px} }