/* ======================================================================= * Resin.Tools — Theme palettes + accents (corrected) * Fixes: * 1) Dark selector now matches whether data-theme is set on or * 2) Monochrome theme supports both data-theme="mono" and "monochrome" * Notes: * - html:not([data-theme]) remains as the implicit default (your dark baseline) * ======================================================================= */ /* ======================================================================= * Resin.Tools — Theme palettes + accents * Applies whether data-theme is set on or . * ======================================================================= */ /* ----------------------------------------------------------------------- * Dark * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="dark"]{ --bg:#0b0f14; --panel:rgba(18,26,35,.92); --panel2:rgba(15,22,32,.84); --text:#eaf2ff; --subtitle:#cfcfcf; --title:#f2543f; --muted:#9bb0c6; --fg:#c7c1bb; --yellow:#b02323; --orange:#e06c00; --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.14); --field-bg:rgba(0,0,0,.20); --panelOpen:rgba(18,26,35,.96); --chev:rgba(255,255,255,.45); --warn:#ffb020; --bad:#ff5c5c; --ok:#5dff9f; --shadow2:0 8px 20px rgba(0,0,0,.25); --row-bg:rgba(255,255,255,.04); --row-border:rgba(255,255,255,.07); --row-bg-2:rgba(255,255,255,.03); --row-border-2:rgba(255,255,255,.07); --readonly-bg:rgba(255,255,255,.06); --readonly-border:rgba(255,255,255,.10); --focus-border:rgba(74,163,255,.80); --focus-ring:rgba(74,163,255,.16); --f-var1:var(--ok); --f-var2:var(--warn); --f-var3:var(--title); --f-const:var(--muted); --btn-text:var(--text); --btn-border:rgba(255,255,255,.16); --btn-primary-a:rgba(74,163,255,.22); --btn-primary-b:rgba(74,163,255,.10); --btn-secondary-bg:rgba(255,255,255,.06); --btn-secondary-border:rgba(255,255,255,.16); --btn-danger-bg:rgba(255,92,92,.12); --btn-danger-border:rgba(255,92,92,.28); --bg-glow-a:rgba(74,163,255,.16); --bg-glow-b:rgba(93,255,159,.10); --card-glow-a:rgba(74,163,255,.14); --card-glow-b:rgba(93,255,159,.10); --toggle-on-bg:rgba(74,163,255,.22); --toggle-on-border:rgba(74,163,255,.45); --footer-bg:rgba(11,15,20,.94); --footer-border:rgba(255,255,255,.08); } /* ----------------------------------------------------------------------- * Light * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="light"]{ --bg: #f5f4f3; --panel: rgba(255,255,255,.95); --panel2: rgba(250,249,248,.90); --text: #29282b; --subtitle: #545352; --title: #b3262e; --muted: #666269; --fg: #4a4948; /* near-black text */ --yellow: #bd2830; /* muted gold */ --orange: #d43a36; --border: rgba(74,73,72,.14); --border2: rgba(74,73,72,.22); --field-bg: rgba(74,73,72,.06); --panelOpen: rgba(255,255,255,.95); --chev: rgba(74,73,72,.50); --warn: #d97706; --bad: #dc2626; --ok: #16a34a; --shadow2: 0 6px 18px rgba(0,0,0,.12); --row-bg: rgba(74,73,72,.045); --row-border: rgba(179,38,46,.12); --row-bg-2: rgba(74,73,72,.03); --row-border-2: rgba(74,73,72,.12); --readonly-bg: rgba(74,73,72,.07); --readonly-border: rgba(74,73,72,.16); --focus-border: rgba(179,38,46,.82); --focus-ring: rgba(179,38,46,.15); --f-var1: #16a34a; --f-var2: #d97706; --f-var3: #b3262e; --f-const: #666269; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(179,38,46,.18); --btn-primary-b: rgba(179,38,46,.08); --btn-secondary-bg: rgba(74,73,72,.07); --btn-secondary-border: rgba(74,73,72,.18); --btn-danger-bg: rgba(220,38,38,.12); --btn-danger-border: rgba(220,38,38,.22); --bg-glow-a: rgba(74,73,72,.08); --bg-glow-b: rgba(179,38,46,.07); --card-glow-a: rgba(179,38,46,.08); --card-glow-b: rgba(74,73,72,.05); --toggle-on-bg: rgba(179,38,46,.18); --toggle-on-border: rgba(179,38,46,.38); --footer-bg: rgba(240,239,238,.94); --footer-border: rgba(74,73,72,.14); } /* ----------------------------------------------------------------------- * Industrial Slate (legacy value: mse) * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="mse"]{ --bg: #f5f4f3; --panel: #ffffff; --panel2: #faf9f8; --text: #29282b; --subtitle: #5d7185; --title: #4f6d8b; --muted: #666269; --fg: #4a4948; --yellow: #607d9b; --orange: #718ba5; --border: rgba(74,73,72,.17); --border2: rgba(74,73,72,.24); --field-bg: rgba(74,73,72,.055); --panelOpen: #ffffff; --chev: rgba(96,125,155,.62); --warn: #d97706; --bad: #dc2626; --ok: #16a34a; --shadow2: 0 7px 22px rgba(24,35,44,.10); --row-bg: rgba(74,73,72,.055); --row-border: rgba(96,125,155,.14); --row-bg-2: rgba(96,125,155,.045); --row-border-2: rgba(96,125,155,.13); --readonly-bg: #eef2f5; --readonly-border: rgba(74,73,72,.17); --focus-border: rgba(96,125,155,.86); --focus-ring: rgba(96,125,155,.17); --f-var1: #16a34a; --f-var2: #d97706; --f-var3: #607d9b; --f-const: #666269; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(96,125,155,.20); --btn-primary-b: rgba(96,125,155,.09); --btn-secondary-bg: rgba(74,73,72,.055); --btn-secondary-border: rgba(74,73,72,.20); --btn-danger-bg: rgba(220,38,38,.12); --btn-danger-border: rgba(220,38,38,.22); --bg-glow-a: rgba(96,125,155,.07); --bg-glow-b: rgba(96,125,155,.08); --card-glow-a: rgba(96,125,155,.09); --card-glow-b: rgba(74,73,72,.04); --toggle-on-bg: rgba(96,125,155,.20); --toggle-on-border: rgba(96,125,155,.42); --footer-bg: rgba(238,242,245,.96); --footer-border: rgba(74,73,72,.17); } /* ----------------------------------------------------------------------- * Industrial Slate Dark * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="industrial-slate-dark"]{ --bg: #161b20; --panel: #1e2730; --panel2: #192129; --text: #dce4ea; --subtitle: #91a5b5; --title: #8aa8c2; --muted: #a4b1bc; --fg: #c4d0d9; --yellow: #8aa8c2; --orange: #9bb1c4; --border: rgba(164,177,188,.18); --border2: rgba(138,168,194,.28); --field-bg: rgba(138,168,194,.07); --panelOpen: #202a34; --chev: rgba(164,177,188,.66); --warn: #d6a85f; --bad: #d66f72; --ok: #7eaf94; --shadow2: 0 8px 24px rgba(0,0,0,.28); --row-bg: rgba(138,168,194,.055); --row-border: rgba(138,168,194,.18); --row-bg-2: rgba(138,168,194,.035); --row-border-2: rgba(138,168,194,.14); --readonly-bg: #26313a; --readonly-border: rgba(164,177,188,.18); --focus-border: rgba(138,168,194,.90); --focus-ring: rgba(138,168,194,.20); --f-var1: #7eaf94; --f-var2: #d6a85f; --f-var3: #8aa8c2; --f-const: #a4b1bc; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(138,168,194,.24); --btn-primary-b: rgba(138,168,194,.11); --btn-secondary-bg: rgba(138,168,194,.08); --btn-secondary-border: rgba(138,168,194,.22); --btn-danger-bg: rgba(214,111,114,.15); --btn-danger-border: rgba(214,111,114,.34); --bg-glow-a: rgba(138,168,194,.09); --bg-glow-b: rgba(104,124,142,.06); --card-glow-a: rgba(138,168,194,.10); --card-glow-b: rgba(104,124,142,.05); --toggle-on-bg: rgba(138,168,194,.24); --toggle-on-border: rgba(138,168,194,.48); --footer-bg: rgba(22,27,32,.96); --footer-border: rgba(164,177,188,.18); } /* ----------------------------------------------------------------------- * Gruvbox Dark * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="gruvbox-dark"]{ --bg: #1d2021; --panel: rgba(40,40,40,.97); --panel2: rgba(50,48,47,.94); --text: #ebdbb2; --title: #fb4934; --subtitle: #689d6a; --muted: #83a598; --fg: #83a598; --yellow: #fb4934; --orange: #689d6a; --logo-i: #689d6a; --logo-q: #fb4934; --border: rgba(80,73,69,.82); --border2: rgba(102,92,84,.72); --field-bg: rgba(29,32,33,.78); --panelOpen: rgba(40,40,40,.99); --chev: rgba(189,174,147,.68); --warn: #d79921; --bad: #cc241d; --ok: #689d6a; --shadow2: 0 9px 24px rgba(0,0,0,.42); --focus-border: rgba(131,165,152,.88); --focus-ring: rgba(131,165,152,.18); --row-bg: rgba(189,174,147,.045); --row-border: rgba(102,92,84,.38); --row-bg-2: rgba(29,32,33,.34); --row-border-2: rgba(80,73,69,.48); --readonly-bg: rgba(29,32,33,.58); --readonly-border: rgba(80,73,69,.62); --f-var1: #689d6a; --f-var2: #d79921; --f-var3: #83a598; --f-const: #bdae93; --btn-text: var(--text); --btn-border: rgba(102,92,84,.72); --btn-primary-a: rgba(69,133,136,.30); --btn-primary-b: rgba(69,133,136,.14); --btn-secondary-bg: rgba(104,157,106,.15); --btn-secondary-border: rgba(104,157,106,.36); --btn-danger-bg: rgba(204,36,29,.14); --btn-danger-border: rgba(204,36,29,.34); --bg-glow-a: rgba(69,133,136,.08); --bg-glow-b: rgba(215,153,33,.055); --card-glow-a: rgba(69,133,136,.08); --card-glow-b: rgba(184,187,38,.05); --toggle-on-bg: rgba(69,133,136,.28); --toggle-on-border: rgba(131,165,152,.52); --footer-bg: rgba(29,32,33,.96); --footer-border: rgba(80,73,69,.72); } /* ----------------------------------------------------------------------- * Gruvbox Light (primary = blue, secondary = orange) * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="gruvbox-light"]{ --bg: #fbf1c7; /* bg0 */ --panel: rgba(235,219,178,.92); /* bg1 */ --panel2: rgba(213,196,161,.86); /* bg2 */ --text: #665c54; --title: #2f6f72; /* blue */ --subtitle: #a34400; /* orange */ --muted: #665c54; --fg: #3d3d3d; --yellow: #b57614; --orange: #af3a03; --border: rgba(102,92,84,.35); --border2: rgba(124,111,100,.35); --field-bg: rgba(235,219,178,.70); --panelOpen: rgba(235,219,178,.96); --chev: rgba(60,56,54,.55); --warn: #d79921; --bad: #cc241d; --ok: #98971a; --shadow2: 0 6px 18px rgba(0,0,0,.14); --focus-border: rgba(215,153,33,.80); --focus-ring: rgba(215,153,33,.18); --row-bg: rgba(60,56,54,.04); --row-border: rgba(102,92,84,.22); --row-bg-2: rgba(60,56,54,.03); --row-border-2: rgba(102,92,84,.22); --readonly-bg: rgba(60,56,54,.06); --readonly-border: rgba(102,92,84,.25); --f-var1: #98971a; --f-var2: #d79921; --f-var3: #458588; --f-const: #928374; --btn-text: var(--text); --btn-border: rgba(102,92,84,.28); --btn-primary-a: rgba(69,133,136,.22); /* blue */ --btn-primary-b: rgba(69,133,136,.10); --btn-secondary-bg: rgba(214,93,14,.16); /* orange */ --btn-secondary-border: rgba(214,93,14,.38); --btn-danger-bg: rgba(204,36,29,.14); --btn-danger-border: rgba(204,36,29,.28); --bg-glow-a: rgba(214,93,14,.10); --bg-glow-b: rgba(152,151,26,.08); --card-glow-a: rgba(214,93,14,.10); --card-glow-b: rgba(152,151,26,.08); --toggle-on-bg: rgba(215,153,33,.18); --toggle-on-border: rgba(215,153,33,.38); --footer-bg: rgba(251,241,199,.92); --footer-border: rgba(102,92,84,.28); } /* ----------------------------------------------------------------------- * Nord * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="nord"]{ --bg: #2e3440; --panel: rgba(59,66,82,.95); --panel2: rgba(67,76,94,.88); --text: #eceff4; --subtitle: #a3be8c; --title: #88c0d0; --muted: #d8dee9; --border: rgba(76,86,106,.55); --border2: rgba(94,129,172,.35); --field-bg: rgba(67,76,94,.62); --panelOpen: rgba(59,66,82,.98); --chev: rgba(236,239,244,.55); --fg: #eceff4; --yellow: #ebcb8b; --orange: #d08770; --warn: #ebcb8b; --bad: #bf616a; --ok: #a3be8c; --shadow2: 0 8px 20px rgba(0,0,0,.30); --row-bg: rgba(216,222,233,.055); --row-border: rgba(94,129,172,.22); --row-bg-2: rgba(136,192,208,.035); --row-border-2: rgba(76,86,106,.42); --readonly-bg: rgba(46,52,64,.48); --readonly-border: rgba(94,129,172,.28); --focus-border: rgba(136,192,208,.85); --focus-ring: rgba(136,192,208,.18); --f-var1: #a3be8c; --f-var2: #ebcb8b; --f-var3: #88c0d0; --f-const: #81a1c1; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(136,192,208,.22); --btn-primary-b: rgba(136,192,208,.10); --btn-secondary-bg: rgba(163,190,140,.14); --btn-secondary-border: rgba(163,190,140,.30); --btn-danger-bg: rgba(191,97,106,.14); --btn-danger-border: rgba(191,97,106,.26); --bg-glow-a: rgba(136,192,208,.12); --bg-glow-b: rgba(163,190,140,.08); --card-glow-a: rgba(136,192,208,.14); --card-glow-b: rgba(163,190,140,.10); --toggle-on-bg: rgba(136,192,208,.22); --toggle-on-border: rgba(136,192,208,.45); --footer-bg: rgba(46,52,64,.92); --footer-border: rgba(76,86,106,.55); } /* ----------------------------------------------------------------------- * Tokyo Night * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="tokyo-night"]{ --bg: #1a1b26; --panel: rgba(36,40,59,.95); --panel2: rgba(41,46,66,.88); --text: #c0caf5; --subtitle: #9ece6a; --title: #7aa2f7; --muted: #a9b1d6; --border: rgba(65,72,104,.55); --border2: rgba(122,162,247,.30); --field-bg: rgba(41,46,66,.62); --panelOpen: rgba(36,40,59,.98); --chev: rgba(192,202,245,.55); --fg: #c0caf5; /* foreground */ --yellow: #e0af68; /* warm accent */ --orange: #ff9e64; --warn: #e0af68; --bad: #f7768e; --ok: #9ece6a; --shadow2: 0 8px 22px rgba(0,0,0,.30); --row-bg: rgba(169,177,214,.05); --row-border: rgba(122,162,247,.20); --row-bg-2: rgba(122,162,247,.035); --row-border-2: rgba(65,72,104,.44); --readonly-bg: rgba(26,27,38,.48); --readonly-border: rgba(122,162,247,.24); --focus-border: rgba(122,162,247,.85); --focus-ring: rgba(122,162,247,.18); --f-var1: #9ece6a; --f-var2: #e0af68; --f-var3: #7aa2f7; --f-const: #a9b1d6; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(122,162,247,.22); --btn-primary-b: rgba(122,162,247,.10); --btn-secondary-bg: rgba(158,206,106,.14); --btn-secondary-border: rgba(158,206,106,.30); --btn-danger-bg: rgba(247,118,142,.14); --btn-danger-border: rgba(247,118,142,.26); --bg-glow-a: rgba(122,162,247,.12); --bg-glow-b: rgba(158,206,106,.08); --card-glow-a: rgba(122,162,247,.14); --card-glow-b: rgba(158,206,106,.10); --toggle-on-bg: rgba(122,162,247,.22); --toggle-on-border: rgba(122,162,247,.45); --footer-bg: rgba(26,27,38,.92); --footer-border: rgba(65,72,104,.55); } /* ----------------------------------------------------------------------- * Dracula * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="dracula"]{ --bg: #282a36; --panel: rgba(68,71,90,.95); --panel2: rgba(52,55,70,.88); --text: #f8f8f2; --subtitle: #50fa7b; --title: #bd93f9; --muted: #c7c3e0; --border: rgba(98,114,164,.45); --border2: rgba(189,147,249,.28); --field-bg: rgba(68,71,90,.58); --panelOpen: rgba(68,71,90,.98); --chev: rgba(248,248,242,.55); --fg: #f8f8f2; --yellow: #f1fa8c; --orange: #ffb86c; --warn: #f1fa8c; --bad: #ff5555; --ok: #50fa7b; --shadow2: 0 8px 22px rgba(0,0,0,.32); --row-bg: rgba(248,248,242,.045); --row-border: rgba(189,147,249,.20); --row-bg-2: rgba(189,147,249,.035); --row-border-2: rgba(98,114,164,.38); --readonly-bg: rgba(40,42,54,.46); --readonly-border: rgba(189,147,249,.24); --focus-border: rgba(189,147,249,.85); --focus-ring: rgba(189,147,249,.18); --f-var1: #50fa7b; --f-var2: #f1fa8c; --f-var3: #bd93f9; --f-const: #6272a4; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(189,147,249,.22); --btn-primary-b: rgba(189,147,249,.10); --btn-secondary-bg: rgba(80,250,123,.14); --btn-secondary-border: rgba(80,250,123,.30); --btn-danger-bg: rgba(255,85,85,.14); --btn-danger-border: rgba(255,85,85,.26); --bg-glow-a: rgba(189,147,249,.12); --bg-glow-b: rgba(80,250,123,.08); --card-glow-a: rgba(189,147,249,.14); --card-glow-b: rgba(80,250,123,.10); --toggle-on-bg: rgba(189,147,249,.22); --toggle-on-border: rgba(189,147,249,.45); --footer-bg: rgba(40,42,54,.92); --footer-border: rgba(98,114,164,.45); } /* ----------------------------------------------------------------------- * Solarized Dark * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="solarized-dark"]{ --bg: #002b36; --panel: rgba(7,54,66,.95); --panel2: rgba(0,43,54,.88); --text: #eee8d5; --subtitle: #859900; --title: #3aa6e8; --muted: #93a1a1; --border: rgba(88,110,117,.45); --border2: rgba(38,139,210,.28); --field-bg: rgba(7,54,66,.58); --panelOpen: rgba(7,54,66,.98); --chev: rgba(238,232,213,.55); --fg: #eee8d5; --yellow: #b58900; --orange: #cb4b16; --warn: #b58900; --bad: #dc322f; --ok: #859900; --shadow2: 0 8px 22px rgba(0,0,0,.30); --row-bg: rgba(147,161,161,.05); --row-border: rgba(38,139,210,.20); --row-bg-2: rgba(38,139,210,.03); --row-border-2: rgba(88,110,117,.38); --readonly-bg: rgba(0,43,54,.52); --readonly-border: rgba(88,110,117,.42); --focus-border: rgba(38,139,210,.85); --focus-ring: rgba(38,139,210,.16); --f-var1: #859900; --f-var2: #b58900; --f-var3: #3aa6e8; --f-const: #93a1a1; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(38,139,210,.18); --btn-primary-b: rgba(38,139,210,.08); --btn-secondary-bg: rgba(133,153,0,.12); --btn-secondary-border: rgba(133,153,0,.26); --btn-danger-bg: rgba(220,50,47,.14); --btn-danger-border: rgba(220,50,47,.26); --bg-glow-a: rgba(38,139,210,.10); --bg-glow-b: rgba(133,153,0,.07); --card-glow-a: rgba(38,139,210,.10); --card-glow-b: rgba(133,153,0,.07); --toggle-on-bg: rgba(38,139,210,.20); --toggle-on-border: rgba(38,139,210,.42); --footer-bg: rgba(0,43,54,.92); --footer-border: rgba(88,110,117,.45); } /* ----------------------------------------------------------------------- * Solarized Light * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="solarized-light"]{ --bg: #fdf6e3; --panel: rgba(255,255,255,.96); --panel2: rgba(238,232,213,.90); --text: #073642; --subtitle: #5f7000; --title: #1f6f9f; --muted: #586e75; --border: rgba(147,161,161,.45); --border2: rgba(38,139,210,.28); --field-bg: rgba(238,232,213,.70); --panelOpen: rgba(255,255,255,.96); --chev: rgba(7,54,66,.55); --fg: #073642; --yellow: #b58900; --orange: #cb4b16; --shadow2: 0 6px 18px rgba(0,0,0,.14); --warn: #b58900; --bad: #dc322f; --ok: #859900; --row-bg: rgba(7,54,66,.045); --row-border: rgba(88,110,117,.24); --row-bg-2: rgba(7,54,66,.03); --row-border-2: rgba(88,110,117,.20); --focus-border: rgba(38,139,210,.85); --focus-ring: rgba(38,139,210,.14); --readonly-bg: rgba(17,24,39,.04); --readonly-border: rgba(17,24,39,.18); --f-var1: #859900; --f-var2: #b58900; --f-var3: #268bd2; --f-const: #586e75; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(38,139,210,.16); --btn-primary-b: rgba(38,139,210,.07); --btn-secondary-bg: rgba(133,153,0,.10); --btn-secondary-border: rgba(133,153,0,.22); --btn-danger-bg: rgba(220,50,47,.12); --btn-danger-border: rgba(220,50,47,.22); --bg-glow-a: rgba(38,139,210,.08); --bg-glow-b: rgba(133,153,0,.06); --card-glow-a: rgba(38,139,210,.08); --card-glow-b: rgba(133,153,0,.06); --toggle-on-bg: rgba(38,139,210,.14); --toggle-on-border: rgba(38,139,210,.30); --footer-bg: rgba(253,246,227,.92); --footer-border: rgba(147,161,161,.45); } /* ----------------------------------------------------------------------- * Catppuccin Mocha * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="catppuccin-mocha"]{ --bg: #1e1e2e; --panel: rgba(49,50,68,.95); --panel2: rgba(69,71,90,.88); --text: #cdd6f4; --subtitle: #a6e3a1; --title: #89b4fa; --muted: #a6adc8; --border: rgba(88,91,112,.55); --border2: rgba(137,180,250,.30); --field-bg: rgba(49,50,68,.62); --panelOpen: rgba(49,50,68,.98); --chev: rgba(205,214,244,.55); --fg: #cdd6f4; --yellow: #f9e2af; --orange: #fab387; /* peach */ --warn: #f9e2af; --bad: #f38ba8; --ok: #a6e3a1; --shadow2: 0 8px 22px rgba(0,0,0,.30); --row-bg: rgba(205,214,244,.045); --row-border: rgba(137,180,250,.20); --row-bg-2: rgba(137,180,250,.03); --row-border-2: rgba(88,91,112,.42); --readonly-bg: rgba(30,30,46,.48); --readonly-border: rgba(137,180,250,.24); --focus-border: rgba(137,180,250,.85); --focus-ring: rgba(137,180,250,.18); --f-var1: #a6e3a1; --f-var2: #f9e2af; --f-var3: #89b4fa; --f-const: #a6adc8; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(137,180,250,.20); --btn-primary-b: rgba(137,180,250,.09); --btn-secondary-bg: rgba(166,227,161,.14); --btn-secondary-border: rgba(166,227,161,.28); --btn-danger-bg: rgba(243,139,168,.14); --btn-danger-border: rgba(243,139,168,.26); --bg-glow-a: rgba(137,180,250,.12); --bg-glow-b: rgba(166,227,161,.08); --card-glow-a: rgba(137,180,250,.14); --card-glow-b: rgba(166,227,161,.10); --toggle-on-bg: rgba(137,180,250,.22); --toggle-on-border: rgba(137,180,250,.45); --footer-bg: rgba(30,30,46,.92); --footer-border: rgba(88,91,112,.55); } /* ----------------------------------------------------------------------- * Catppuccin Latte * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="catppuccin-latte"]{ --bg: #eff1f5; --panel: rgba(255,255,255,.96); --panel2: rgba(230,233,239,.90); --text: #4c4f69; --subtitle: #28721f; --title: #1855c9; --muted: #66697f; --border: rgba(156,160,176,.40); --border2: rgba(30,102,245,.22); --field-bg: rgba(220,224,232,.70); --panelOpen: rgba(255,255,255,.96); --chev: rgba(76,79,105,.55); --fg: #4c4f69; --yellow: #df8e1d; --orange: #fe640b; /* peach */ --warn: #df8e1d; --bad: #d20f39; --ok: #40a02b; --shadow2: 0 6px 18px rgba(0,0,0,.12); --row-bg: rgba(76,79,105,.055); --row-border: rgba(156,160,176,.30); --row-bg-2: rgba(76,79,105,.035); --row-border-2: rgba(156,160,176,.24); --focus-border: rgba(30,102,245,.85); --focus-ring: rgba(30,102,245,.14); --readonly-bg: rgba(17,24,39,.04); --readonly-border: rgba(17,24,39,.18); --f-var1: #40a02b; --f-var2: #df8e1d; --f-var3: #1e66f5; --f-const: #66697f; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(30,102,245,.14); --btn-primary-b: rgba(30,102,245,.06); --btn-secondary-bg: rgba(64,160,43,.12); --btn-secondary-border: rgba(64,160,43,.22); --btn-danger-bg: rgba(210,15,57,.12); --btn-danger-border: rgba(210,15,57,.22); --bg-glow-a: rgba(38,139,210,.08); --bg-glow-b: rgba(133,153,0,.06); --card-glow-a: rgba(38,139,210,.08); --card-glow-b: rgba(133,153,0,.06); --toggle-on-bg: rgba(30,102,245,.16); --toggle-on-border: rgba(30,102,245,.35); --footer-bg: rgba(239,241,245,.92); --footer-border: rgba(156,160,176,.40); } /* ----------------------------------------------------------------------- * Amber * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="amber"]{ --bg: #0b0a06; --panel: rgba(20,16,10,.92); --panel2: rgba(18,14,8,.78); --text: #fffbeb; --subtitle: #f59e0b; --title: #fbbf24; --muted: rgba(252,211,77,.85); --border: rgba(251,191,36,.22); --border2: rgba(251,191,36,.28); --field-bg: rgba(251,191,36,.10); --panelOpen: rgba(20,16,10,.95); --chev: rgba(255,251,235,.55); --fg: #ffbf00; --yellow: #ffcc33; --orange: #ff8c00; --warn: #f59e0b; --bad: #ef4444; --ok: #84cc16; --shadow2: 0 8px 22px rgba(0,0,0,.32); --row-bg: rgba(251,191,36,.055); --row-border: rgba(251,191,36,.20); --row-bg-2: rgba(245,158,11,.035); --row-border-2: rgba(251,191,36,.16); --readonly-bg: rgba(251,191,36,.065); --readonly-border: rgba(251,191,36,.22); --focus-border: rgba(251,191,36,.85); --focus-ring: rgba(251,191,36,.18); --f-var1: #84cc16; --f-var2: #fbbf24; --f-var3: #f59e0b; --f-const: rgba(252,211,77,.90); --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(251,191,36,.20); --btn-primary-b: rgba(251,191,36,.09); --btn-secondary-bg: rgba(245,158,11,.14); --btn-secondary-border: rgba(245,158,11,.30); --btn-danger-bg: rgba(239,68,68,.14); --btn-danger-border: rgba(239,68,68,.26); --bg-glow-a: rgba(251,191,36,.10); --bg-glow-b: rgba(245,158,11,.07); --card-glow-a: rgba(251,191,36,.12); --card-glow-b: rgba(245,158,11,.08); --toggle-on-bg: rgba(251,191,36,.22); --toggle-on-border: rgba(251,191,36,.45); --footer-bg: rgba(11,10,6,.92); --footer-border: rgba(251,191,36,.22); } /* ----------------------------------------------------------------------- * High Contrast * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="high-contrast"]{ --bg: #000000; --panel: rgba(0,0,0,.95); --panel2: rgba(0,0,0,.85); --text: #ffffff; --subtitle: #ffffff; --title: #ffffff; --muted: #d1d5db; --border: rgba(255,255,255,.35); --border2: rgba(255,255,255,.45); --field-bg: rgba(255,255,255,.10); --panelOpen: rgba(0,0,0,.95); --chev: rgba(255,255,255,.75); --fg: #ffffff; --yellow: #ffff00; --orange: #ff9900; --warn: #fbbf24; --bad: #ef4444; --ok: #22c55e; --shadow2: 0 10px 28px rgba(0,0,0,.55); --row-bg: rgba(255,255,255,.08); --row-border: rgba(255,255,255,.38); --row-bg-2: rgba(255,255,255,.055); --row-border-2: rgba(255,255,255,.32); --readonly-bg: rgba(255,255,255,.08); --readonly-border: rgba(255,255,255,.42); --focus-border: rgba(255,255,255,.95); --focus-ring: rgba(255,255,255,.22); --f-var1: #ffffff; --f-var2: #ffffff; --f-var3: #ffffff; --f-const: #ffffff; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(255,255,255,.10); --btn-primary-b: rgba(255,255,255,.10); --btn-secondary-bg: rgba(255,255,255,.08); --btn-secondary-border: rgba(255,255,255,.30); --btn-danger-bg: rgba(255,255,255,.08); --btn-danger-border: rgba(255,255,255,.30); --bg-glow-a: rgba(0,0,0,0); --bg-glow-b: rgba(0,0,0,0); --card-glow-a: rgba(0,0,0,0); --card-glow-b: rgba(0,0,0,0); --toggle-on-bg: rgba(255,255,255,.20); --toggle-on-border: rgba(255,255,255,.55); --footer-bg: rgba(0,0,0,.98); --footer-border: rgba(255,255,255,.35); } /* ----------------------------------------------------------------------- * Monochrome * ----------------------------------------------------------------------- */ :where(html, body)[data-theme="mono"], :where(html, body)[data-theme="monochrome"]{ --bg: #f6f6f6; --panel: rgba(255,255,255,.96); --panel2: rgba(245,245,245,.92); --text: #111827; --subtitle: #374151; --title: #111827; --muted: #374151; --border: rgba(17,24,39,.18); --border2: rgba(17,24,39,.22); --field-bg: rgba(17,24,39,.06); --panelOpen: rgba(255,255,255,.96); --chev: rgba(17,24,39,.55); --fg: #1f2937; --yellow: #6b7280; --orange: #111827; --warn: #111827; --bad: #111827; --ok: #111827; --shadow2: 0 6px 18px rgba(0,0,0,.10); --row-bg: rgba(17,24,39,.045); --row-border: rgba(17,24,39,.18); --row-bg-2: rgba(17,24,39,.025); --row-border-2: rgba(17,24,39,.14); --focus-border: rgba(17,24,39,.85); --focus-ring: rgba(17,24,39,.10); --readonly-bg: rgba(17,24,39,.04); --readonly-border: rgba(17,24,39,.18); --f-var1: #111827; --f-var2: #111827; --f-var3: #111827; --f-const: #374151; --btn-text: var(--text); --btn-border: var(--border2); --btn-primary-a: rgba(17,24,39,.06); --btn-primary-b: rgba(17,24,39,.06); --btn-secondary-bg: rgba(17,24,39,.04); --btn-secondary-border: rgba(17,24,39,.14); --btn-danger-bg: rgba(17,24,39,.04); --btn-danger-border: rgba(17,24,39,.14); --bg-glow-a: rgba(17,24,39,.035); --bg-glow-b: rgba(17,24,39,.02); --card-glow-a: rgba(17,24,39,.035); --card-glow-b: rgba(17,24,39,.02); --toggle-on-bg: rgba(17,24,39,.12); --toggle-on-border: rgba(17,24,39,.25); --footer-bg: rgba(246,246,246,.92); --footer-border: rgba(17,24,39,.18); }