/* ============================================================ THEME TOKENS Each theme defines the same variable set. Swap [data-theme] on to switch — nothing else in the CSS needs to change. ============================================================ */ :root, [data-theme="tokyo-night"] { --theme-label: "Tokyo Night"; --theme-swatch: #9ece6a; --bg: #1a1b26; --bg2: #16161e; --panel-border: #2a2b3d; --green: #9ece6a; --teal: #7dcfff; --yellow: #e0af68; --red: #f7768e; --purple: #bb9af7; --orange: #ff9e64; --comment: #565f89; --text: #c0caf5; --dim: #414868; } [data-theme="dracula"] { --theme-label: "Dracula"; --theme-swatch: #ff79c6; --bg: #282a36; --bg2: #21222c; --panel-border: #383a4a; --green: #50fa7b; --teal: #8be9fd; --yellow: #f1fa8c; --red: #ff5555; --purple: #bd93f9; --orange: #ffb86c; --comment: #6272a4; --text: #f8f8f2; --dim: #44475a; } [data-theme="nord"] { --theme-label: "Nord"; --theme-swatch: #88c0d0; --bg: #2e3440; --bg2: #272c36; --panel-border: #3b4252; --green: #a3be8c; --teal: #88c0d0; --yellow: #ebcb8b; --red: #bf616a; --purple: #b48ead; --orange: #d08770; --comment: #616e88; --text: #e5e9f0; --dim: #4c566a; } [data-theme="gruvbox"] { --theme-label: "Gruvbox"; --theme-swatch: #fabd2f; --bg: #282828; --bg2: #1d2021; --panel-border: #3c3836; --green: #b8bb26; --teal: #8ec07c; --yellow: #fabd2f; --red: #fb4934; --purple: #d3869b; --orange: #fe8019; --comment: #928374; --text: #ebdbb2; --dim: #504945; } [data-theme="solarized-light"] { --theme-label: "Solarized Light"; --theme-swatch: #268bd2; --bg: #fdf6e3; --bg2: #eee8d5; --panel-border: #d3cbb7; --green: #859900; --teal: #268bd2; --yellow: #b58900; --red: #dc322f; --purple: #6c71c4; --orange: #cb4b16; --comment: #93a1a1; --text: #073642; --dim: #ccc4ac; }