/** * themes.css — Accent Color Palettes * ═══════════════════════════════════════════════════════════════ * Each theme overrides accent vars on html[data-accent="X"]. * Default (amber) lives in colors.css :root — no override needed. * Switched at runtime by theme-toggle button via main.js. * ═══════════════════════════════════════════════════════════════ */ /* ── Amber (default) ─────────────────────────────────────────── */ /* Defined in colors.css :root — this block just makes it explicit */ html[data-accent="amber"] { --mb-accent: #F59E0B; --mb-accent-bright: #FBBF24; --mb-accent-dark: #D97706; --mb-accent-dim: #B47409; --mb-accent-bg: #F59E0B1A; --mb-accent-bg-sel: #F59E0B33; --mb-border-accent: #F59E0B55; } /* ── Tokyo Night ─────────────────────────────────────────────── */ /* Full palette from tokyonight.nvim / VS Code Tokyo Night */ html[data-accent="tokyo"] { /* Backgrounds — deep blue-navy */ --mb-bg: #1a1b26; --mb-surface-1: #24283b; --mb-surface-2: #2f3549; --mb-surface-3: #3b4261; /* Borders */ --mb-border: #3b4261; --mb-border-focus: #7aa2f7; --mb-border-accent: #7aa2f755; /* Text — lavender hierarchy (fixed: muted was too dark before) */ --mb-text-bright: #c0caf5; /* H1 — soft lavender white */ --mb-text: #a9b1d6; /* body / H2 */ --mb-text-muted: #9aa5ce; /* H3 / labels — readable */ --mb-text-faint: #565f89; /* H4 / placeholders */ --mb-text-disabled: #2a2f44; /* Accent — Tokyo blue + purple bold */ --mb-accent: #7aa2f7; /* links, icons */ --mb-accent-bright: #bb9af7; /* bold text — Tokyo purple */ --mb-accent-dark: #5d7ec9; /* tags, pressed */ --mb-accent-dim: #4a6ba3; /* visited links */ --mb-accent-bg: #7aa2f71a; --mb-accent-bg-sel: #7aa2f733; /* Semantic — Tokyo Night palette colors */ --mb-green: #9ece6a; /* GUIDES badge, success */ --mb-green-bright: #b9f27c; --mb-green-bg: #9ece6a18; --mb-red: #f7768e; /* errors, delete */ --mb-red-bright: #ff9199; --mb-red-bg: #f7768e18; --mb-blue: #7dcfff; /* info, directives */ --mb-blue-bright: #a9e0ff; --mb-blue-bg: #7dcfff18; --mb-warning: #e0af68; /* warnings */ --mb-warning-bg: #e0af6818; --mb-info: #e0af68; --mb-info-bg: #e0af6830; /* Scrollbar */ --mb-scrollbar: #3b4261; --mb-scrollbar-hover: #7aa2f7; /* Subtle depth — Tokyo Night uses soft glows not hard shadows */ --mb-shadow-sm: 0 1px 6px rgba(122, 162, 247, 0.07); --mb-shadow: 0 4px 20px rgba(122, 162, 247, 0.10); --mb-shadow-lg: 0 8px 32px rgba(122, 162, 247, 0.13); --mb-glow-hover: 0 0 16px rgba(122, 162, 247, 0.15); } /* Tokyo Night — element-level depth & glow ─────────────────── */ /* These selectors only fire when Tokyo Night is active */ html[data-accent="tokyo"] .post-card { box-shadow: var(--mb-shadow-sm); transition: background 0.15s, box-shadow 0.15s; } html[data-accent="tokyo"] .post-card:hover { box-shadow: var(--mb-glow-hover); } html[data-accent="tokyo"] .search-form { box-shadow: var(--mb-shadow-sm); transition: border-color 0.15s, box-shadow 0.15s; } html[data-accent="tokyo"] .search-form:focus-within { box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.18), var(--mb-shadow); } html[data-accent="tokyo"] .browse-card, html[data-accent="tokyo"] .quick-nav-item { box-shadow: var(--mb-shadow-sm); transition: background 0.15s, box-shadow 0.15s; } html[data-accent="tokyo"] .browse-card:hover, html[data-accent="tokyo"] .quick-nav-item:hover { box-shadow: var(--mb-glow-hover); } /* ── Ayu Mirage ──────────────────────────────────────────────── */ /* Full palette from Ayu Mirage theme */ html[data-accent="ayu"] { /* Backgrounds — dark slate-blue */ --mb-bg: #1f2430; --mb-surface-1: #242936; --mb-surface-2: #2d3348; --mb-surface-3: #343d4f; /* Borders */ --mb-border: #3d4a5c; --mb-border-focus: #ffcc66; --mb-border-accent: #FFCC6655; /* Text — warm sandy hierarchy */ --mb-text-bright: #cccac2; /* H1 — warm off-white */ --mb-text: #b8b5ac; /* body / H2 */ --mb-text-muted: #707a8c; /* H3 / labels */ --mb-text-faint: #4d5566; /* H4 / placeholders */ --mb-text-disabled: #2e3547; /* Accent — Ayu gold */ --mb-accent: #ffcc66; /* links, icons */ --mb-accent-bright: #ffd580; /* bold text — bright gold */ --mb-accent-dark: #e6b440; /* tags, pressed */ --mb-accent-dim: #c99a2e; /* visited links */ --mb-accent-bg: #ffcc661a; --mb-accent-bg-sel: #ffcc6633; } /* ── Forest (colorhunt #1b211a → #8bae66 → #ebd5ab) ─────────────── */ html[data-accent="forest"] { /* Backgrounds — very dark forest green */ --mb-bg: #1b211a; --mb-surface-1: #22291f; --mb-surface-2: #293027; --mb-surface-3: #31392e; /* Borders */ --mb-border: #3a4535; --mb-border-focus: #8bae66; --mb-border-accent: #8bae6655; /* Text — warm earthy hierarchy */ --mb-text-bright: #ebd5ab; /* H1 — warm sandy tan */ --mb-text: #cbb98a; /* body / H2 */ --mb-text-muted: #9aa580; /* H3 / labels */ --mb-text-faint: #607055; /* H4 / placeholders */ --mb-text-disabled: #2e3a2a; /* Accent — forest green */ --mb-accent: #8bae66; /* links, icons */ --mb-accent-bright: #9ecc76; /* bold text — bright leaf */ --mb-accent-dark: #628141; /* tags, pressed */ --mb-accent-dim: #4a6230; /* visited links */ --mb-accent-bg: #8bae661a; --mb-accent-bg-sel: #8bae6633; /* Semantic */ --mb-green: #8bae66; --mb-green-bright: #9ecc76; --mb-green-bg: #8bae6618; --mb-red: #c0603a; --mb-red-bright: #d97050; --mb-red-bg: #c0603a18; --mb-blue: #5d9fb5; --mb-blue-bright: #7abdd0; --mb-blue-bg: #5d9fb518; --mb-warning: #c9a84c; --mb-warning-bg: #c9a84c18; --mb-info: #ebd5ab; --mb-info-bg: #ebd5ab20; /* Scrollbar */ --mb-scrollbar: #3a4535; --mb-scrollbar-hover: #8bae66; } /* ── Gruvbox Dark Hard ─────────────────────────────────────── */ /* Faithful port of gruvbox-dark-hard by morhetz */ html[data-accent="gruvbox"] { /* Backgrounds */ --mb-bg: #1d2021; --mb-surface-1: #282828; --mb-surface-2: #3c3836; --mb-surface-3: #504945; /* Borders */ --mb-border: #3c3836; --mb-border-focus: #fe8019; --mb-border-accent: #fe801955; /* Text — warm parchment hierarchy */ --mb-text-bright: #ebdbb2; /* H1 — classic Gruvbox fg */ --mb-text: #d5c4a1; /* body / H2 */ --mb-text-muted: #bdae93; /* H3 / labels */ --mb-text-faint: #928374; /* H4 / placeholders */ --mb-text-disabled: #32302f; /* Accent — Gruvbox orange */ --mb-accent: #fe8019; /* links, icons */ --mb-accent-bright: #ffa347; /* bold text */ --mb-accent-dark: #d65d0e; /* tags, pressed */ --mb-accent-dim: #af3a03; /* visited links */ --mb-accent-bg: #fe80191a; --mb-accent-bg-sel: #fe801933; /* Semantic — Gruvbox palette */ --mb-green: #b8bb26; --mb-green-bright: #d3d644; --mb-green-bg: #b8bb2618; --mb-red: #fb4934; --mb-red-bright: #ff6347; --mb-red-bg: #fb493418; --mb-blue: #83a598; --mb-blue-bright: #a3c5be; --mb-blue-bg: #83a59818; --mb-warning: #fabd2f; --mb-warning-bg: #fabd2f18; --mb-info: #d3869b; --mb-info-bg: #d3869b20; /* Scrollbar */ --mb-scrollbar: #504945; --mb-scrollbar-hover: #fe8019; } /* ── Gray Matter Light ─────────────────────────────────────── */ /* Minimalist warm-paper light theme inspired by philipbe */ html[data-accent="graymatter"] { /* Backgrounds — warm cream paper, lighter towards white */ --mb-bg: #faf9f6; --mb-surface-1: #f0ede6; --mb-surface-2: #e4e0d8; --mb-surface-3: #d6d2c9; /* Borders */ --mb-border: #c5c1b8; --mb-border-focus: #5b6ec2; --mb-border-accent: #5b6ec255; /* Text — near-black on warm paper */ --mb-text-bright: #1a1a1a; /* H1 — near black */ --mb-text: #2c2c2c; /* body / H2 */ --mb-text-muted: #5a5a5a; /* H3 / labels */ --mb-text-faint: #909090; /* H4 / placeholders */ --mb-text-disabled: #c0bdb5; /* Accent — slate blue (minimal, paper-like) */ --mb-accent: #5b6ec2; /* links, icons */ --mb-accent-bright: #7282d4; /* bold text — brighter blue */ --mb-accent-dark: #4456b0; /* tags, pressed */ --mb-accent-dim: #3344a0; /* visited links */ --mb-accent-bg: #5b6ec218; --mb-accent-bg-sel: #5b6ec230; /* Semantic — muted for light bg */ --mb-green: #3a7d44; --mb-green-bright: #2d6e37; --mb-green-bg: #3a7d4415; --mb-red: #c0392b; --mb-red-bright: #a93226; --mb-red-bg: #c0392b15; --mb-blue: #2980b9; --mb-blue-bright: #1f6fa0; --mb-blue-bg: #2980b915; --mb-warning: #d35400; --mb-warning-bg: #d3540015; --mb-info: #5b6ec2; --mb-info-bg: #5b6ec218; /* Scrollbar */ --mb-scrollbar: #c5c1b8; --mb-scrollbar-hover: #5b6ec2; /* Pico overrides — force light mode vars */ --pico-background-color: var(--mb-bg); --pico-card-background-color: var(--mb-surface-1); --pico-color: var(--mb-text); --pico-muted-color: var(--mb-text-muted); --pico-border-color: var(--mb-border); --pico-form-element-background-color: var(--mb-surface-2); --pico-form-element-border-color: var(--mb-border); --pico-form-element-color: var(--mb-text); --pico-form-element-placeholder-color: var(--mb-text-faint); --pico-dropdown-background-color: var(--mb-surface-2); --pico-dropdown-color: var(--mb-text); --pico-dropdown-hover-background-color: var(--mb-surface-3); --pico-code-background-color: var(--mb-surface-1); --pico-code-color: var(--mb-accent-dark); --pico-table-border-color: var(--mb-border); --pico-table-row-stripped-background-color: var(--mb-surface-1); --pico-modal-overlay-background-color: rgba(0,0,0,0.35); } /* Gray Matter — code block overrides for light background ────── */ /* The main chroma rules use hardcoded dark hex values; scope */ /* them here so they're readable on the warm-cream background. */ /* Code block / inline code background & base text */ html[data-accent="graymatter"] pre, html[data-accent="graymatter"] .chroma { background: var(--mb-surface-1) !important; color: var(--mb-text) !important; } html[data-accent="graymatter"] pre code { color: var(--mb-text) !important; } html[data-accent="graymatter"] code:not(pre > code) { background: var(--mb-surface-2); color: var(--mb-accent-dark); border-color: var(--mb-border); } /* SVG diagrams: darker bg so white connection lines are visible */ html[data-accent="graymatter"] .post-content img[src$=".svg"], html[data-accent="graymatter"] .post-content object[type="image/svg+xml"] { background: #2e2c2a; border-radius: 6px; padding: 0.75rem; } /* Keywords — indigo/purple */ html[data-accent="graymatter"] .chroma .k, html[data-accent="graymatter"] .chroma .kc, html[data-accent="graymatter"] .chroma .kd, html[data-accent="graymatter"] .chroma .kn, html[data-accent="graymatter"] .chroma .kp, html[data-accent="graymatter"] .chroma .kr, html[data-accent="graymatter"] .chroma .kt { color: #5a4fcf; } /* Strings — forest green */ html[data-accent="graymatter"] .chroma .s, html[data-accent="graymatter"] .chroma .sa, html[data-accent="graymatter"] .chroma .sb, html[data-accent="graymatter"] .chroma .sc, html[data-accent="graymatter"] .chroma .dl, html[data-accent="graymatter"] .chroma .sd, html[data-accent="graymatter"] .chroma .s2, html[data-accent="graymatter"] .chroma .se, html[data-accent="graymatter"] .chroma .sh, html[data-accent="graymatter"] .chroma .si, html[data-accent="graymatter"] .chroma .sx, html[data-accent="graymatter"] .chroma .sr, html[data-accent="graymatter"] .chroma .s1, html[data-accent="graymatter"] .chroma .ss { color: #2e7d51; } /* Numbers — warm brown */ html[data-accent="graymatter"] .chroma .m, html[data-accent="graymatter"] .chroma .mb, html[data-accent="graymatter"] .chroma .mf, html[data-accent="graymatter"] .chroma .mh, html[data-accent="graymatter"] .chroma .mi, html[data-accent="graymatter"] .chroma .il, html[data-accent="graymatter"] .chroma .mo { color: #a05c00; } /* Functions — slate blue (accent) */ html[data-accent="graymatter"] .chroma .nf, html[data-accent="graymatter"] .chroma .fm { color: #4456b0; } /* Types — darker blue */ html[data-accent="graymatter"] .chroma .nc, html[data-accent="graymatter"] .chroma .nn { color: #3344a0; } /* Variables — near-black */ html[data-accent="graymatter"] .chroma .n, html[data-accent="graymatter"] .chroma .nb, html[data-accent="graymatter"] .chroma .bp { color: #2c2c2c; } /* Operators — mid gray */ html[data-accent="graymatter"] .chroma .o, html[data-accent="graymatter"] .chroma .ow { color: #5a5a5a; } /* Comments — muted gray italic */ html[data-accent="graymatter"] .chroma .c, html[data-accent="graymatter"] .chroma .ch, html[data-accent="graymatter"] .chroma .cm, html[data-accent="graymatter"] .chroma .c1, html[data-accent="graymatter"] .chroma .cs, html[data-accent="graymatter"] .chroma .cp, html[data-accent="graymatter"] .chroma .cpf { color: #909090; font-style: italic; } /* Tags (HTML/XML) — green */ html[data-accent="graymatter"] .chroma .nt { color: #2e7d51; } /* Attributes — warm brown italic */ html[data-accent="graymatter"] .chroma .na { color: #a05c00; font-style: italic; } /* Punctuation — mid gray */ html[data-accent="graymatter"] .chroma .p, html[data-accent="graymatter"] .chroma .pi { color: #5a5a5a; } /* Preprocessor — teal */ html[data-accent="graymatter"] .chroma .cp, html[data-accent="graymatter"] .chroma .bp { color: #2980b9; } /* Error */ html[data-accent="graymatter"] .chroma .err { color: #c0392b; } /* ══════════════════════════════════════════════════════════════ */ /* ── Solarized Light ─────────────────────────────────────────── */ /* Classic warm cream theme by Ethan Schoonover */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="solarized"] { color-scheme: light; /* Backgrounds — warm cream */ --mb-bg: #fdf6e3; --mb-surface-1: #eee8d5; --mb-surface-2: #e5dfc9; --mb-surface-3: #dbd5be; /* Borders */ --mb-border: #cec9b2; --mb-border-focus: #2aa198; --mb-border-accent: #2aa19844; /* Text — Solarized content hierarchy */ --mb-text-bright: #586e75; /* base01 — emphasized */ --mb-text: #657b83; /* base00 — body */ --mb-text-muted: #839496; /* base0 — secondary */ --mb-text-faint: #93a1a1; /* base1 — faint */ --mb-text-disabled: #c9c5ad; /* Accent — Solarized cyan */ --mb-accent: #2aa198; --mb-accent-bright: #35bab2; --mb-accent-dark: #1a8077; --mb-accent-dim: #0f6060; --mb-accent-bg: #2aa1981a; --mb-accent-bg-sel: #2aa19830; /* Semantic */ --mb-green: #859900; --mb-green-bright: #9aad00; --mb-green-bg: #85990015; --mb-red: #dc322f; --mb-red-bright: #e04545; --mb-red-bg: #dc322f15; --mb-blue: #268bd2; --mb-blue-bright: #3899e0; --mb-blue-bg: #268bd215; --mb-warning: #cb4b16; --mb-warning-bg: #cb4b1615; --mb-info: #6c71c4; --mb-info-bg: #6c71c420; /* Scrollbar */ --mb-scrollbar: #cec9b2; --mb-scrollbar-hover: #2aa198; /* Pico overrides — force light mode */ --pico-background-color: var(--mb-bg); --pico-card-background-color: var(--mb-surface-1); --pico-color: var(--mb-text); --pico-muted-color: var(--mb-text-muted); --pico-border-color: var(--mb-border); --pico-form-element-background-color: var(--mb-surface-2); --pico-form-element-border-color: var(--mb-border); --pico-form-element-color: var(--mb-text); --pico-form-element-placeholder-color: var(--mb-text-faint); --pico-dropdown-background-color: var(--mb-surface-2); --pico-dropdown-color: var(--mb-text); --pico-dropdown-hover-background-color: var(--mb-surface-3); --pico-code-background-color: var(--mb-surface-1); --pico-code-color: #cb4b16; --pico-table-border-color: var(--mb-border); --pico-table-row-stripped-background-color: var(--mb-surface-1); --pico-modal-overlay-background-color: rgba(0,0,0,0.35); } /* Solarized — code block overrides ──────────────────────────── */ html[data-accent="solarized"] pre, html[data-accent="solarized"] .chroma { background: var(--mb-surface-1) !important; color: var(--mb-text) !important; } html[data-accent="solarized"] pre code { color: var(--mb-text) !important; } html[data-accent="solarized"] code:not(pre > code) { background: var(--mb-surface-2); color: #cb4b16; border-color: var(--mb-border); } /* Keywords — solarized green */ html[data-accent="solarized"] .chroma .k, html[data-accent="solarized"] .chroma .kc, html[data-accent="solarized"] .chroma .kd, html[data-accent="solarized"] .chroma .kn, html[data-accent="solarized"] .chroma .kp, html[data-accent="solarized"] .chroma .kr, html[data-accent="solarized"] .chroma .kt { color: #859900; } /* Strings — cyan */ html[data-accent="solarized"] .chroma .s, html[data-accent="solarized"] .chroma .sa, html[data-accent="solarized"] .chroma .sb, html[data-accent="solarized"] .chroma .sc, html[data-accent="solarized"] .chroma .dl, html[data-accent="solarized"] .chroma .s2, html[data-accent="solarized"] .chroma .se, html[data-accent="solarized"] .chroma .s1, html[data-accent="solarized"] .chroma .ss { color: #2aa198; } /* Numbers — blue */ html[data-accent="solarized"] .chroma .m, html[data-accent="solarized"] .chroma .mb, html[data-accent="solarized"] .chroma .mf, html[data-accent="solarized"] .chroma .mh, html[data-accent="solarized"] .chroma .mi, html[data-accent="solarized"] .chroma .il, html[data-accent="solarized"] .chroma .mo { color: #268bd2; } /* Functions — blue */ html[data-accent="solarized"] .chroma .nf, html[data-accent="solarized"] .chroma .fm { color: #268bd2; } /* Types — yellow */ html[data-accent="solarized"] .chroma .nc, html[data-accent="solarized"] .chroma .nn { color: #b58900; } /* Variables */ html[data-accent="solarized"] .chroma .n, html[data-accent="solarized"] .chroma .nb, html[data-accent="solarized"] .chroma .bp { color: #586e75; } /* Operators */ html[data-accent="solarized"] .chroma .o, html[data-accent="solarized"] .chroma .ow { color: #839496; } /* Comments — italic faint */ html[data-accent="solarized"] .chroma .c, html[data-accent="solarized"] .chroma .ch, html[data-accent="solarized"] .chroma .cm, html[data-accent="solarized"] .chroma .c1, html[data-accent="solarized"] .chroma .cs, html[data-accent="solarized"] .chroma .cp, html[data-accent="solarized"] .chroma .cpf { color: #93a1a1; font-style: italic; } /* Tags */ html[data-accent="solarized"] .chroma .nt { color: #268bd2; } /* Attributes */ html[data-accent="solarized"] .chroma .na { color: #b58900; font-style: italic; } /* Punctuation */ html[data-accent="solarized"] .chroma .p, html[data-accent="solarized"] .chroma .pi { color: #839496; } /* Error */ html[data-accent="solarized"] .chroma .err { color: #dc322f; } /* ══════════════════════════════════════════════════════════════ */ /* ── Rose Piné Dawn ─────────────────────────────────────────── */ /* Rosy warm parchment — deeper tint reduces eye strain */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="rosepine"] { color-scheme: light; /* Backgrounds — deep warm amber-parchment (less glaring than near-white) */ --mb-bg: #f0e4d4; /* deeper warm parchment */ --mb-surface-1: #e8d9c6; /* cards, sidebars */ --mb-surface-2: #decca; /* inputs, code bg */ --mb-surface-3: #d0beb0; /* hover states */ /* Borders */ --mb-border: #c4b5a8; --mb-border-focus: #b4637a; --mb-border-accent: #b4637a44; /* Text — darkened for better contrast on amber bg */ --mb-text-bright: #2c2a44; /* near-dark mauve — high contrast */ --mb-text: #3c3a5a; /* body */ --mb-text-muted: #6a6686; /* secondary labels */ --mb-text-faint: #908caa; /* placeholders */ --mb-text-disabled: #c8bfb8; /* Accent — rose */ --mb-accent: #d7827a; --mb-accent-bright: #e89691; --mb-accent-dark: #b46a64; --mb-accent-dim: #9a504a; --mb-accent-bg: #d7827a1a; --mb-accent-bg-sel: #d7827a30; /* Semantic — Rose Piné palette */ --mb-green: #56949f; /* foam */ --mb-green-bright: #6aadb8; --mb-green-bg: #56949f15; --mb-red: #b4637a; /* love */ --mb-red-bright: #c87e94; --mb-red-bg: #b4637a15; --mb-blue: #286983; /* pine */ --mb-blue-bright: #357d9b; --mb-blue-bg: #28698315; --mb-warning: #ea9d34; /* gold */ --mb-warning-bg: #ea9d3415; --mb-info: #907aa9; /* iris */ --mb-info-bg: #907aa920; /* Scrollbar */ --mb-scrollbar: #dfdad9; --mb-scrollbar-hover: #d7827a; /* Pico overrides */ --pico-background-color: var(--mb-bg); --pico-card-background-color: var(--mb-surface-1); --pico-color: var(--mb-text); --pico-muted-color: var(--mb-text-muted); --pico-border-color: var(--mb-border); --pico-form-element-background-color: var(--mb-surface-2); --pico-form-element-border-color: var(--mb-border); --pico-form-element-color: var(--mb-text); --pico-form-element-placeholder-color: var(--mb-text-faint); --pico-dropdown-background-color: var(--mb-surface-2); --pico-dropdown-color: var(--mb-text); --pico-dropdown-hover-background-color: var(--mb-surface-3); --pico-code-background-color: var(--mb-surface-2); --pico-code-color: #b4637a; --pico-table-border-color: var(--mb-border); --pico-table-row-stripped-background-color: var(--mb-surface-1); --pico-modal-overlay-background-color: rgba(0,0,0,0.35); } /* Rose Piné Dawn — code block overrides ─────────────────────── */ html[data-accent="rosepine"] pre, html[data-accent="rosepine"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="rosepine"] pre code { color: var(--mb-text) !important; } html[data-accent="rosepine"] code:not(pre > code) { background: var(--mb-surface-2); color: #b4637a; border-color: var(--mb-border); } /* Keywords — pine */ html[data-accent="rosepine"] .chroma .k, html[data-accent="rosepine"] .chroma .kc, html[data-accent="rosepine"] .chroma .kd, html[data-accent="rosepine"] .chroma .kn, html[data-accent="rosepine"] .chroma .kp, html[data-accent="rosepine"] .chroma .kr, html[data-accent="rosepine"] .chroma .kt { color: #286983; } /* Strings — foam */ html[data-accent="rosepine"] .chroma .s, html[data-accent="rosepine"] .chroma .sa, html[data-accent="rosepine"] .chroma .sb, html[data-accent="rosepine"] .chroma .sc, html[data-accent="rosepine"] .chroma .dl, html[data-accent="rosepine"] .chroma .s2, html[data-accent="rosepine"] .chroma .se, html[data-accent="rosepine"] .chroma .s1, html[data-accent="rosepine"] .chroma .ss { color: #56949f; } /* Numbers — gold */ html[data-accent="rosepine"] .chroma .m, html[data-accent="rosepine"] .chroma .mb, html[data-accent="rosepine"] .chroma .mf, html[data-accent="rosepine"] .chroma .mh, html[data-accent="rosepine"] .chroma .mi, html[data-accent="rosepine"] .chroma .il, html[data-accent="rosepine"] .chroma .mo { color: #ea9d34; } /* Functions — iris */ html[data-accent="rosepine"] .chroma .nf, html[data-accent="rosepine"] .chroma .fm { color: #907aa9; } /* Types — love */ html[data-accent="rosepine"] .chroma .nc, html[data-accent="rosepine"] .chroma .nn { color: #b4637a; } /* Variables */ html[data-accent="rosepine"] .chroma .n, html[data-accent="rosepine"] .chroma .nb, html[data-accent="rosepine"] .chroma .bp { color: #575279; } /* Operators */ html[data-accent="rosepine"] .chroma .o, html[data-accent="rosepine"] .chroma .ow { color: #797593; } /* Comments */ html[data-accent="rosepine"] .chroma .c, html[data-accent="rosepine"] .chroma .ch, html[data-accent="rosepine"] .chroma .cm, html[data-accent="rosepine"] .chroma .c1, html[data-accent="rosepine"] .chroma .cs, html[data-accent="rosepine"] .chroma .cp, html[data-accent="rosepine"] .chroma .cpf { color: #9893a5; font-style: italic; } /* Tags */ html[data-accent="rosepine"] .chroma .nt { color: #286983; } /* Attributes */ html[data-accent="rosepine"] .chroma .na { color: #ea9d34; font-style: italic; } /* Punctuation */ html[data-accent="rosepine"] .chroma .p, html[data-accent="rosepine"] .chroma .pi { color: #797593; } /* Error */ html[data-accent="rosepine"] .chroma .err { color: #b4637a; } /* ══════════════════════════════════════════════════════════════ */ /* ── Rose Piné (Dark) ───────────────────────────────────────── */ /* Deep plum dark theme — the original Rose Piné main palette */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="rosepinedark"] { /* Backgrounds — deep plum */ --mb-bg: #191724; --mb-surface-1: #1f1d2e; --mb-surface-2: #26233a; --mb-surface-3: #312840; /* Borders */ --mb-border: #403d52; --mb-border-focus: #c4a7e7; --mb-border-accent: #c4a7e744; /* Text */ --mb-text-bright: #e0def4; /* text */ --mb-text: #d4d0ed; /* body */ --mb-text-muted: #908caa; /* subtle */ --mb-text-faint: #6e6a86; /* muted */ --mb-text-disabled: #2a2737; /* Accent — iris (purple) */ --mb-accent: #c4a7e7; --mb-accent-bright: #d9c2f8; --mb-accent-dark: #9e7dd4; --mb-accent-dim: #7a5cb0; --mb-accent-bg: #c4a7e71a; --mb-accent-bg-sel: #c4a7e730; /* Semantic — Rose Piné dark palette */ --mb-green: #9ccfd8; /* foam */ --mb-green-bright: #b5e4ed; --mb-green-bg: #9ccfd818; --mb-red: #eb6f92; /* love */ --mb-red-bright: #f08aaa; --mb-red-bg: #eb6f9218; --mb-blue: #31748f; /* pine */ --mb-blue-bright: #4a8fa8; --mb-blue-bg: #31748f18; --mb-warning: #f6c177; /* gold */ --mb-warning-bg: #f6c17718; --mb-info: #ebbcba; /* rose */ --mb-info-bg: #ebbcba20; /* Scrollbar */ --mb-scrollbar: #403d52; --mb-scrollbar-hover: #c4a7e7; } /* Rose Piné Dark — code block overrides ──────────────────────── */ html[data-accent="rosepinedark"] pre, html[data-accent="rosepinedark"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="rosepinedark"] pre code { color: var(--mb-text) !important; } html[data-accent="rosepinedark"] code:not(pre > code) { background: var(--mb-surface-3); color: #eb6f92; border-color: var(--mb-border); } html[data-accent="rosepinedark"] .chroma .k, html[data-accent="rosepinedark"] .chroma .kc, html[data-accent="rosepinedark"] .chroma .kd, html[data-accent="rosepinedark"] .chroma .kn, html[data-accent="rosepinedark"] .chroma .kp, html[data-accent="rosepinedark"] .chroma .kr, html[data-accent="rosepinedark"] .chroma .kt { color: #31748f; } html[data-accent="rosepinedark"] .chroma .s, html[data-accent="rosepinedark"] .chroma .sa, html[data-accent="rosepinedark"] .chroma .sb, html[data-accent="rosepinedark"] .chroma .sc, html[data-accent="rosepinedark"] .chroma .dl, html[data-accent="rosepinedark"] .chroma .s2, html[data-accent="rosepinedark"] .chroma .se, html[data-accent="rosepinedark"] .chroma .s1, html[data-accent="rosepinedark"] .chroma .ss { color: #9ccfd8; } html[data-accent="rosepinedark"] .chroma .m, html[data-accent="rosepinedark"] .chroma .mb, html[data-accent="rosepinedark"] .chroma .mf, html[data-accent="rosepinedark"] .chroma .mh, html[data-accent="rosepinedark"] .chroma .mi, html[data-accent="rosepinedark"] .chroma .il, html[data-accent="rosepinedark"] .chroma .mo { color: #f6c177; } html[data-accent="rosepinedark"] .chroma .nf, html[data-accent="rosepinedark"] .chroma .fm { color: #c4a7e7; } html[data-accent="rosepinedark"] .chroma .nc, html[data-accent="rosepinedark"] .chroma .nn { color: #eb6f92; } html[data-accent="rosepinedark"] .chroma .n, html[data-accent="rosepinedark"] .chroma .nb, html[data-accent="rosepinedark"] .chroma .bp { color: #e0def4; } html[data-accent="rosepinedark"] .chroma .o, html[data-accent="rosepinedark"] .chroma .ow { color: #908caa; } html[data-accent="rosepinedark"] .chroma .c, html[data-accent="rosepinedark"] .chroma .ch, html[data-accent="rosepinedark"] .chroma .cm, html[data-accent="rosepinedark"] .chroma .c1, html[data-accent="rosepinedark"] .chroma .cs, html[data-accent="rosepinedark"] .chroma .cp, html[data-accent="rosepinedark"] .chroma .cpf { color: #6e6a86; font-style: italic; } html[data-accent="rosepinedark"] .chroma .nt { color: #31748f; } html[data-accent="rosepinedark"] .chroma .na { color: #f6c177; font-style: italic; } html[data-accent="rosepinedark"] .chroma .p, html[data-accent="rosepinedark"] .chroma .pi { color: #908caa; } html[data-accent="rosepinedark"] .chroma .err { color: #eb6f92; } /* ══════════════════════════════════════════════════════════════ */ /* ── Slate ──────────────────────────────────────────────────── */ /* Light blue-gray — #EAEFEF · #BFC9D1 · #25343F · #FF9B51 */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="slate"] { color-scheme: light; /* Backgrounds — very light blue-gray */ --mb-bg: #eaefef; --mb-surface-1: #dde5e8; --mb-surface-2: #bfc9d1; --mb-surface-3: #adb9c4; /* Borders */ --mb-border: #a4b2bc; --mb-border-focus: #ff9b51; --mb-border-accent: #ff9b5144; /* Text — dark navy on light gray */ --mb-text-bright: #25343f; /* palette dark navy */ --mb-text: #354756; /* body */ --mb-text-muted: #5e7280; /* secondary */ --mb-text-faint: #8da0ad; /* placeholders */ --mb-text-disabled: #c8d4d8; /* Accent — orange */ --mb-accent: #ff9b51; --mb-accent-bright: #ffb47a; --mb-accent-dark: #e07830; --mb-accent-dim: #bc5e18; --mb-accent-bg: #ff9b511a; --mb-accent-bg-sel: #ff9b5130; /* Semantic */ --mb-green: #3a8a6e; --mb-green-bright: #4eab88; --mb-green-bg: #3a8a6e15; --mb-red: #c8394a; --mb-red-bright: #e04d60; --mb-red-bg: #c8394a15; --mb-blue: #3a6a8e; --mb-blue-bright: #4e88b0; --mb-blue-bg: #3a6a8e15; --mb-warning: #d97a28; --mb-warning-bg: #d97a2815; --mb-info: #5a7a9e; --mb-info-bg: #5a7a9e20; /* Scrollbar */ --mb-scrollbar: #bfc9d1; --mb-scrollbar-hover: #ff9b51; /* Pico overrides — light mode */ --pico-background-color: var(--mb-bg); --pico-card-background-color: var(--mb-surface-1); --pico-color: var(--mb-text); --pico-muted-color: var(--mb-text-muted); --pico-border-color: var(--mb-border); --pico-form-element-background-color: var(--mb-surface-2); --pico-form-element-border-color: var(--mb-border); --pico-form-element-color: var(--mb-text); --pico-form-element-placeholder-color: var(--mb-text-faint); --pico-dropdown-background-color: var(--mb-surface-2); --pico-dropdown-color: var(--mb-text); --pico-dropdown-hover-background-color: var(--mb-surface-3); --pico-code-background-color: var(--mb-surface-1); --pico-code-color: #e07830; --pico-table-border-color: var(--mb-border); --pico-table-row-stripped-background-color: var(--mb-surface-1); --pico-modal-overlay-background-color: rgba(0,0,0,0.35); } /* Slate — code block overrides ──────────────────────────────── */ html[data-accent="slate"] pre, html[data-accent="slate"] .chroma { background: var(--mb-surface-1) !important; color: var(--mb-text) !important; } html[data-accent="slate"] pre code { color: var(--mb-text) !important; } html[data-accent="slate"] code:not(pre > code) { background: var(--mb-surface-2); color: #e07830; border-color: var(--mb-border); } html[data-accent="slate"] .chroma .k, html[data-accent="slate"] .chroma .kc, html[data-accent="slate"] .chroma .kd, html[data-accent="slate"] .chroma .kn, html[data-accent="slate"] .chroma .kp, html[data-accent="slate"] .chroma .kr, html[data-accent="slate"] .chroma .kt { color: #3a6a8e; } html[data-accent="slate"] .chroma .s, html[data-accent="slate"] .chroma .sa, html[data-accent="slate"] .chroma .sb, html[data-accent="slate"] .chroma .sc, html[data-accent="slate"] .chroma .dl, html[data-accent="slate"] .chroma .s2, html[data-accent="slate"] .chroma .se, html[data-accent="slate"] .chroma .s1, html[data-accent="slate"] .chroma .ss { color: #3a8a6e; } html[data-accent="slate"] .chroma .m, html[data-accent="slate"] .chroma .mb, html[data-accent="slate"] .chroma .mf, html[data-accent="slate"] .chroma .mh, html[data-accent="slate"] .chroma .mi, html[data-accent="slate"] .chroma .il, html[data-accent="slate"] .chroma .mo { color: #c8394a; } html[data-accent="slate"] .chroma .nf, html[data-accent="slate"] .chroma .fm { color: #e07830; } html[data-accent="slate"] .chroma .nc, html[data-accent="slate"] .chroma .nn { color: #bc5e18; } html[data-accent="slate"] .chroma .n, html[data-accent="slate"] .chroma .nb, html[data-accent="slate"] .chroma .bp { color: #25343f; } html[data-accent="slate"] .chroma .o, html[data-accent="slate"] .chroma .ow { color: #5e7280; } html[data-accent="slate"] .chroma .c, html[data-accent="slate"] .chroma .ch, html[data-accent="slate"] .chroma .cm, html[data-accent="slate"] .chroma .c1, html[data-accent="slate"] .chroma .cs, html[data-accent="slate"] .chroma .cp, html[data-accent="slate"] .chroma .cpf { color: #8da0ad; font-style: italic; } html[data-accent="slate"] .chroma .nt { color: #3a6a8e; } html[data-accent="slate"] .chroma .na { color: #d97a28; font-style: italic; } html[data-accent="slate"] .chroma .p, html[data-accent="slate"] .chroma .pi { color: #5e7280; } html[data-accent="slate"] .chroma .err { color: #c8394a; } /* ══════════════════════════════════════════════════════════════ */ /* ── Naval ─────────────────────────────────────────────────── */ /* Deep navy — #30364F · #ACBAC4 · #E1D9BC · #F0F0DB */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="naval"] { /* Backgrounds — deep navy */ --mb-bg: #252840; --mb-surface-1: #30364f; /* palette navy */ --mb-surface-2: #3a4060; --mb-surface-3: #444b6e; /* Borders */ --mb-border: #4a5278; --mb-border-focus: #acbac4; --mb-border-accent: #acbac444; /* Text — warm sand/cream on deep navy */ --mb-text-bright: #f0f0db; /* palette cream */ --mb-text: #e1d9bc; /* palette sand */ --mb-text-muted: #acbac4; /* palette blue-gray */ --mb-text-faint: #7080a0; --mb-text-disabled: #2e3558; /* Accent — warm sand-gold derived from palette */ --mb-accent: #e1d9bc; --mb-accent-bright: #f0f0db; --mb-accent-dark: #c8be9a; --mb-accent-dim: #a89e78; --mb-accent-bg: #e1d9bc18; --mb-accent-bg-sel: #e1d9bc28; /* Semantic */ --mb-green: #6ab8a0; --mb-green-bright: #82d4bc; --mb-green-bg: #6ab8a018; --mb-red: #d4607a; --mb-red-bright: #e87a94; --mb-red-bg: #d4607a18; --mb-blue: #7aa0cc; --mb-blue-bright: #98bce0; --mb-blue-bg: #7aa0cc18; --mb-warning: #d4a860; --mb-warning-bg: #d4a86018; --mb-info: #acbac4; --mb-info-bg: #acbac420; /* Scrollbar */ --mb-scrollbar: #4a5278; --mb-scrollbar-hover: #acbac4; } /* Naval — code block overrides ─────────────────────────────── */ html[data-accent="naval"] pre, html[data-accent="naval"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="naval"] pre code { color: var(--mb-text) !important; } html[data-accent="naval"] code:not(pre > code) { background: var(--mb-surface-2); color: #acbac4; border-color: var(--mb-border); } html[data-accent="naval"] .chroma .k, html[data-accent="naval"] .chroma .kc, html[data-accent="naval"] .chroma .kd, html[data-accent="naval"] .chroma .kn, html[data-accent="naval"] .chroma .kp, html[data-accent="naval"] .chroma .kr, html[data-accent="naval"] .chroma .kt { color: #7aa0cc; } html[data-accent="naval"] .chroma .s, html[data-accent="naval"] .chroma .sa, html[data-accent="naval"] .chroma .sb, html[data-accent="naval"] .chroma .sc, html[data-accent="naval"] .chroma .dl, html[data-accent="naval"] .chroma .s2, html[data-accent="naval"] .chroma .se, html[data-accent="naval"] .chroma .s1, html[data-accent="naval"] .chroma .ss { color: #6ab8a0; } html[data-accent="naval"] .chroma .m, html[data-accent="naval"] .chroma .mb, html[data-accent="naval"] .chroma .mf, html[data-accent="naval"] .chroma .mh, html[data-accent="naval"] .chroma .mi, html[data-accent="naval"] .chroma .il, html[data-accent="naval"] .chroma .mo { color: #d4a860; } html[data-accent="naval"] .chroma .nf, html[data-accent="naval"] .chroma .fm { color: #e1d9bc; } html[data-accent="naval"] .chroma .nc, html[data-accent="naval"] .chroma .nn { color: #f0f0db; } html[data-accent="naval"] .chroma .n, html[data-accent="naval"] .chroma .nb, html[data-accent="naval"] .chroma .bp { color: #e1d9bc; } html[data-accent="naval"] .chroma .o, html[data-accent="naval"] .chroma .ow { color: #acbac4; } html[data-accent="naval"] .chroma .c, html[data-accent="naval"] .chroma .ch, html[data-accent="naval"] .chroma .cm, html[data-accent="naval"] .chroma .c1, html[data-accent="naval"] .chroma .cs, html[data-accent="naval"] .chroma .cp, html[data-accent="naval"] .chroma .cpf { color: #7080a0; font-style: italic; } html[data-accent="naval"] .chroma .nt { color: #7aa0cc; } html[data-accent="naval"] .chroma .na { color: #d4a860; font-style: italic; } html[data-accent="naval"] .chroma .p, html[data-accent="naval"] .chroma .pi { color: #acbac4; } html[data-accent="naval"] .chroma .err { color: #d4607a; } /* ══════════════════════════════════════════════════════════════ */ /* ── Deep Blur Gold ─────────────────────────────────────────── */ /* Dark glass + warm gold editorial palette */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="deep-blur-gold"] { /* Backgrounds — near-black with blue steel depth */ --mb-bg: #06070a; --mb-surface-1: #0e1117; --mb-surface-2: #131822; --mb-surface-3: #1a2230; /* Borders */ --mb-border: #223047; --mb-border-focus: #5a7393; --mb-border-accent: #F2A94C44; /* Text — warm gold hierarchy */ --mb-text-bright: #f5d28b; /* H1 / hero heading */ --mb-text: #e9e1d1; /* body / main content */ --mb-text-muted: #c2b39a; /* subheads / supporting text */ --mb-text-faint: #8f7e63; /* meta / placeholders */ --mb-text-disabled: #4a4236; /* Accent — deep golden amber */ --mb-accent: #f2a94c; /* links, icons */ --mb-accent-bright: #ffd37a; /* hover / emphasis */ --mb-accent-dark: #d88a29; /* pressed / active */ --mb-accent-dim: #b97317; /* visited / subdued accent */ --mb-accent-bg: #f2a94c1a; --mb-accent-bg-sel: #f2a94c33; /* Semantic */ --mb-green: #2fa37c; --mb-green-bright: #58d4a4; --mb-green-bg: #2FA37C1F; --mb-red: #d95c5c; --mb-red-bright: #ff8a8a; --mb-red-bg: #D95C5C1F; --mb-blue: #5ba8f5; --mb-blue-bright: #8bc5ff; --mb-blue-bg: #5BA8F51F; --mb-warning: #e59a3a; --mb-warning-bg: #E59A3A1F; --mb-info: #e8c15a; --mb-info-bg: #E8C15A24; /* Scrollbar */ --mb-scrollbar: #223047; --mb-scrollbar-hover: #5a7393; } /* Deep Blur Gold — code block overrides ─────────────────────── */ html[data-accent="deep-blur-gold"] pre, html[data-accent="deep-blur-gold"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="deep-blur-gold"] pre code { color: var(--mb-text) !important; } html[data-accent="deep-blur-gold"] code:not(pre > code) { background: var(--mb-surface-3); color: #d88a29; border-color: var(--mb-border); } html[data-accent="deep-blur-gold"] .chroma .k, html[data-accent="deep-blur-gold"] .chroma .kc, html[data-accent="deep-blur-gold"] .chroma .kd, html[data-accent="deep-blur-gold"] .chroma .kn, html[data-accent="deep-blur-gold"] .chroma .kp, html[data-accent="deep-blur-gold"] .chroma .kr, html[data-accent="deep-blur-gold"] .chroma .kt { color: #5ba8f5; } html[data-accent="deep-blur-gold"] .chroma .s, html[data-accent="deep-blur-gold"] .chroma .sa, html[data-accent="deep-blur-gold"] .chroma .sb, html[data-accent="deep-blur-gold"] .chroma .sc, html[data-accent="deep-blur-gold"] .chroma .dl, html[data-accent="deep-blur-gold"] .chroma .s2, html[data-accent="deep-blur-gold"] .chroma .se, html[data-accent="deep-blur-gold"] .chroma .s1, html[data-accent="deep-blur-gold"] .chroma .ss { color: #2fa37c; } html[data-accent="deep-blur-gold"] .chroma .m, html[data-accent="deep-blur-gold"] .chroma .mb, html[data-accent="deep-blur-gold"] .chroma .mf, html[data-accent="deep-blur-gold"] .chroma .mh, html[data-accent="deep-blur-gold"] .chroma .mi, html[data-accent="deep-blur-gold"] .chroma .il, html[data-accent="deep-blur-gold"] .chroma .mo { color: #f2a94c; } html[data-accent="deep-blur-gold"] .chroma .nf, html[data-accent="deep-blur-gold"] .chroma .fm { color: #ffd37a; } html[data-accent="deep-blur-gold"] .chroma .nc, html[data-accent="deep-blur-gold"] .chroma .nn { color: #f5d28b; } html[data-accent="deep-blur-gold"] .chroma .n, html[data-accent="deep-blur-gold"] .chroma .nb, html[data-accent="deep-blur-gold"] .chroma .bp { color: #e9e1d1; } html[data-accent="deep-blur-gold"] .chroma .o, html[data-accent="deep-blur-gold"] .chroma .ow { color: #c2b39a; } html[data-accent="deep-blur-gold"] .chroma .c, html[data-accent="deep-blur-gold"] .chroma .ch, html[data-accent="deep-blur-gold"] .chroma .cm, html[data-accent="deep-blur-gold"] .chroma .c1, html[data-accent="deep-blur-gold"] .chroma .cs, html[data-accent="deep-blur-gold"] .chroma .cp, html[data-accent="deep-blur-gold"] .chroma .cpf { color: #8f7e63; font-style: italic; } html[data-accent="deep-blur-gold"] .chroma .nt { color: #5ba8f5; } html[data-accent="deep-blur-gold"] .chroma .na { color: #e59a3a; font-style: italic; } html[data-accent="deep-blur-gold"] .chroma .p, html[data-accent="deep-blur-gold"] .chroma .pi { color: #c2b39a; } html[data-accent="deep-blur-gold"] .chroma .err { color: #d95c5c; } /* ── (archived) Catppuccin Latte — kept for reference, not in rotation ── */ html[data-accent="latte"] { color-scheme: light; /* Backgrounds — warm off-white */ --mb-bg: #eff1f5; --mb-surface-1: #e6e9ef; --mb-surface-2: #dce0e8; --mb-surface-3: #ccd0da; /* Borders */ --mb-border: #bcc0cc; --mb-border-focus: #fe640b; --mb-border-accent: #fe640b44; /* Text — near-black lavender */ --mb-text-bright: #4c4f69; /* text */ --mb-text: #4c4f69; --mb-text-muted: #6c6f85; /* subtext1 */ --mb-text-faint: #8c8fa1; /* overlay2 */ --mb-text-disabled: #ccd0da; /* Accent — peach */ --mb-accent: #fe640b; --mb-accent-bright: #ff8040; --mb-accent-dark: #d45000; --mb-accent-dim: #b04000; --mb-accent-bg: #fe640b1a; --mb-accent-bg-sel: #fe640b30; /* Semantic — Catppuccin Latte palette */ --mb-green: #40a02b; --mb-green-bright: #5ab840; --mb-green-bg: #40a02b15; --mb-red: #d20f39; --mb-red-bright: #e8305a; --mb-red-bg: #d20f3915; --mb-blue: #1e66f5; --mb-blue-bright: #4480ff; --mb-blue-bg: #1e66f515; --mb-warning: #df8e1d; --mb-warning-bg: #df8e1d15; --mb-info: #7287fd; /* lavender */ --mb-info-bg: #7287fd20; /* Scrollbar */ --mb-scrollbar: #bcc0cc; --mb-scrollbar-hover: #fe640b; /* Pico overrides */ --pico-background-color: var(--mb-bg); --pico-card-background-color: var(--mb-surface-1); --pico-color: var(--mb-text); --pico-muted-color: var(--mb-text-muted); --pico-border-color: var(--mb-border); --pico-form-element-background-color: var(--mb-surface-2); --pico-form-element-border-color: var(--mb-border); --pico-form-element-color: var(--mb-text); --pico-form-element-placeholder-color: var(--mb-text-faint); --pico-dropdown-background-color: var(--mb-surface-2); --pico-dropdown-color: var(--mb-text); --pico-dropdown-hover-background-color: var(--mb-surface-3); --pico-code-background-color: var(--mb-surface-1); --pico-code-color: #fe640b; --pico-table-border-color: var(--mb-border); --pico-table-row-stripped-background-color: var(--mb-surface-1); --pico-modal-overlay-background-color: rgba(0,0,0,0.35); } /* Catppuccin Latte — code block overrides ───────────────────── */ html[data-accent="latte"] pre, html[data-accent="latte"] .chroma { background: var(--mb-surface-1) !important; color: var(--mb-text) !important; } html[data-accent="latte"] pre code { color: var(--mb-text) !important; } html[data-accent="latte"] code:not(pre > code) { background: var(--mb-surface-2); color: #fe640b; border-color: var(--mb-border); } /* Keywords — mauve */ html[data-accent="latte"] .chroma .k, html[data-accent="latte"] .chroma .kc, html[data-accent="latte"] .chroma .kd, html[data-accent="latte"] .chroma .kn, html[data-accent="latte"] .chroma .kp, html[data-accent="latte"] .chroma .kr, html[data-accent="latte"] .chroma .kt { color: #8839ef; } /* Strings — green */ html[data-accent="latte"] .chroma .s, html[data-accent="latte"] .chroma .sa, html[data-accent="latte"] .chroma .sb, html[data-accent="latte"] .chroma .sc, html[data-accent="latte"] .chroma .dl, html[data-accent="latte"] .chroma .s2, html[data-accent="latte"] .chroma .se, html[data-accent="latte"] .chroma .s1, html[data-accent="latte"] .chroma .ss { color: #40a02b; } /* Numbers — peach */ html[data-accent="latte"] .chroma .m, html[data-accent="latte"] .chroma .mb, html[data-accent="latte"] .chroma .mf, html[data-accent="latte"] .chroma .mh, html[data-accent="latte"] .chroma .mi, html[data-accent="latte"] .chroma .il, html[data-accent="latte"] .chroma .mo { color: #fe640b; } /* Functions — blue */ html[data-accent="latte"] .chroma .nf, html[data-accent="latte"] .chroma .fm { color: #1e66f5; } /* Types — yellow */ html[data-accent="latte"] .chroma .nc, html[data-accent="latte"] .chroma .nn { color: #df8e1d; } /* Variables */ html[data-accent="latte"] .chroma .n, html[data-accent="latte"] .chroma .nb, html[data-accent="latte"] .chroma .bp { color: #4c4f69; } /* Operators */ html[data-accent="latte"] .chroma .o, html[data-accent="latte"] .chroma .ow { color: #6c6f85; } /* Comments */ html[data-accent="latte"] .chroma .c, html[data-accent="latte"] .chroma .ch, html[data-accent="latte"] .chroma .cm, html[data-accent="latte"] .chroma .c1, html[data-accent="latte"] .chroma .cs, html[data-accent="latte"] .chroma .cp, html[data-accent="latte"] .chroma .cpf { color: #8c8fa1; font-style: italic; } /* Tags */ html[data-accent="latte"] .chroma .nt { color: #1e66f5; } /* Attributes */ html[data-accent="latte"] .chroma .na { color: #df8e1d; font-style: italic; } /* Punctuation */ html[data-accent="latte"] .chroma .p, html[data-accent="latte"] .chroma .pi { color: #6c6f85; } /* Error */ html[data-accent="latte"] .chroma .err { color: #d20f39; } /* ── Theme toggle button color indicator ───────────────────── */ /* The button shows a small dot in the current accent color */ #theme-toggle .theme-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--mb-accent); box-shadow: 0 0 4px var(--mb-accent); flex-shrink: 0; } /* ── Theme name tooltip on hover ─────────────────────────────── */ #theme-toggle { position: relative; } #theme-toggle::after { content: attr(data-theme-name); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--mb-surface-2); color: var(--mb-text); border: 1px solid var(--mb-border); padding: 0.18rem 0.55rem; border-radius: 4px; font-size: 0.68rem; font-family: "JetBrains Mono", monospace; white-space: nowrap; letter-spacing: 0.03em; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 100; } #theme-toggle:hover::after, #theme-toggle.show-label::after { opacity: 1; } /* ══════════════════════════════════════════════════════════════════════════ */ /* ── NEW THEMES (added 2026-03-07) */ /* */ /* To remove a theme, delete everything from its opening ══ banner */ /* down to (and including) its last `.chroma .err { … }` line plus the */ /* blank line that follows it. */ /* */ /* 1. mocha — Catppuccin Mocha (dark, pastel) */ /* 2. dracula — Dracula (dark, vivid) */ /* 3. nord — Nord (dark, arctic minimal) */ /* 4. onedark — One Dark Pro (dark, Atom classic) */ /* 5. github-light — GitHub Light (light, clean professional) */ /* ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ */ /* ── 1. Catppuccin Mocha ────────────────────────────────────── */ /* Pastel dark — most-starred Neovim/VS Code theme of 2024 */ /* https://github.com/catppuccin/catppuccin */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="mocha"] { /* Backgrounds — Mocha base */ --mb-bg: #1e1e2e; /* base */ --mb-surface-1: #181825; /* mantle */ --mb-surface-2: #313244; /* surface0 */ --mb-surface-3: #45475a; /* surface1 */ --mb-border: #45475a; --mb-border-focus: #cba6f7; /* mauve */ --mb-border-accent: #cba6f744; --mb-text-bright: #cdd6f4; /* text */ --mb-text: #bac2de; /* subtext1 */ --mb-text-muted: #a6adc8; /* subtext0 */ --mb-text-faint: #6c7086; /* overlay0 */ --mb-text-disabled: #313244; --mb-accent: #cba6f7; /* mauve */ --mb-accent-bright: #d8b4fe; --mb-accent-dark: #b48ee0; --mb-accent-dim: #9672c4; --mb-accent-bg: #cba6f71a; --mb-accent-bg-sel: #cba6f730; --mb-green: #a6e3a1; /* green */ --mb-green-bright: #b8f0b3; --mb-green-bg: #a6e3a118; --mb-red: #f38ba8; /* red */ --mb-red-bright: #ff9fb8; --mb-red-bg: #f38ba818; --mb-blue: #89b4fa; /* blue */ --mb-blue-bright: #a0c8ff; --mb-blue-bg: #89b4fa18; --mb-warning: #fab387; /* peach */ --mb-warning-bg: #fab38718; --mb-info: #89dceb; /* sky */ --mb-info-bg: #89dceb20; --mb-scrollbar: #45475a; --mb-scrollbar-hover: #cba6f7; } html[data-accent="mocha"] pre, html[data-accent="mocha"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="mocha"] pre code { color: var(--mb-text) !important; } html[data-accent="mocha"] code:not(pre > code) { background: var(--mb-surface-3); color: #f38ba8; border-color: var(--mb-border); } html[data-accent="mocha"] .chroma .k, html[data-accent="mocha"] .chroma .kc, html[data-accent="mocha"] .chroma .kd, html[data-accent="mocha"] .chroma .kn, html[data-accent="mocha"] .chroma .kp, html[data-accent="mocha"] .chroma .kr, html[data-accent="mocha"] .chroma .kt { color: #cba6f7; } /* keywords — mauve */ html[data-accent="mocha"] .chroma .s, html[data-accent="mocha"] .chroma .sa, html[data-accent="mocha"] .chroma .sb, html[data-accent="mocha"] .chroma .sc, html[data-accent="mocha"] .chroma .dl, html[data-accent="mocha"] .chroma .s2, html[data-accent="mocha"] .chroma .se, html[data-accent="mocha"] .chroma .s1, html[data-accent="mocha"] .chroma .ss { color: #a6e3a1; } /* strings — green */ html[data-accent="mocha"] .chroma .m, html[data-accent="mocha"] .chroma .mb, html[data-accent="mocha"] .chroma .mf, html[data-accent="mocha"] .chroma .mh, html[data-accent="mocha"] .chroma .mi, html[data-accent="mocha"] .chroma .il, html[data-accent="mocha"] .chroma .mo { color: #fab387; } /* numbers — peach */ html[data-accent="mocha"] .chroma .nf, html[data-accent="mocha"] .chroma .fm { color: #89b4fa; } /* functions — blue */ html[data-accent="mocha"] .chroma .nc, html[data-accent="mocha"] .chroma .nn { color: #f9e2af; } /* types — yellow */ html[data-accent="mocha"] .chroma .n, html[data-accent="mocha"] .chroma .nb, html[data-accent="mocha"] .chroma .bp { color: #cdd6f4; } /* variables */ html[data-accent="mocha"] .chroma .o, html[data-accent="mocha"] .chroma .ow { color: #89dceb; } /* operators — sky */ html[data-accent="mocha"] .chroma .c, html[data-accent="mocha"] .chroma .ch, html[data-accent="mocha"] .chroma .cm, html[data-accent="mocha"] .chroma .c1, html[data-accent="mocha"] .chroma .cs, html[data-accent="mocha"] .chroma .cp, html[data-accent="mocha"] .chroma .cpf { color: #7f849c; font-style: italic; } html[data-accent="mocha"] .chroma .nt { color: #f38ba8; } /* tags — red */ html[data-accent="mocha"] .chroma .na { color: #fab387; font-style: italic; } html[data-accent="mocha"] .chroma .p, html[data-accent="mocha"] .chroma .pi { color: #cdd6f4; } html[data-accent="mocha"] .chroma .err { color: #f38ba8; } /* ══════════════════════════════════════════════════════════════ */ /* ── 2. Dracula ─────────────────────────────────────────────── */ /* The legendary dark theme — deep charcoal + vivid pastels */ /* https://draculatheme.com */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="dracula"] { --mb-bg: #282a36; --mb-surface-1: #21222c; --mb-surface-2: #2d2f3f; --mb-surface-3: #343747; --mb-border: #44475a; --mb-border-focus: #bd93f9; /* purple */ --mb-border-accent: #bd93f944; --mb-text-bright: #f8f8f2; --mb-text: #eeeeea; --mb-text-muted: #a0a8be; --mb-text-faint: #6272a4; --mb-text-disabled: #383a4a; --mb-accent: #bd93f9; /* purple */ --mb-accent-bright: #d0aeff; --mb-accent-dark: #9d70e0; --mb-accent-dim: #7d58c0; --mb-accent-bg: #bd93f91a; --mb-accent-bg-sel: #bd93f930; --mb-green: #50fa7b; --mb-green-bright: #80ff9e; --mb-green-bg: #50fa7b18; --mb-red: #ff5555; --mb-red-bright: #ff7777; --mb-red-bg: #ff555518; --mb-blue: #8be9fd; /* cyan */ --mb-blue-bright: #a8f0ff; --mb-blue-bg: #8be9fd18; --mb-warning: #ffb86c; /* orange */ --mb-warning-bg: #ffb86c18; --mb-info: #ff79c6; /* pink */ --mb-info-bg: #ff79c620; --mb-scrollbar: #44475a; --mb-scrollbar-hover: #bd93f9; } html[data-accent="dracula"] pre, html[data-accent="dracula"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="dracula"] pre code { color: var(--mb-text) !important; } html[data-accent="dracula"] code:not(pre > code) { background: var(--mb-surface-3); color: #ff79c6; border-color: var(--mb-border); } html[data-accent="dracula"] .chroma .k, html[data-accent="dracula"] .chroma .kc, html[data-accent="dracula"] .chroma .kd, html[data-accent="dracula"] .chroma .kn, html[data-accent="dracula"] .chroma .kp, html[data-accent="dracula"] .chroma .kr, html[data-accent="dracula"] .chroma .kt { color: #ff79c6; } /* keywords — pink */ html[data-accent="dracula"] .chroma .s, html[data-accent="dracula"] .chroma .sa, html[data-accent="dracula"] .chroma .sb, html[data-accent="dracula"] .chroma .sc, html[data-accent="dracula"] .chroma .dl, html[data-accent="dracula"] .chroma .s2, html[data-accent="dracula"] .chroma .se, html[data-accent="dracula"] .chroma .s1, html[data-accent="dracula"] .chroma .ss { color: #f1fa8c; } /* strings — yellow */ html[data-accent="dracula"] .chroma .m, html[data-accent="dracula"] .chroma .mb, html[data-accent="dracula"] .chroma .mf, html[data-accent="dracula"] .chroma .mh, html[data-accent="dracula"] .chroma .mi, html[data-accent="dracula"] .chroma .il, html[data-accent="dracula"] .chroma .mo { color: #bd93f9; } /* numbers — purple */ html[data-accent="dracula"] .chroma .nf, html[data-accent="dracula"] .chroma .fm { color: #50fa7b; } /* functions — green */ html[data-accent="dracula"] .chroma .nc, html[data-accent="dracula"] .chroma .nn { color: #8be9fd; } /* types — cyan */ html[data-accent="dracula"] .chroma .n, html[data-accent="dracula"] .chroma .nb, html[data-accent="dracula"] .chroma .bp { color: #f8f8f2; } html[data-accent="dracula"] .chroma .o, html[data-accent="dracula"] .chroma .ow { color: #ff79c6; } /* operators — pink */ html[data-accent="dracula"] .chroma .c, html[data-accent="dracula"] .chroma .ch, html[data-accent="dracula"] .chroma .cm, html[data-accent="dracula"] .chroma .c1, html[data-accent="dracula"] .chroma .cs, html[data-accent="dracula"] .chroma .cp, html[data-accent="dracula"] .chroma .cpf { color: #6272a4; font-style: italic; } html[data-accent="dracula"] .chroma .nt { color: #ff5555; } /* tags — red */ html[data-accent="dracula"] .chroma .na { color: #50fa7b; font-style: italic; } html[data-accent="dracula"] .chroma .p, html[data-accent="dracula"] .chroma .pi { color: #f8f8f2; } html[data-accent="dracula"] .chroma .err { color: #ff5555; } /* ══════════════════════════════════════════════════════════════ */ /* ── 3. Nord ─────────────────────────────────────────────────── */ /* Arctic, north-bluish palette — clean, understated, beloved */ /* https://www.nordtheme.com */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="nord"] { /* Polar Night — backgrounds */ --mb-bg: #2e3440; /* nord0 */ --mb-surface-1: #3b4252; /* nord1 */ --mb-surface-2: #434c5e; /* nord2 */ --mb-surface-3: #4c566a; /* nord3 */ --mb-border: #4c566a; --mb-border-focus: #88c0d0; /* frost */ --mb-border-accent: #88c0d044; /* Snow Storm — text */ --mb-text-bright: #eceff4; /* nord6 */ --mb-text: #e5e9f0; /* nord5 */ --mb-text-muted: #d8dee9; /* nord4 */ --mb-text-faint: #616e88; --mb-text-disabled: #3b4252; /* Frost — accent */ --mb-accent: #88c0d0; /* nord8 */ --mb-accent-bright: #9fd4e2; --mb-accent-dark: #6aadbe; --mb-accent-dim: #4e8fa0; --mb-accent-bg: #88c0d01a; --mb-accent-bg-sel: #88c0d030; /* Aurora — semantic */ --mb-green: #a3be8c; /* nord14 */ --mb-green-bright: #b9d4a0; --mb-green-bg: #a3be8c18; --mb-red: #bf616a; /* nord11 */ --mb-red-bright: #d47880; --mb-red-bg: #bf616a18; --mb-blue: #81a1c1; /* nord9 */ --mb-blue-bright: #9bbad6; --mb-blue-bg: #81a1c118; --mb-warning: #d08770; /* nord12 */ --mb-warning-bg: #d0877018; --mb-info: #b48ead; /* nord15 */ --mb-info-bg: #b48ead20; --mb-scrollbar: #4c566a; --mb-scrollbar-hover: #88c0d0; } html[data-accent="nord"] pre, html[data-accent="nord"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="nord"] pre code { color: var(--mb-text) !important; } html[data-accent="nord"] code:not(pre > code) { background: var(--mb-surface-3); color: #88c0d0; border-color: var(--mb-border); } html[data-accent="nord"] .chroma .k, html[data-accent="nord"] .chroma .kc, html[data-accent="nord"] .chroma .kd, html[data-accent="nord"] .chroma .kn, html[data-accent="nord"] .chroma .kp, html[data-accent="nord"] .chroma .kr, html[data-accent="nord"] .chroma .kt { color: #81a1c1; } /* keywords — frost */ html[data-accent="nord"] .chroma .s, html[data-accent="nord"] .chroma .sa, html[data-accent="nord"] .chroma .sb, html[data-accent="nord"] .chroma .sc, html[data-accent="nord"] .chroma .dl, html[data-accent="nord"] .chroma .s2, html[data-accent="nord"] .chroma .se, html[data-accent="nord"] .chroma .s1, html[data-accent="nord"] .chroma .ss { color: #a3be8c; } /* strings — green */ html[data-accent="nord"] .chroma .m, html[data-accent="nord"] .chroma .mb, html[data-accent="nord"] .chroma .mf, html[data-accent="nord"] .chroma .mh, html[data-accent="nord"] .chroma .mi, html[data-accent="nord"] .chroma .il, html[data-accent="nord"] .chroma .mo { color: #b48ead; } /* numbers — purple */ html[data-accent="nord"] .chroma .nf, html[data-accent="nord"] .chroma .fm { color: #88c0d0; } /* functions — teal */ html[data-accent="nord"] .chroma .nc, html[data-accent="nord"] .chroma .nn { color: #ebcb8b; } /* types — yellow */ html[data-accent="nord"] .chroma .n, html[data-accent="nord"] .chroma .nb, html[data-accent="nord"] .chroma .bp { color: #d8dee9; } html[data-accent="nord"] .chroma .o, html[data-accent="nord"] .chroma .ow { color: #81a1c1; } html[data-accent="nord"] .chroma .c, html[data-accent="nord"] .chroma .ch, html[data-accent="nord"] .chroma .cm, html[data-accent="nord"] .chroma .c1, html[data-accent="nord"] .chroma .cs, html[data-accent="nord"] .chroma .cp, html[data-accent="nord"] .chroma .cpf { color: #616e88; font-style: italic; } html[data-accent="nord"] .chroma .nt { color: #81a1c1; } html[data-accent="nord"] .chroma .na { color: #8fbcbb; font-style: italic; } html[data-accent="nord"] .chroma .p, html[data-accent="nord"] .chroma .pi { color: #d8dee9; } html[data-accent="nord"] .chroma .err { color: #bf616a; } /* ══════════════════════════════════════════════════════════════ */ /* ── 4. One Dark Pro ─────────────────────────────────────────── */ /* Atom's iconic palette — VS Code's all-time most-installed */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="onedark"] { --mb-bg: #282c34; --mb-surface-1: #21252b; --mb-surface-2: #2c313c; --mb-surface-3: #3a3f4b; --mb-border: #3e4452; --mb-border-focus: #61afef; --mb-border-accent: #61afef44; --mb-text-bright: #abb2bf; --mb-text: #9da5b4; --mb-text-muted: #7f848e; --mb-text-faint: #5c6370; /* comment color */ --mb-text-disabled: #2c313c; --mb-accent: #61afef; /* blue */ --mb-accent-bright: #82c3ff; --mb-accent-dark: #4a96d6; --mb-accent-dim: #3480c0; --mb-accent-bg: #61afef1a; --mb-accent-bg-sel: #61afef30; --mb-green: #98c379; --mb-green-bright: #b0d990; --mb-green-bg: #98c37918; --mb-red: #e06c75; --mb-red-bright: #f08090; --mb-red-bg: #e06c7518; --mb-blue: #61afef; --mb-blue-bright: #82c3ff; --mb-blue-bg: #61afef18; --mb-warning: #e5c07b; --mb-warning-bg: #e5c07b18; --mb-info: #56b6c2; /* cyan */ --mb-info-bg: #56b6c220; --mb-scrollbar: #3e4452; --mb-scrollbar-hover: #61afef; } html[data-accent="onedark"] pre, html[data-accent="onedark"] .chroma { background: var(--mb-surface-2) !important; color: var(--mb-text) !important; } html[data-accent="onedark"] pre code { color: var(--mb-text) !important; } html[data-accent="onedark"] code:not(pre > code) { background: var(--mb-surface-3); color: #e06c75; border-color: var(--mb-border); } html[data-accent="onedark"] .chroma .k, html[data-accent="onedark"] .chroma .kc, html[data-accent="onedark"] .chroma .kd, html[data-accent="onedark"] .chroma .kn, html[data-accent="onedark"] .chroma .kp, html[data-accent="onedark"] .chroma .kr, html[data-accent="onedark"] .chroma .kt { color: #c678dd; } /* keywords — mauve */ html[data-accent="onedark"] .chroma .s, html[data-accent="onedark"] .chroma .sa, html[data-accent="onedark"] .chroma .sb, html[data-accent="onedark"] .chroma .sc, html[data-accent="onedark"] .chroma .dl, html[data-accent="onedark"] .chroma .s2, html[data-accent="onedark"] .chroma .se, html[data-accent="onedark"] .chroma .s1, html[data-accent="onedark"] .chroma .ss { color: #98c379; } /* strings — green */ html[data-accent="onedark"] .chroma .m, html[data-accent="onedark"] .chroma .mb, html[data-accent="onedark"] .chroma .mf, html[data-accent="onedark"] .chroma .mh, html[data-accent="onedark"] .chroma .mi, html[data-accent="onedark"] .chroma .il, html[data-accent="onedark"] .chroma .mo { color: #d19a66; } /* numbers — orange */ html[data-accent="onedark"] .chroma .nf, html[data-accent="onedark"] .chroma .fm { color: #61afef; } /* functions — blue */ html[data-accent="onedark"] .chroma .nc, html[data-accent="onedark"] .chroma .nn { color: #e5c07b; } /* types — yellow */ html[data-accent="onedark"] .chroma .n, html[data-accent="onedark"] .chroma .nb, html[data-accent="onedark"] .chroma .bp { color: #abb2bf; } html[data-accent="onedark"] .chroma .o, html[data-accent="onedark"] .chroma .ow { color: #56b6c2; } /* operators — cyan */ html[data-accent="onedark"] .chroma .c, html[data-accent="onedark"] .chroma .ch, html[data-accent="onedark"] .chroma .cm, html[data-accent="onedark"] .chroma .c1, html[data-accent="onedark"] .chroma .cs, html[data-accent="onedark"] .chroma .cp, html[data-accent="onedark"] .chroma .cpf { color: #5c6370; font-style: italic; } html[data-accent="onedark"] .chroma .nt { color: #e06c75; } /* tags — red */ html[data-accent="onedark"] .chroma .na { color: #d19a66; font-style: italic; } html[data-accent="onedark"] .chroma .p, html[data-accent="onedark"] .chroma .pi { color: #abb2bf; } html[data-accent="onedark"] .chroma .err { color: #e06c75; } /* ══════════════════════════════════════════════════════════════ */ /* ── 5. GitHub Light ─────────────────────────────────────────── */ /* Clean, white, professional — the UI every developer knows */ /* ══════════════════════════════════════════════════════════════ */ html[data-accent="github-light"] { color-scheme: light; --mb-bg: #ffffff; --mb-surface-1: #f6f8fa; --mb-surface-2: #eaf0f6; --mb-surface-3: #d0d7de; --mb-border: #d0d7de; --mb-border-focus: #0969da; --mb-border-accent: #0969da33; --mb-text-bright: #1f2328; --mb-text: #24292f; --mb-text-muted: #57606a; --mb-text-faint: #8c959f; --mb-text-disabled: #d0d7de; --mb-accent: #0969da; /* GitHub blue */ --mb-accent-bright: #218bff; --mb-accent-dark: #0550ae; --mb-accent-dim: #033d8b; --mb-accent-bg: #0969da14; --mb-accent-bg-sel: #0969da28; --mb-green: #1a7f37; --mb-green-bright: #2da44e; --mb-green-bg: #1a7f3715; --mb-red: #cf222e; --mb-red-bright: #e34c73; --mb-red-bg: #cf222e15; --mb-blue: #0969da; --mb-blue-bright: #218bff; --mb-blue-bg: #0969da15; --mb-warning: #9a6700; --mb-warning-bg: #9a670015; --mb-info: #8250df; /* purple */ --mb-info-bg: #8250df20; --mb-scrollbar: #d0d7de; --mb-scrollbar-hover: #0969da; /* Pico overrides — force light mode */ --pico-background-color: var(--mb-bg); --pico-card-background-color: var(--mb-surface-1); --pico-color: var(--mb-text); --pico-muted-color: var(--mb-text-muted); --pico-border-color: var(--mb-border); --pico-form-element-background-color: var(--mb-surface-2); --pico-form-element-border-color: var(--mb-border); --pico-form-element-color: var(--mb-text); --pico-form-element-placeholder-color: var(--mb-text-faint); --pico-dropdown-background-color: var(--mb-surface-2); --pico-dropdown-color: var(--mb-text); --pico-dropdown-hover-background-color: var(--mb-surface-3); --pico-code-background-color: var(--mb-surface-1); --pico-code-color: #cf222e; --pico-table-border-color: var(--mb-border); --pico-table-row-stripped-background-color: var(--mb-surface-1); --pico-modal-overlay-background-color: rgba(0,0,0,0.35); } /* SVG diagrams: add dark bg so white paths stay visible */ html[data-accent="github-light"] .post-content img[src$=".svg"], html[data-accent="github-light"] .post-content object[type="image/svg+xml"] { background: #24292f; border-radius: 6px; padding: 0.75rem; } html[data-accent="github-light"] pre, html[data-accent="github-light"] .chroma { background: var(--mb-surface-1) !important; color: var(--mb-text) !important; } html[data-accent="github-light"] pre code { color: var(--mb-text) !important; } html[data-accent="github-light"] code:not(pre > code) { background: var(--mb-surface-2); color: #cf222e; border-color: var(--mb-border); } html[data-accent="github-light"] .chroma .k, html[data-accent="github-light"] .chroma .kc, html[data-accent="github-light"] .chroma .kd, html[data-accent="github-light"] .chroma .kn, html[data-accent="github-light"] .chroma .kp, html[data-accent="github-light"] .chroma .kr, html[data-accent="github-light"] .chroma .kt { color: #cf222e; } /* keywords — red */ html[data-accent="github-light"] .chroma .s, html[data-accent="github-light"] .chroma .sa, html[data-accent="github-light"] .chroma .sb, html[data-accent="github-light"] .chroma .sc, html[data-accent="github-light"] .chroma .dl, html[data-accent="github-light"] .chroma .s2, html[data-accent="github-light"] .chroma .se, html[data-accent="github-light"] .chroma .s1, html[data-accent="github-light"] .chroma .ss { color: #0a3069; } /* strings — navy */ html[data-accent="github-light"] .chroma .m, html[data-accent="github-light"] .chroma .mb, html[data-accent="github-light"] .chroma .mf, html[data-accent="github-light"] .chroma .mh, html[data-accent="github-light"] .chroma .mi, html[data-accent="github-light"] .chroma .il, html[data-accent="github-light"] .chroma .mo { color: #953800; } /* numbers — brown */ html[data-accent="github-light"] .chroma .nf, html[data-accent="github-light"] .chroma .fm { color: #8250df; } /* functions — purple */ html[data-accent="github-light"] .chroma .nc, html[data-accent="github-light"] .chroma .nn { color: #116329; } /* types — green */ html[data-accent="github-light"] .chroma .n, html[data-accent="github-light"] .chroma .nb, html[data-accent="github-light"] .chroma .bp { color: #24292f; } html[data-accent="github-light"] .chroma .o, html[data-accent="github-light"] .chroma .ow { color: #24292f; } html[data-accent="github-light"] .chroma .c, html[data-accent="github-light"] .chroma .ch, html[data-accent="github-light"] .chroma .cm, html[data-accent="github-light"] .chroma .c1, html[data-accent="github-light"] .chroma .cs, html[data-accent="github-light"] .chroma .cp, html[data-accent="github-light"] .chroma .cpf { color: #6e7781; font-style: italic; } html[data-accent="github-light"] .chroma .nt { color: #116329; } /* tags — green */ html[data-accent="github-light"] .chroma .na { color: #0550ae; font-style: italic; } html[data-accent="github-light"] .chroma .p, html[data-accent="github-light"] .chroma .pi { color: #57606a; } html[data-accent="github-light"] .chroma .err { color: #cf222e; } /* ── END NEW THEMES ─────────────────────────────────────────── */