/* Tokyo Night Color Scheme for MkDocs Material Based on the Tokyo Night palette by Enkia: https://github.com/enkia/tokyo-night-vscode-theme Two variants: Storm (dark default): bg #24283b Day (light): bg #e1e2e7 */ :root { --tn-night: #1a1b26; --tn-night-rgb: 26, 27, 38; --tn-storm: #24283b; --tn-storm-rgb: 36, 40, 59; --tn-storm1: #1f2335; --tn-storm1-rgb: 31, 35, 53; --tn-storm2: #292e42; --tn-storm2-rgb: 41, 46, 66; --tn-storm3: #343a55; --tn-storm3-rgb: 52, 58, 85; --tn-fg: #c0caf5; --tn-fg-rgb: 192, 202, 245; --tn-fg-dark: #a9b1d6; --tn-fg-dark-rgb: 169, 177, 214; --tn-fg-gutter: #3b4261; --tn-comment: #565f89; --tn-comment-rgb: 86, 95, 137; --tn-blue: #7aa2f7; --tn-blue-rgb: 122, 162, 247; --tn-blue2: #3d59a1; --tn-blue2-rgb: 61, 89, 161; --tn-cyan: #7dcfff; --tn-cyan-rgb: 125, 207, 255; --tn-green: #9ece6a; --tn-green-rgb: 158, 206, 106; --tn-green2: #73daca; --tn-green2-rgb: 115, 218, 202; --tn-orange: #ff9e64; --tn-orange-rgb: 255, 158, 100; --tn-purple: #bb9af7; --tn-purple-rgb: 187, 154, 247; --tn-red: #f7768e; --tn-red-rgb: 247, 118, 142; --tn-yellow: #e0af68; --tn-yellow-rgb: 224, 175, 104; --tn-day-bg: #e1e2e7; --tn-day-bg-rgb: 225, 226, 231; --tn-day-bg2: #d0d5e3; --tn-day-bg2-rgb: 208, 213, 227; --tn-day-bg3: #c4c8da; --tn-day-fg: #3760bf; --tn-day-fg-rgb: 55, 96, 191; --tn-day-fg2: #4c5a90; --tn-day-fg3: #6172b0; --tn-day-fg3-rgb: 97, 114, 176; --tn-day-blue: #2e7de9; --tn-day-cyan: #007197; --tn-day-green: #587539; --tn-day-orange: #b15c00; --tn-day-purple: #9854f1; --tn-day-red: #f52a65; --tn-day-yellow: #8c6c3e; --tn-day-comment: #848cb5; } /* ── Dark (Storm) ─────────────────────────────────────────────── */ [data-md-color-scheme="tokyonight:dark"] { color-scheme: dark; img[src$="#only-light"], img[src$="#gh-light-mode-only"] { display: none; } --md-primary-fg-color: var(--tn-storm1); --md-primary-fg-color--light: var(--tn-storm2); --md-primary-fg-color--dark: var(--tn-night); --md-primary-bg-color: var(--tn-fg); --md-primary-bg-color--light: rgba(var(--tn-fg-rgb), 0.7); --md-accent-fg-color: var(--tn-cyan); --md-accent-fg-color--transparent: rgba(var(--tn-cyan-rgb), 0.1); --md-accent-bg-color: var(--tn-storm); --md-accent-bg-color--light: rgba(var(--tn-storm-rgb), 0.7); --md-default-fg-color: var(--tn-fg); --md-default-fg-color--light: var(--tn-fg-dark); --md-default-fg-color--lighter: var(--tn-comment); --md-default-fg-color--lightest: rgba(var(--tn-fg-rgb), 0.07); --md-default-bg-color: var(--tn-storm); --md-default-bg-color--light: rgba(var(--tn-storm-rgb), 0.7); --md-default-bg-color--lighter: rgba(var(--tn-storm-rgb), 0.3); --md-default-bg-color--lightest: rgba(var(--tn-storm-rgb), 0.12); --md-code-fg-color: var(--tn-fg); --md-code-bg-color: var(--tn-night); --md-code-hl-color: var(--tn-blue2); --md-code-hl-color--light: rgba(var(--tn-blue2-rgb), 0.1); --md-code-hl-number-color: var(--tn-orange); --md-code-hl-special-color: var(--tn-red); --md-code-hl-function-color: var(--tn-blue); --md-code-hl-constant-color: var(--tn-orange); --md-code-hl-keyword-color: var(--tn-purple); --md-code-hl-string-color: var(--tn-green); --md-code-hl-name-color: var(--md-code-fg-color); --md-code-hl-operator-color: var(--tn-cyan); --md-code-hl-punctuation-color: var(--tn-fg-dark); --md-code-hl-comment-color: var(--tn-comment); --md-code-hl-generic-color: var(--tn-fg-dark); --md-code-hl-variable-color: var(--tn-fg); --md-typeset-color: var(--md-default-fg-color); --md-typeset-a-color: var(--tn-blue); --md-typeset-del-color: rgba(var(--tn-red-rgb), 0.15); --md-typeset-ins-color: rgba(var(--tn-green-rgb), 0.15); --md-typeset-kbd-color: var(--tn-storm2); --md-typeset-kbd-accent-color: var(--tn-storm); --md-typeset-kbd-border-color: var(--tn-storm3); --md-typeset-mark-color: rgba(var(--tn-yellow-rgb), 0.35); --md-typeset-table-color: rgba(var(--tn-fg-rgb), 0.12); --md-typeset-table-color--light: rgba(var(--tn-fg-rgb), 0.035); --md-admonition-fg-color: var(--md-default-fg-color); --md-admonition-bg-color: var(--md-default-bg-color); --md-warning-fg-color: var(--tn-night); --md-warning-bg-color: var(--tn-yellow); --md-footer-fg-color: var(--tn-fg); --md-footer-fg-color--light: var(--tn-fg-dark); --md-footer-fg-color--lighter: var(--tn-comment); --md-footer-bg-color: var(--tn-storm1); --md-footer-bg-color--dark: var(--tn-night); --md-shadow-z1: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.2), 0 0 0.0625rem rgba(0, 0, 0, 0.3); --md-shadow-z2: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3), 0 0 0.0625rem rgba(0, 0, 0, 0.45); --md-shadow-z3: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.4), 0 0 0.0625rem rgba(0, 0, 0, 0.55); } /* ── Light (Day) ──────────────────────────────────────────────── */ [data-md-color-scheme="tokyonight:light"] { color-scheme: light; img[src$="#only-dark"], img[src$="#gh-dark-mode-only"] { display: none; } --md-primary-fg-color: var(--tn-day-blue); --md-primary-fg-color--light: var(--tn-day-fg3); --md-primary-fg-color--dark: var(--tn-day-fg); --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); --md-accent-fg-color: var(--tn-day-cyan); --md-accent-fg-color--transparent: rgba(0, 113, 151, 0.1); --md-accent-bg-color: #ffffff; --md-accent-bg-color--light: rgba(255, 255, 255, 0.7); --md-default-fg-color: var(--tn-day-fg); --md-default-fg-color--light: var(--tn-day-fg2); --md-default-fg-color--lighter: var(--tn-day-fg3); --md-default-fg-color--lightest: rgba(var(--tn-day-fg-rgb), 0.07); --md-default-bg-color: var(--tn-day-bg); --md-default-bg-color--light: rgba(var(--tn-day-bg-rgb), 0.7); --md-default-bg-color--lighter: rgba(var(--tn-day-bg-rgb), 0.3); --md-default-bg-color--lightest: rgba(var(--tn-day-bg-rgb), 0.12); --md-code-fg-color: var(--tn-day-fg2); --md-code-bg-color: var(--tn-day-bg2); --md-code-hl-color: var(--tn-day-blue); --md-code-hl-color--light: rgba(46, 125, 233, 0.1); --md-code-hl-number-color: var(--tn-day-orange); --md-code-hl-special-color: var(--tn-day-red); --md-code-hl-function-color: var(--tn-day-blue); --md-code-hl-constant-color: var(--tn-day-orange); --md-code-hl-keyword-color: var(--tn-day-purple); --md-code-hl-string-color: var(--tn-day-green); --md-code-hl-name-color: var(--md-code-fg-color); --md-code-hl-operator-color: var(--tn-day-cyan); --md-code-hl-punctuation-color: var(--tn-day-fg2); --md-code-hl-comment-color: var(--tn-day-comment); --md-code-hl-generic-color: var(--tn-day-fg2); --md-code-hl-variable-color: var(--tn-day-fg); --md-typeset-color: var(--md-default-fg-color); --md-typeset-a-color: var(--tn-day-blue); --md-typeset-del-color: rgba(245, 42, 101, 0.15); --md-typeset-ins-color: rgba(88, 117, 57, 0.15); --md-typeset-kbd-color: var(--tn-day-bg); --md-typeset-kbd-accent-color: #ffffff; --md-typeset-kbd-border-color: var(--tn-day-bg2); --md-typeset-mark-color: rgba(var(--tn-yellow-rgb), 0.35); --md-typeset-table-color: rgba(var(--tn-day-fg-rgb), 0.12); --md-typeset-table-color--light: rgba(var(--tn-day-fg-rgb), 0.035); --md-admonition-fg-color: var(--md-default-fg-color); --md-admonition-bg-color: var(--md-default-bg-color); --md-warning-fg-color: var(--tn-day-fg); --md-warning-bg-color: var(--tn-yellow); --md-footer-fg-color: var(--tn-day-bg); --md-footer-fg-color--light: var(--tn-day-bg2); --md-footer-fg-color--lighter: var(--tn-day-bg3); --md-footer-bg-color: var(--tn-storm); --md-footer-bg-color--dark: var(--tn-night); --md-shadow-z1: 0 0.25rem 0.625rem rgba(var(--tn-day-fg-rgb), 0.05), 0 0 0.0625rem rgba(var(--tn-day-fg-rgb), 0.1); --md-shadow-z2: 0 0.25rem 0.625rem rgba(var(--tn-day-fg-rgb), 0.1), 0 0 0.0625rem rgba(var(--tn-day-fg-rgb), 0.25); --md-shadow-z3: 0 0.25rem 0.625rem rgba(var(--tn-day-fg-rgb), 0.2), 0 0 0.0625rem rgba(var(--tn-day-fg-rgb), 0.35); }