/* =========================================================== Theme System ----------------------------------------------------------- A token-driven layer that sits on top of extra.css. How it works: - Every page has (set before first paint by the inline script in overrides/main.html, then managed by javascripts/theme-switcher.js). - `data-md-color-scheme` keeps Material's own internals (code highlight, form controls, icons) on a sane light/dark baseline. - `data-theme` carries the colour personality through the --am-* tokens below. Generic rules read those tokens, so a theme only has to redefine ~16 variables. - Selectors are prefixed with html[data-theme] so they always out-rank the [data-md-color-scheme="…"] rules in extra.css by one element point, without editing that file. =========================================================== */ /* --- Base tokens = the current Light theme (also the fallback) --- */ html[data-theme] { --am-bg: #ffffff; --am-header: #ffffff; --am-surface: #ffffff; --am-surface-2: #f5f7fa; --am-surface-3: #edf0f5; --am-footer: #060d18; --am-border: #e8ecf1; --am-border-strong: #d0d5dd; --am-text: #0a1628; --am-text-muted: #4a5568; --am-text-dim: #718096; --am-accent: #4361ee; --am-accent-hover: #ff1b6b; --am-accent-soft: rgba(67, 97, 238, 0.08); --am-code-bg: #f5f7fa; --am-grad-1: #ff1b6b; --am-grad-2: #a855f7; --am-grad-3: #45caff; /* Map Material + local (horizon/logo) variables onto the tokens. Light defaults above match the current theme, so nothing changes for Light; dark themes flip the tokens and everything follows. */ --md-default-bg-color: var(--am-bg); --md-default-fg-color: var(--am-text); --md-typeset-color: var(--am-text); --md-typeset-a-color: var(--am-accent); --md-accent-fg-color: var(--am-accent-hover); --md-accent-fg-color--transparent: var(--am-accent-soft); --md-code-bg-color: var(--am-code-bg); --md-code-fg-color: var(--am-text); --horizon-navy: var(--am-text); --horizon-text: var(--am-text-muted); --horizon-text-light: var(--am-text-dim); --horizon-border: var(--am-border); --horizon-gray: var(--am-surface-2); --logo-blue: var(--am-accent); --logo-pink: var(--am-accent-hover); } /* Keep the brand logo colours on the default Light theme, so the existing pink/blue hero identity is untouched unless a theme opts to recolour it. */ html[data-theme="light"] { --logo-blue: #45caff; --logo-pink: #ff1b6b; } /* =========================================================== Generic component rules (read the --am-* tokens) =========================================================== */ /* Header */ html[data-theme] .md-header { background: var(--am-header); color: var(--am-text); box-shadow: 0 1px 0 var(--am-border); } html[data-theme] .md-header .md-header__title, html[data-theme] .md-header .md-header__topic { color: var(--am-text); } html[data-theme] .md-header .md-header__button { color: var(--am-text); } html[data-theme] .md-header[data-md-state="shadow"] { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); } /* Tabs */ html[data-theme] .md-tabs { background: var(--am-header); border-bottom: 1px solid var(--am-border); } html[data-theme] .md-tabs__link { color: var(--am-text-muted); } html[data-theme] .md-tabs__link:hover { color: var(--am-accent-hover); } html[data-theme] .md-tabs__link--active { color: var(--am-text); } /* Search */ html[data-theme] .md-search__input { background: var(--am-surface-2); color: var(--am-text); } html[data-theme] .md-search__input::placeholder { color: var(--am-text-dim); } /* Content surfaces */ html[data-theme] .md-main, html[data-theme] .md-content { background: var(--am-bg); } /* Plain prose links: underline them so they read as links purely from shape, not just color. Several accent palettes (Matrix, Amber, Gruvbox) sit too close in hue/brightness to body text for color alone to carry this. Scoped to unclassed so styled components (course-chip, course-card, roadmap-step, buttons, etc.) keep their own box-based affordance. */ html[data-theme] .md-typeset a:not([class]) { text-decoration: underline; text-underline-offset: 3px; } /* Content images: frame them on dark themes so light-background diagrams and screenshots read as an intentional card instead of a raw white rectangle bleeding into the page. */ html[data-md-color-scheme="slate"][data-theme] .md-typeset img:not(.about-page-photo) { border-radius: 10px; border: 1px solid var(--am-border); background: var(--am-surface-2); padding: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } /* Sidebars + nav */ html[data-theme] .md-sidebar--secondary { border-left: 1px solid var(--am-border); } html[data-theme] .md-sidebar--primary { border-right: 1px solid var(--am-border); } html[data-theme] .md-nav__link { color: var(--am-text-muted); } html[data-theme] .md-nav__link:hover { color: var(--am-accent-hover); } html[data-theme] .md-nav__link--active { color: var(--am-text); } /* Footer (only recolour on dark themes; Light keeps the deep footer) */ html[data-md-color-scheme="slate"][data-theme] .md-footer { background: var(--am-footer); } /* Admonitions / details */ html[data-theme] .md-typeset .admonition, html[data-theme] .md-typeset details { background: var(--am-surface); border-color: var(--am-border); } /* Course chips */ html[data-theme] .md-typeset a.course-chip { background: var(--am-surface); border-color: var(--am-border); color: var(--am-text-muted); } html[data-theme] .md-typeset a.course-chip:hover { background: var(--am-accent-soft); border-color: var(--am-accent); color: var(--am-accent); } /* Course cards */ html[data-theme] .md-typeset a.course-card { background: var(--am-surface); border-color: var(--am-border); } html[data-theme] .md-typeset a.course-card:hover { border-color: var(--am-accent); } /* Grid cards */ html[data-theme] .md-typeset .grid.cards > ul > li { background: var(--am-surface); border-color: var(--am-border); } html[data-theme] .md-typeset .grid.cards > ul > li:hover { border-color: var(--am-accent); } html[data-theme] .md-typeset .grid.cards > ul > li > hr { border-color: var(--am-border); } /* Roadmap */ html[data-theme] .roadmap-card { background: var(--am-surface); border-color: var(--am-border); } html[data-theme] .md-typeset a.roadmap-step { background: var(--am-surface-2); border-color: var(--am-border); color: var(--am-text); } html[data-theme] .md-typeset a.roadmap-step:hover { background: var(--am-accent-soft); border-color: var(--am-accent); color: var(--am-accent); } /* Tabs dropdown */ html[data-theme] .tabs-dropdown { background: var(--am-surface); border-color: var(--am-border); } html[data-theme] .tabs-dropdown-item { color: var(--am-text-muted) !important; } html[data-theme] .tabs-dropdown-item:hover { background: var(--am-surface-2); color: var(--am-text) !important; } /* Progress widgets */ html[data-theme] .complete-btn-container { border-top-color: var(--am-border); } html[data-theme] .nav-btn, html[data-theme] .complete-btn, html[data-theme] .course-progress { background: var(--am-surface); border-color: var(--am-border); color: var(--am-text-muted); } html[data-theme] .nav-btn:hover, html[data-theme] .complete-btn:hover { border-color: var(--am-accent); color: var(--am-accent); background: var(--am-accent-soft); } html[data-theme] .course-progress-track { background: var(--am-border); } /* About banner / card */ html[data-theme] .md-typeset a.about-banner, html[data-theme] a.about-banner, html[data-theme] .about-card { background: var(--am-surface); border-color: var(--am-border); } html[data-theme] a.about-banner:hover { border-color: var(--am-accent); } html[data-theme] .about-toggle:hover { background: var(--am-surface-2); } html[data-theme] .about-card .about-links a.link-secondary { background: var(--am-surface-2); color: var(--am-text); border-color: var(--am-border); } html[data-theme] .about-card .about-links a.link-secondary:hover { background: var(--am-surface-3); border-color: var(--am-accent); } /* About page */ html[data-theme] .about-page-body { background: var(--am-surface); border-color: var(--am-border); } html[data-theme] .about-page-links .link-btn-secondary { background: var(--am-surface-2); color: var(--am-text); border-color: var(--am-border); } html[data-theme] .about-page-links .link-btn-secondary:hover { background: var(--am-surface-3); border-color: var(--am-accent); } /* Blog cards */ html[data-theme] .blog-card { background: var(--am-surface); border-color: var(--am-border); } html[data-theme] .blog-card:hover { border-color: var(--am-accent); } /* =========================================================== Hero gradients (softened, token-driven, fade to page bg) Fixes the harsh bright band the old dark-mode gradient had. =========================================================== */ html[data-theme] .homepage-gradient-top { background: linear-gradient( 180deg, var(--am-grad-1) 0%, var(--am-grad-2) 30%, var(--am-grad-3) 55%, transparent 100% ); } html[data-theme] .homepage-gradient-hero-bottom, html[data-theme] .homepage-gradient { background: linear-gradient( 180deg, transparent 0%, var(--am-grad-3) 45%, var(--am-grad-2) 72%, var(--am-grad-1) 100% ); } html[data-theme] .homepage-hero h1 { background: linear-gradient(135deg, var(--am-grad-3), var(--am-grad-2), var(--am-grad-1)); -webkit-background-clip: text; background-clip: text; } /* =========================================================== Theme palettes =========================================================== */ /* ---- Light accent variants (default scheme, surfaces stay light) ---- */ html[data-theme="light-violet"] { --am-accent: #7c3aed; --am-accent-hover: #a855f7; --am-accent-soft: rgba(124, 58, 237, 0.08); --am-grad-1: #7c3aed; --am-grad-2: #a855f7; --am-grad-3: #c4b5fd; --logo-blue: #7c3aed; --logo-pink: #a855f7; } html[data-theme="light-rose"] { --am-accent: #e11d48; --am-accent-hover: #fb7185; --am-accent-soft: rgba(225, 29, 72, 0.07); --am-grad-1: #e11d48; --am-grad-2: #db2777; --am-grad-3: #fb7185; --logo-blue: #e11d48; --logo-pink: #f43f5e; } html[data-theme="light-ocean"] { --am-accent: #0891b2; --am-accent-hover: #06b6d4; --am-accent-soft: rgba(8, 145, 178, 0.08); --am-grad-1: #0891b2; --am-grad-2: #22d3ee; --am-grad-3: #7dd3fc; --logo-blue: #0891b2; --logo-pink: #06b6d4; } /* ---- Dark themes (slate scheme, full token override) ---- */ html[data-theme="midnight"] { --am-bg: #0f172a; --am-header: #0f172a; --am-surface: #1e293b; --am-surface-2: #243147; --am-surface-3: #2d3f5a; --am-footer: #060d18; --am-border: #334155; --am-border-strong: #4a5f7a; --am-text: #e2e8f0; --am-text-muted: #94a3b8; --am-text-dim: #64748b; --am-accent: #60a5fa; --am-accent-hover: #f472b6; --am-accent-soft: rgba(96, 165, 250, 0.14); --am-code-bg: #1e293b; --am-grad-1: #db2777; --am-grad-2: #7c3aed; --am-grad-3: #3b82f6; --logo-blue: #60a5fa; --logo-pink: #f472b6; --md-code-hl-keyword-color: #60a5fa; --md-code-hl-string-color: #34d399; --md-code-hl-number-color: #f472b6; --md-code-hl-comment-color: #64748b; --md-code-hl-function-color: #a78bfa; --md-code-hl-constant-color: #fbbf24; --md-code-hl-name-color: #e2e8f0; --md-code-hl-operator-color: #94a3b8; --md-code-hl-punctuation-color: #94a3b8; --md-code-hl-variable-color: #e2e8f0; --md-code-hl-generic-color: #94a3b8; --md-code-hl-special-color: #f97316; } html[data-theme="dracula"] { --am-bg: #282a36; --am-header: #21222c; --am-surface: #343746; --am-surface-2: #3c3f52; --am-surface-3: #464a63; --am-footer: #191a21; --am-border: #44475a; --am-border-strong: #565a72; --am-text: #f8f8f2; --am-text-muted: #bcc0d8; --am-text-dim: #6272a4; --am-accent: #bd93f9; --am-accent-hover: #ff79c6; --am-accent-soft: rgba(189, 147, 249, 0.16); --am-code-bg: #21222c; --am-grad-1: #ff79c6; --am-grad-2: #bd93f9; --am-grad-3: #8be9fd; --logo-blue: #8be9fd; --logo-pink: #ff79c6; --md-code-hl-keyword-color: #ff79c6; --md-code-hl-string-color: #f1fa8c; --md-code-hl-number-color: #bd93f9; --md-code-hl-comment-color: #6272a4; --md-code-hl-function-color: #50fa7b; --md-code-hl-constant-color: #bd93f9; --md-code-hl-name-color: #f8f8f2; --md-code-hl-operator-color: #ff79c6; --md-code-hl-punctuation-color: #f8f8f2; --md-code-hl-variable-color: #f8f8f2; --md-code-hl-generic-color: #8be9fd; --md-code-hl-special-color: #ffb86c; } html[data-theme="nord"] { --am-bg: #2e3440; --am-header: #2e3440; --am-surface: #3b4252; --am-surface-2: #434c5e; --am-surface-3: #4c566a; --am-footer: #272c36; --am-border: #434c5e; --am-border-strong: #4c566a; --am-text: #eceff4; --am-text-muted: #d8dee9; --am-text-dim: #7b8494; --am-accent: #88c0d0; --am-accent-hover: #81a1c1; --am-accent-soft: rgba(136, 192, 208, 0.16); --am-code-bg: #3b4252; --am-grad-1: #b48ead; --am-grad-2: #5e81ac; --am-grad-3: #88c0d0; --logo-blue: #88c0d0; --logo-pink: #b48ead; --md-code-hl-keyword-color: #81a1c1; --md-code-hl-string-color: #a3be8c; --md-code-hl-number-color: #b48ead; --md-code-hl-comment-color: #4c566a; --md-code-hl-function-color: #88c0d0; --md-code-hl-constant-color: #81a1c1; --md-code-hl-name-color: #d8dee9; --md-code-hl-operator-color: #81a1c1; --md-code-hl-punctuation-color: #d8dee9; --md-code-hl-variable-color: #d8dee9; --md-code-hl-generic-color: #8fbcbb; --md-code-hl-special-color: #d08770; } html[data-theme="gruvbox"] { --am-bg: #282828; --am-header: #1d2021; --am-surface: #3c3836; --am-surface-2: #504945; --am-surface-3: #665c54; --am-footer: #1d2021; --am-border: #504945; --am-border-strong: #665c54; --am-text: #ebdbb2; --am-text-muted: #bdae93; --am-text-dim: #928374; --am-accent: #fabd2f; --am-accent-hover: #fe8019; --am-accent-soft: rgba(250, 189, 47, 0.14); --am-code-bg: #32302f; --am-grad-1: #fb4934; --am-grad-2: #d3869b; --am-grad-3: #fabd2f; --logo-blue: #83a598; --logo-pink: #d3869b; --md-code-hl-keyword-color: #fb4934; --md-code-hl-string-color: #b8bb26; --md-code-hl-number-color: #d3869b; --md-code-hl-comment-color: #928374; --md-code-hl-function-color: #fabd2f; --md-code-hl-constant-color: #d3869b; --md-code-hl-name-color: #ebdbb2; --md-code-hl-operator-color: #fe8019; --md-code-hl-punctuation-color: #ebdbb2; --md-code-hl-variable-color: #ebdbb2; --md-code-hl-generic-color: #8ec07c; --md-code-hl-special-color: #fe8019; } html[data-theme="solarized-dark"] { --am-bg: #002b36; --am-header: #002b36; --am-surface: #073642; --am-surface-2: #0a4453; --am-surface-3: #0d5162; --am-footer: #001b23; --am-border: #0a4453; --am-border-strong: #0d5162; --am-text: #b3c0c0; --am-text-muted: #93a1a1; --am-text-dim: #657b83; --am-accent: #268bd2; --am-accent-hover: #2aa198; --am-accent-soft: rgba(38, 139, 210, 0.16); --am-code-bg: #073642; --am-grad-1: #d33682; --am-grad-2: #6c71c4; --am-grad-3: #268bd2; --logo-blue: #268bd2; --logo-pink: #d33682; --md-code-hl-keyword-color: #859900; --md-code-hl-string-color: #2aa198; --md-code-hl-number-color: #d33682; --md-code-hl-comment-color: #586e75; --md-code-hl-function-color: #268bd2; --md-code-hl-constant-color: #cb4b16; --md-code-hl-name-color: #839496; --md-code-hl-operator-color: #6c71c4; --md-code-hl-punctuation-color: #839496; --md-code-hl-variable-color: #839496; --md-code-hl-generic-color: #93a1a1; --md-code-hl-special-color: #b58900; } html[data-theme="matrix"] { --am-bg: #000000; --am-header: #010a01; --am-surface: #0a1a0a; --am-surface-2: #0f240f; --am-surface-3: #163016; --am-footer: #010a01; --am-border: #1c3d1c; --am-border-strong: #2a5a2a; --am-text: #33ff66; --am-text-muted: #22b84a; --am-text-dim: #157a2b; --am-accent: #00ff41; --am-accent-hover: #7dff4d; --am-accent-soft: rgba(0, 255, 65, 0.12); --am-code-bg: #051005; --am-grad-1: #00cc33; --am-grad-2: #00ff41; --am-grad-3: #66ff66; --logo-blue: #00ff41; --logo-pink: #7dff4d; --md-code-hl-keyword-color: #33ff66; --md-code-hl-string-color: #7dff4d; --md-code-hl-number-color: #b6ff33; --md-code-hl-comment-color: #157a2b; --md-code-hl-function-color: #66ffcc; --md-code-hl-constant-color: #00ff41; --md-code-hl-name-color: #33ff66; --md-code-hl-operator-color: #22b84a; --md-code-hl-punctuation-color: #22b84a; --md-code-hl-variable-color: #33ff66; --md-code-hl-generic-color: #22b84a; --md-code-hl-special-color: #ccff99; } html[data-theme="amber"] { --am-bg: #1a1200; --am-header: #140e00; --am-surface: #241a00; --am-surface-2: #2e2200; --am-surface-3: #3a2b00; --am-footer: #100b00; --am-border: #4d3a00; --am-border-strong: #665000; --am-text: #ffb000; --am-text-muted: #cc8f1a; --am-text-dim: #7a5600; --am-accent: #ffb000; --am-accent-hover: #ffd54a; --am-accent-soft: rgba(255, 176, 0, 0.12); --am-code-bg: #1c1400; --am-grad-1: #cc7000; --am-grad-2: #ff9500; --am-grad-3: #ffc300; --logo-blue: #ffb000; --logo-pink: #ffd54a; --md-code-hl-keyword-color: #ffb000; --md-code-hl-string-color: #ffd54a; --md-code-hl-number-color: #ff8c00; --md-code-hl-comment-color: #7a5600; --md-code-hl-function-color: #ffe08a; --md-code-hl-constant-color: #ff9500; --md-code-hl-name-color: #ffb000; --md-code-hl-operator-color: #cc8f1a; --md-code-hl-punctuation-color: #cc8f1a; --md-code-hl-variable-color: #ffb000; --md-code-hl-generic-color: #cc8f1a; --md-code-hl-special-color: #fff3cc; } html[data-theme="synthwave"] { --am-bg: #1a0b2e; --am-header: #150826; --am-surface: #241040; --am-surface-2: #2e1650; --am-surface-3: #3a1d63; --am-footer: #0f0620; --am-border: #3d1f66; --am-border-strong: #52308a; --am-text: #f5edff; --am-text-muted: #c4a5e8; --am-text-dim: #8a6cb0; --am-accent: #ff2e97; --am-accent-hover: #05d9e8; --am-accent-soft: rgba(255, 46, 151, 0.16); --am-code-bg: #1c0d33; --am-grad-1: #ff2e97; --am-grad-2: #b829e0; --am-grad-3: #05d9e8; --logo-blue: #05d9e8; --logo-pink: #ff2e97; --md-code-hl-keyword-color: #ff2e97; --md-code-hl-string-color: #05d9e8; --md-code-hl-number-color: #f9f871; --md-code-hl-comment-color: #8a6cb0; --md-code-hl-function-color: #b829e0; --md-code-hl-constant-color: #ff8b3d; --md-code-hl-name-color: #f5edff; --md-code-hl-operator-color: #ff2e97; --md-code-hl-punctuation-color: #c4a5e8; --md-code-hl-variable-color: #f5edff; --md-code-hl-generic-color: #8a6cb0; --md-code-hl-special-color: #39ff14; } html[data-theme="ocean"] { --am-bg: #0b1a24; --am-header: #0b1a24; --am-surface: #102733; --am-surface-2: #163544; --am-surface-3: #1d4457; --am-footer: #071219; --am-border: #1e3a4a; --am-border-strong: #2a5064; --am-text: #e0f2fa; --am-text-muted: #9db8c4; --am-text-dim: #5f7c88; --am-accent: #22d3ee; --am-accent-hover: #38bdf8; --am-accent-soft: rgba(34, 211, 238, 0.14); --am-code-bg: #102733; --am-grad-1: #06b6d4; --am-grad-2: #3b82f6; --am-grad-3: #22d3ee; --logo-blue: #22d3ee; --logo-pink: #38bdf8; --md-code-hl-keyword-color: #22d3ee; --md-code-hl-string-color: #a3e635; --md-code-hl-number-color: #38bdf8; --md-code-hl-comment-color: #5f7c88; --md-code-hl-function-color: #7dd3fc; --md-code-hl-constant-color: #fbbf24; --md-code-hl-name-color: #e0f2fa; --md-code-hl-operator-color: #38bdf8; --md-code-hl-punctuation-color: #9db8c4; --md-code-hl-variable-color: #e0f2fa; --md-code-hl-generic-color: #5f7c88; --md-code-hl-special-color: #f472b6; } html[data-theme="emerald"] { --am-bg: #0b1a13; --am-header: #0b1a13; --am-surface: #12271c; --am-surface-2: #1a3527; --am-surface-3: #224433; --am-footer: #071209; --am-border: #1f3d2e; --am-border-strong: #2a5540; --am-text: #e3f5eb; --am-text-muted: #a0c4b0; --am-text-dim: #5f8570; --am-accent: #34d399; --am-accent-hover: #10b981; --am-accent-soft: rgba(52, 211, 153, 0.14); --am-code-bg: #12271c; --am-grad-1: #10b981; --am-grad-2: #059669; --am-grad-3: #34d399; --logo-blue: #34d399; --logo-pink: #6ee7b7; --md-code-hl-keyword-color: #34d399; --md-code-hl-string-color: #a3e635; --md-code-hl-number-color: #fbbf24; --md-code-hl-comment-color: #5f8570; --md-code-hl-function-color: #6ee7b7; --md-code-hl-constant-color: #38bdf8; --md-code-hl-name-color: #e3f5eb; --md-code-hl-operator-color: #10b981; --md-code-hl-punctuation-color: #a0c4b0; --md-code-hl-variable-color: #e3f5eb; --md-code-hl-generic-color: #5f8570; --md-code-hl-special-color: #f472b6; } html[data-theme="rose"] { --am-bg: #1c1013; --am-header: #1c1013; --am-surface: #2a171c; --am-surface-2: #371f26; --am-surface-3: #472730; --am-footer: #140a0d; --am-border: #4a2530; --am-border-strong: #5f333f; --am-text: #fbe8ee; --am-text-muted: #d4a7b5; --am-text-dim: #8a5f6c; --am-accent: #fb7185; --am-accent-hover: #f43f5e; --am-accent-soft: rgba(251, 113, 133, 0.14); --am-code-bg: #2a171c; --am-grad-1: #f43f5e; --am-grad-2: #db2777; --am-grad-3: #fb7185; --logo-blue: #fb7185; --logo-pink: #f43f5e; --md-code-hl-keyword-color: #fb7185; --md-code-hl-string-color: #fbbf24; --md-code-hl-number-color: #f43f5e; --md-code-hl-comment-color: #8a5f6c; --md-code-hl-function-color: #fda4af; --md-code-hl-constant-color: #a78bfa; --md-code-hl-name-color: #fbe8ee; --md-code-hl-operator-color: #f43f5e; --md-code-hl-punctuation-color: #d4a7b5; --md-code-hl-variable-color: #fbe8ee; --md-code-hl-generic-color: #8a5f6c; --md-code-hl-special-color: #34d399; } html[data-theme="violet"] { --am-bg: #14101f; --am-header: #14101f; --am-surface: #1f1830; --am-surface-2: #2a2142; --am-surface-3: #352a52; --am-footer: #0d0a16; --am-border: #35294f; --am-border-strong: #473869; --am-text: #ece7fb; --am-text-muted: #b8a9d9; --am-text-dim: #6f5f8a; --am-accent: #a78bfa; --am-accent-hover: #8b5cf6; --am-accent-soft: rgba(167, 139, 250, 0.14); --am-code-bg: #1f1830; --am-grad-1: #8b5cf6; --am-grad-2: #6d28d9; --am-grad-3: #a78bfa; --logo-blue: #a78bfa; --logo-pink: #c4b5fd; --md-code-hl-keyword-color: #a78bfa; --md-code-hl-string-color: #34d399; --md-code-hl-number-color: #8b5cf6; --md-code-hl-comment-color: #6f5f8a; --md-code-hl-function-color: #c4b5fd; --md-code-hl-constant-color: #fbbf24; --md-code-hl-name-color: #ece7fb; --md-code-hl-operator-color: #8b5cf6; --md-code-hl-punctuation-color: #b8a9d9; --md-code-hl-variable-color: #ece7fb; --md-code-hl-generic-color: #6f5f8a; --md-code-hl-special-color: #fb7185; } /* =========================================================== Theme picker (button + panel injected into the header) =========================================================== */ .am-theme { position: relative; display: flex; align-items: center; } .am-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--am-text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .am-theme-btn:hover { background: var(--am-accent-soft); color: var(--am-accent); } .am-theme-btn svg { width: 22px; height: 22px; } .am-theme-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 300px; max-height: min(70vh, 520px); overflow-y: auto; padding: 0.6rem; background: var(--am-surface); border: 1px solid var(--am-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); z-index: 100; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; } .am-theme.open .am-theme-panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .am-theme-panel-title { font-size: 0.9rem; font-weight: 700; color: var(--am-text); padding: 0.3rem 0.5rem 0.55rem; } .am-theme-group-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--am-text-dim); padding: 0.6rem 0.5rem 0.3rem; } .am-theme-opt { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem 0.5rem; border: none; border-radius: 10px; background: transparent; color: var(--am-text); font-family: inherit; font-size: 0.86rem; font-weight: 500; text-align: start; cursor: pointer; transition: background 0.15s ease; } .am-theme-opt:hover { background: var(--am-surface-2); } .am-theme-sw { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--am-border-strong); } .am-theme-name { flex: 1; } .am-theme-check { width: 18px; height: 18px; flex-shrink: 0; color: var(--am-accent); opacity: 0; } .am-theme-opt[aria-checked="true"] { background: var(--am-accent-soft); font-weight: 700; } .am-theme-opt[aria-checked="true"] .am-theme-check { opacity: 1; } .am-theme-btn:focus-visible, .am-theme-opt:focus-visible { outline: 2px solid var(--am-accent); outline-offset: 2px; } @media screen and (max-width: 76.1875em) { .am-theme-panel { left: auto; right: 0; } }