feat: integrate nightfox.nvim themes into Open Source Classics

* feat: integrate nightfox.nvim themes into Open Source Classics

Agent-Logs-Url: https://github.com/nisrael/psysonic/sessions/410b9047-62de-4c0b-a6bc-1dc6f8247164

Co-authored-by: nisrael <66925+nisrael@users.noreply.github.com>

* i18n: add Nightfox to theme FAQ in de + zh

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: nisrael <66925+nisrael@users.noreply.github.com>
Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -32,7 +32,7 @@ Designed specifically for users hosting their own music via Navidrome or other S
 
 ## ✨ Features
 
-- 🎨 **Gorgeous UI**: A large selection of beautiful, lean themes for every taste — Open Source Classics (Catppuccin, Nord, Gruvbox), Operating Systems, Games, Movies, Series, Psysonic originals, and Mediaplayer — with smooth glassmorphism effects and micro-animations.
+- 🎨 **Gorgeous UI**: A large selection of beautiful, lean themes for every taste — Open Source Classics (Catppuccin, Nord, Gruvbox, Nightfox), Operating Systems, Games, Movies, Series, Psysonic originals, and Mediaplayer — with smooth glassmorphism effects and micro-animations.
 - ⚡ **Blazing Fast**: Built with Rust & Tauri — native audio engine (rodio), minimal RAM usage compared to typical Electron apps.
 - 🌍 **Internationalization (i18n)**: Fully translated into English, German, French, Dutch, and Chinese.
 - 📻 **Live "Now Playing"**: See what other users on your server are currently listening to in real-time.

src/components/ThemePicker.tsx

@@ -42,9 +42,13 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
     group: 'Open Source Classics',
     themes: [
       { id: 'nord-aurora',          label: 'Aurora',       bg: '#3b4252', card: '#434c5e', accent: '#b48ead' },
+      { id: 'carbonfox',            label: 'Carbonfox',    bg: '#161616', card: '#1c1c1c', accent: '#be95ff' },
       { id: 'gruvbox-dark-hard',    label: 'Dark Hard',    bg: '#1d2021', card: '#3c3836', accent: '#fabd2f' },
       { id: 'gruvbox-dark-medium',  label: 'Dark Medium',  bg: '#282828', card: '#3c3836', accent: '#fabd2f' },
       { id: 'gruvbox-dark-soft',    label: 'Dark Soft',    bg: '#32302f', card: '#45403d', accent: '#fabd2f' },
+      { id: 'dawnfox',              label: 'Dawnfox',      bg: '#faf4ed', card: '#ebe0df', accent: '#907aa9' },
+      { id: 'dayfox',               label: 'Dayfox',       bg: '#f6f2ee', card: '#dbd1dd', accent: '#2848a9' },
+      { id: 'duskfox',              label: 'Duskfox',      bg: '#232136', card: '#2d2a45', accent: '#c4a7e7' },
       { id: 'frappe',               label: 'Frappé',       bg: '#303446', card: '#414559', accent: '#ca9ee6' },
       { id: 'nord-frost',           label: 'Frost',        bg: '#1e2d3d', card: '#243447', accent: '#88c0d0' },
       { id: 'latte',                label: 'Latte',        bg: '#eff1f5', card: '#ccd0da', accent: '#8839ef' },
@@ -53,8 +57,11 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
       { id: 'gruvbox-light-soft',   label: 'Light Soft',   bg: '#f2e5bc', card: '#ebdbb2', accent: '#b57614' },
       { id: 'macchiato',            label: 'Macchiato',    bg: '#24273a', card: '#363a4f', accent: '#c6a0f6' },
       { id: 'mocha',                label: 'Mocha',        bg: '#1e1e2e', card: '#313244', accent: '#cba6f7' },
+      { id: 'nightfox',             label: 'Nightfox',     bg: '#192330', card: '#212e3f', accent: '#719cd6' },
+      { id: 'nordfox',              label: 'Nordfox',      bg: '#2e3440', card: '#39404f', accent: '#81a1c1' },
       { id: 'nord',                 label: 'Polar Night',  bg: '#3b4252', card: '#434c5e', accent: '#88c0d0' },
       { id: 'nord-snowstorm',       label: 'Snowstorm',    bg: '#e5e9f0', card: '#eceff4', accent: '#5e81ac' },
+      { id: 'terafox',              label: 'Terafox',      bg: '#152528', card: '#1d3337', accent: '#a1cdd8' },
     ],
   },
   {

src/locales/de.ts

@@ -548,7 +548,7 @@ export const deTranslation = {
     a11: 'Das Banner oben auf der Startseite wählt zufällige Alben aus der Bibliothek und rotiert alle 10 Sekunden weiter. Mit den Punkten kann man manuell springen, Klick auf das Banner öffnet das Album.',
     s4: 'Einstellungen',
     q12: 'Wie ändere ich das Theme?',
-    a12: 'Einstellungen → Design. Eine große Auswahl an Themes in 8 Gruppen: Psysonic Themes, Mediaplayer, Betriebssysteme, Spiele, Filme, Serien, Social Media und Open-Source-Classics (Catppuccin, Nord, Gruvbox).',
+    a12: 'Einstellungen → Design. Eine große Auswahl an Themes in 8 Gruppen: Psysonic Themes, Mediaplayer, Betriebssysteme, Spiele, Filme, Serien, Social Media und Open-Source-Classics (Catppuccin, Nord, Gruvbox, Nightfox).',
     q13: 'Wie ändere ich die Sprache?',
     a13: 'Einstellungen → Sprache. Englisch, Deutsch, Französisch, Niederländisch und Chinesisch werden unterstützt.',
     q15: 'Wie lege ich einen Download-Ordner fest?',

src/locales/en.ts

@@ -548,7 +548,7 @@ export const enTranslation = {
     a11: 'The banner at the top of the home page randomly picks albums from your library and rotates through them every 10 seconds. Click the dots to jump to a specific one, or click the banner to open the album.',
     s4: 'Settings',
     q12: 'How do I change the theme?',
-    a12: 'Settings → Theme. Choose from a large selection of themes across 8 groups: Psysonic Themes, Mediaplayer, Operating Systems, Games, Movies, Series, Social Media, and Open Source Classics (Catppuccin, Nord, Gruvbox).',
+    a12: 'Settings → Theme. Choose from a large selection of themes across 8 groups: Psysonic Themes, Mediaplayer, Operating Systems, Games, Movies, Series, Social Media, and Open Source Classics (Catppuccin, Nord, Gruvbox, Nightfox).',
     q13: 'How do I change the language?',
     a13: 'Settings → Language. English, German, French, Dutch, Chinese, Norwegian, and Russian are supported.',
     q15: 'How do I set a download folder?',

src/locales/fr.ts

@@ -548,7 +548,7 @@ export const frTranslation = {
     a11: 'La bannière en haut de la page d\'accueil sélectionne aléatoirement des albums de votre bibliothèque et les fait défiler toutes les 10 secondes. Cliquez sur les points pour accéder à un album spécifique.',
     s4: 'Paramètres',
     q12: 'Comment changer le thème ?',
-    a12: 'Paramètres → Thème. Un grand choix de thèmes en 8 groupes : Psysonic Themes, Mediaplayer, Systèmes d\'exploitation, Jeux, Films, Séries, Réseaux sociaux et Open Source Classics (Catppuccin, Nord, Gruvbox).',
+    a12: 'Paramètres → Thème. Un grand choix de thèmes en 8 groupes : Psysonic Themes, Mediaplayer, Systèmes d\'exploitation, Jeux, Films, Séries, Réseaux sociaux et Open Source Classics (Catppuccin, Nord, Gruvbox, Nightfox).',
     q13: 'Comment changer la langue ?',
     a13: 'Paramètres → Langue. L\'anglais, l\'allemand, le français, le néerlandais et le chinois sont pris en charge.',
     q15: 'Comment définir un dossier de téléchargement ?',

src/locales/nl.ts

@@ -548,7 +548,7 @@ export const nlTranslation = {
     a11: 'De banner bovenaan de startpagina kiest willekeurig albums uit je bibliotheek en wisselt deze elke 10 seconden af. Klik op de puntjes om naar een specifiek album te springen.',
     s4: 'Instellingen',
     q12: 'Hoe verander ik het thema?',
-    a12: 'Instellingen → Thema. Een ruime keuze aan thema\'s in 8 groepen: Psysonic Themes, Mediaplayer, Besturingssystemen, Games, Films, Series, Social Media en Open Source Classics (Catppuccin, Nord, Gruvbox).',
+    a12: 'Instellingen → Thema. Een ruime keuze aan thema\'s in 8 groepen: Psysonic Themes, Mediaplayer, Besturingssystemen, Games, Films, Series, Social Media en Open Source Classics (Catppuccin, Nord, Gruvbox, Nightfox).',
     q13: 'Hoe verander ik de taal?',
     a13: 'Instellingen → Taal. Engels, Duits, Frans, Nederlands en Chinees worden momenteel ondersteund.',
     q15: 'Hoe stel ik een downloadmap in?',

src/locales/zh.ts

@@ -544,7 +544,7 @@ export const zhTranslation = {
     a11: '首页顶部的横幅会随机从您的音乐库中选择专辑，每 10 秒轮换一次。点击圆点可跳转到特定专辑，或点击横幅打开专辑。',
     s4: '设置',
     q12: '如何更改主题？',
-    a12: '设置 → 主题。从 8 个分组中的大量主题中选择：Psysonic 主题、媒体播放器、操作系统、游戏、电影、电视剧、社交媒体，以及开源经典（Catppuccin、Nord、Gruvbox）。',
+    a12: '设置 → 主题。从 8 个分组中的大量主题中选择：Psysonic 主题、媒体播放器、操作系统、游戏、电影、电视剧、社交媒体，以及开源经典（Catppuccin、Nord、Gruvbox、Nightfox）。',
     q13: '如何更改语言？',
     a13: '设置 → 语言。支持英语、德语、法语、荷兰语和中文。',
     q15: '如何设置下载文件夹？',

src/store/themeStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave' | 'wnamp' | 'poison' | 'nucleo' | 'muma-jukebox' | 'winmedplayer' | 'p-dvd' | 'vintage-tube-radio' | 'neon-drift' | 'aero-glass' | 'luna-teal' | 'w98' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'spotless' | 'dzr0' | 'cupertino-beats' | 'lambda-17' | 'gw1' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'stark-hud' | 'blade' | 'heisenberg' | 'ice-and-fire' | 'doh-matic' | 't-800' | 'dune' | 'tetrastack' | 'the-book' | 'readit' | 'insta' | 'hill-valley-85' | 'turtle-power' | 'w3-1' | 'aqua-quartz' | 'spider-tech' | 'dos' | 'unix' | 'jayfin' | 'horde' | 'alliance' | 'w11' | 'w10' | 'north-park' | 'dark-side-of-the-moon' | 'powerslave';
+type Theme = 'mocha' | 'macchiato' | 'frappe' | 'latte' | 'nord' | 'nord-snowstorm' | 'nord-frost' | 'nord-aurora' | 'psychowave' | 'wnamp' | 'poison' | 'nucleo' | 'muma-jukebox' | 'winmedplayer' | 'p-dvd' | 'vintage-tube-radio' | 'neon-drift' | 'aero-glass' | 'luna-teal' | 'w98' | 'cupertino-light' | 'cupertino-dark' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'spotless' | 'dzr0' | 'cupertino-beats' | 'lambda-17' | 'gw1' | 'grand-theft-audio' | 'v-tactical' | 'nightcity-2077' | 'middle-earth' | 'morpheus' | 'stark-hud' | 'blade' | 'heisenberg' | 'ice-and-fire' | 'doh-matic' | 't-800' | 'dune' | 'tetrastack' | 'the-book' | 'readit' | 'insta' | 'hill-valley-85' | 'turtle-power' | 'w3-1' | 'aqua-quartz' | 'spider-tech' | 'dos' | 'unix' | 'jayfin' | 'horde' | 'alliance' | 'w11' | 'w10' | 'north-park' | 'dark-side-of-the-moon' | 'powerslave' | 'nightfox' | 'dayfox' | 'dawnfox' | 'duskfox' | 'nordfox' | 'terafox' | 'carbonfox';
 
 interface ThemeState {
   theme: Theme;

src/styles/theme.css

@@ -13713,3 +13713,374 @@ input[type="range"]:hover::-webkit-slider-thumb {
 [data-theme='powerslave'] ::-webkit-scrollbar-thumb:hover {
   background: #C8800A;
 }
+
+/* ─── Nightfox ─── */
+[data-theme='nightfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23cdcecf%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #131a24;
+  --ctp-mantle: #131a24;
+  --ctp-base: #192330;
+  --ctp-surface0: #212e3f;
+  --ctp-surface1: #29394f;
+  --ctp-surface2: #39506d;
+  --ctp-overlay0: #71839b;
+  --ctp-overlay1: #71839b;
+  --ctp-overlay2: #aeafb0;
+  --ctp-text: #cdcecf;
+  --ctp-subtext1: #aeafb0;
+  --ctp-subtext0: #71839b;
+  --ctp-mauve: #9d79d6;
+  --ctp-lavender: #719cd6;
+  --ctp-pink: #d67ad2;
+  --ctp-flamingo: #d67ad2;
+  --ctp-rosewater: #d67ad2;
+  --ctp-blue: #719cd6;
+  --ctp-sapphire: #9d79d6;
+  --ctp-sky: #63cdcf;
+  --ctp-teal: #63cdcf;
+  --ctp-green: #81b29a;
+  --ctp-yellow: #dbc074;
+  --ctp-peach: #f4a261;
+  --ctp-maroon: #c94f6d;
+  --ctp-red: #c94f6d;
+
+  --bg-app: #192330;
+  --bg-sidebar: #131a24;
+  --bg-card: #212e3f;
+  --bg-hover: #29394f;
+  --bg-player: #131a24;
+  --bg-glass: rgba(25, 35, 48, 0.75);
+  --accent: #719cd6;
+  --accent-dim: rgba(113, 156, 214, 0.15);
+  --accent-glow: rgba(113, 156, 214, 0.3);
+  --text-primary: #cdcecf;
+  --text-secondary: #aeafb0;
+  --text-muted: #738091;
+  --border: #29394f;
+  --border-subtle: #212e3f;
+  --border-dropdown: #39506d;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #81b29a;
+  --warning: #dbc074;
+  --danger: #c94f6d;
+}
+
+/* ─── Dayfox ─── */
+[data-theme='dayfox'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233d2b5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #e4dcd4;
+  --ctp-mantle: #e4dcd4;
+  --ctp-base: #f6f2ee;
+  --ctp-surface0: #dbd1dd;
+  --ctp-surface1: #d3c7bb;
+  --ctp-surface2: #aab0ad;
+  --ctp-overlay0: #837a72;
+  --ctp-overlay1: #643f61;
+  --ctp-overlay2: #3d2b5a;
+  --ctp-text: #3d2b5a;
+  --ctp-subtext1: #302b5d;
+  --ctp-subtext0: #643f61;
+  --ctp-mauve: #6e33ce;
+  --ctp-lavender: #2848a9;
+  --ctp-pink: #a440b5;
+  --ctp-flamingo: #a5222f;
+  --ctp-rosewater: #955f61;
+  --ctp-blue: #2848a9;
+  --ctp-sapphire: #287980;
+  --ctp-sky: #287980;
+  --ctp-teal: #287980;
+  --ctp-green: #396847;
+  --ctp-yellow: #ac5402;
+  --ctp-peach: #955f61;
+  --ctp-maroon: #a5222f;
+  --ctp-red: #a5222f;
+
+  --bg-app: #f6f2ee;
+  --bg-sidebar: #e4dcd4;
+  --bg-card: #dbd1dd;
+  --bg-hover: #d3c7bb;
+  --bg-player: #e4dcd4;
+  --bg-glass: rgba(246, 242, 238, 0.92);
+  --accent: #2848a9;
+  --accent-dim: rgba(40, 72, 169, 0.12);
+  --accent-glow: rgba(40, 72, 169, 0.25);
+  --text-primary: #3d2b5a;
+  --text-secondary: #643f61;
+  --text-muted: #837a72;
+  --border: #d3c7bb;
+  --border-subtle: #dbd1dd;
+  --border-dropdown: #aab0ad;
+  --shadow-dropdown: rgba(0, 0, 0, 0.18);
+  --positive: #396847;
+  --warning: #ac5402;
+  --danger: #a5222f;
+}
+
+/* ─── Dawnfox ─── */
+[data-theme='dawnfox'] {
+  color-scheme: light;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23575279%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #ebe5df;
+  --ctp-mantle: #ebe5df;
+  --ctp-base: #faf4ed;
+  --ctp-surface0: #ebe0df;
+  --ctp-surface1: #ebdfe4;
+  --ctp-surface2: #bdbfc9;
+  --ctp-overlay0: #9893a5;
+  --ctp-overlay1: #a8a3b3;
+  --ctp-overlay2: #625c87;
+  --ctp-text: #575279;
+  --ctp-subtext1: #4c4769;
+  --ctp-subtext0: #625c87;
+  --ctp-mauve: #907aa9;
+  --ctp-lavender: #575279;
+  --ctp-pink: #d685af;
+  --ctp-flamingo: #d7827e;
+  --ctp-rosewater: #d7827e;
+  --ctp-blue: #286983;
+  --ctp-sapphire: #286983;
+  --ctp-sky: #56949f;
+  --ctp-teal: #56949f;
+  --ctp-green: #618774;
+  --ctp-yellow: #ea9d34;
+  --ctp-peach: #d7827e;
+  --ctp-maroon: #b4637a;
+  --ctp-red: #b4637a;
+
+  --bg-app: #faf4ed;
+  --bg-sidebar: #ebe5df;
+  --bg-card: #ebe0df;
+  --bg-hover: #ebdfe4;
+  --bg-player: #ebe5df;
+  --bg-glass: rgba(250, 244, 237, 0.92);
+  --accent: #907aa9;
+  --accent-dim: rgba(144, 122, 169, 0.12);
+  --accent-glow: rgba(144, 122, 169, 0.25);
+  --text-primary: #575279;
+  --text-secondary: #625c87;
+  --text-muted: #9893a5;
+  --border: #ebdfe4;
+  --border-subtle: #ebe0df;
+  --border-dropdown: #bdbfc9;
+  --shadow-dropdown: rgba(0, 0, 0, 0.15);
+  --positive: #618774;
+  --warning: #ea9d34;
+  --danger: #b4637a;
+}
+
+/* ─── Duskfox ─── */
+[data-theme='duskfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e0def4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #191726;
+  --ctp-mantle: #191726;
+  --ctp-base: #232136;
+  --ctp-surface0: #2d2a45;
+  --ctp-surface1: #373354;
+  --ctp-surface2: #4b4673;
+  --ctp-overlay0: #817c9c;
+  --ctp-overlay1: #6e6a86;
+  --ctp-overlay2: #cdcbe0;
+  --ctp-text: #e0def4;
+  --ctp-subtext1: #cdcbe0;
+  --ctp-subtext0: #817c9c;
+  --ctp-mauve: #c4a7e7;
+  --ctp-lavender: #c4a7e7;
+  --ctp-pink: #eb98c3;
+  --ctp-flamingo: #eb6f92;
+  --ctp-rosewater: #ea9a97;
+  --ctp-blue: #569fba;
+  --ctp-sapphire: #569fba;
+  --ctp-sky: #9ccfd8;
+  --ctp-teal: #9ccfd8;
+  --ctp-green: #a3be8c;
+  --ctp-yellow: #f6c177;
+  --ctp-peach: #ea9a97;
+  --ctp-maroon: #eb6f92;
+  --ctp-red: #eb6f92;
+
+  --bg-app: #232136;
+  --bg-sidebar: #191726;
+  --bg-card: #2d2a45;
+  --bg-hover: #373354;
+  --bg-player: #191726;
+  --bg-glass: rgba(35, 33, 54, 0.75);
+  --accent: #c4a7e7;
+  --accent-dim: rgba(196, 167, 231, 0.15);
+  --accent-glow: rgba(196, 167, 231, 0.3);
+  --text-primary: #e0def4;
+  --text-secondary: #cdcbe0;
+  --text-muted: #817c9c;
+  --border: #373354;
+  --border-subtle: #2d2a45;
+  --border-dropdown: #4b4673;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #a3be8c;
+  --warning: #f6c177;
+  --danger: #eb6f92;
+}
+
+/* ─── Nordfox ─── */
+[data-theme='nordfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23cdcecf%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #232831;
+  --ctp-mantle: #232831;
+  --ctp-base: #2e3440;
+  --ctp-surface0: #39404f;
+  --ctp-surface1: #444c5e;
+  --ctp-surface2: #5a657d;
+  --ctp-overlay0: #60728a;
+  --ctp-overlay1: #7e8188;
+  --ctp-overlay2: #abb1bb;
+  --ctp-text: #cdcecf;
+  --ctp-subtext1: #c7cdd9;
+  --ctp-subtext0: #abb1bb;
+  --ctp-mauve: #b48ead;
+  --ctp-lavender: #81a1c1;
+  --ctp-pink: #bf88bc;
+  --ctp-flamingo: #bf616a;
+  --ctp-rosewater: #c9826b;
+  --ctp-blue: #81a1c1;
+  --ctp-sapphire: #81a1c1;
+  --ctp-sky: #88c0d0;
+  --ctp-teal: #88c0d0;
+  --ctp-green: #a3be8c;
+  --ctp-yellow: #ebcb8b;
+  --ctp-peach: #c9826b;
+  --ctp-maroon: #bf616a;
+  --ctp-red: #bf616a;
+
+  --bg-app: #2e3440;
+  --bg-sidebar: #232831;
+  --bg-card: #39404f;
+  --bg-hover: #444c5e;
+  --bg-player: #232831;
+  --bg-glass: rgba(46, 52, 64, 0.75);
+  --accent: #81a1c1;
+  --accent-dim: rgba(129, 161, 193, 0.15);
+  --accent-glow: rgba(129, 161, 193, 0.3);
+  --text-primary: #cdcecf;
+  --text-secondary: #abb1bb;
+  --text-muted: #60728a;
+  --border: #444c5e;
+  --border-subtle: #39404f;
+  --border-dropdown: #5a657d;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #a3be8c;
+  --warning: #ebcb8b;
+  --danger: #bf616a;
+}
+
+/* ─── Terafox ─── */
+[data-theme='terafox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e6eaea%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #0f1c1e;
+  --ctp-mantle: #0f1c1e;
+  --ctp-base: #152528;
+  --ctp-surface0: #1d3337;
+  --ctp-surface1: #254147;
+  --ctp-surface2: #2d4f56;
+  --ctp-overlay0: #6d7f8b;
+  --ctp-overlay1: #587b7b;
+  --ctp-overlay2: #cbd9d8;
+  --ctp-text: #e6eaea;
+  --ctp-subtext1: #eaeeee;
+  --ctp-subtext0: #cbd9d8;
+  --ctp-mauve: #ad5c7c;
+  --ctp-lavender: #5a93aa;
+  --ctp-pink: #cb7985;
+  --ctp-flamingo: #e85c51;
+  --ctp-rosewater: #ea9a97;
+  --ctp-blue: #5a93aa;
+  --ctp-sapphire: #5a93aa;
+  --ctp-sky: #a1cdd8;
+  --ctp-teal: #7aa4a1;
+  --ctp-green: #7aa4a1;
+  --ctp-yellow: #fda47f;
+  --ctp-peach: #ff8349;
+  --ctp-maroon: #e85c51;
+  --ctp-red: #e85c51;
+
+  --bg-app: #152528;
+  --bg-sidebar: #0f1c1e;
+  --bg-card: #1d3337;
+  --bg-hover: #254147;
+  --bg-player: #0f1c1e;
+  --bg-glass: rgba(21, 37, 40, 0.75);
+  --accent: #a1cdd8;
+  --accent-dim: rgba(161, 205, 216, 0.15);
+  --accent-glow: rgba(161, 205, 216, 0.3);
+  --text-primary: #e6eaea;
+  --text-secondary: #cbd9d8;
+  --text-muted: #6d7f8b;
+  --border: #254147;
+  --border-subtle: #1d3337;
+  --border-dropdown: #2d4f56;
+  --shadow-dropdown: rgba(0, 0, 0, 0.6);
+  --positive: #7aa4a1;
+  --warning: #fda47f;
+  --danger: #e85c51;
+}
+
+/* ─── Carbonfox ─── */
+[data-theme='carbonfox'] {
+  color-scheme: dark;
+  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f2f4f8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+
+  --ctp-crust: #121212;
+  --ctp-mantle: #121212;
+  --ctp-base: #161616;
+  --ctp-surface0: #1c1c1c;
+  --ctp-surface1: #222222;
+  --ctp-surface2: #2e2e2e;
+  --ctp-overlay0: #525253;
+  --ctp-overlay1: #525253;
+  --ctp-overlay2: #c1c7cd;
+  --ctp-text: #f2f4f8;
+  --ctp-subtext1: #dde1e6;
+  --ctp-subtext0: #c1c7cd;
+  --ctp-mauve: #be95ff;
+  --ctp-lavender: #78a9ff;
+  --ctp-pink: #ff7eb6;
+  --ctp-flamingo: #ee5396;
+  --ctp-rosewater: #ff7eb6;
+  --ctp-blue: #78a9ff;
+  --ctp-sapphire: #33b1ff;
+  --ctp-sky: #33b1ff;
+  --ctp-teal: #3ddbd9;
+  --ctp-green: #25be6a;
+  --ctp-yellow: #08bdba;
+  --ctp-peach: #3ddbd9;
+  --ctp-maroon: #ee5396;
+  --ctp-red: #ee5396;
+
+  --bg-app: #161616;
+  --bg-sidebar: #121212;
+  --bg-card: #1c1c1c;
+  --bg-hover: #222222;
+  --bg-player: #121212;
+  --bg-glass: rgba(22, 22, 22, 0.82);
+  --accent: #be95ff;
+  --accent-dim: rgba(190, 149, 255, 0.15);
+  --accent-glow: rgba(190, 149, 255, 0.3);
+  --text-primary: #f2f4f8;
+  --text-secondary: #dde1e6;
+  --text-muted: #878d96;
+  --border: #222222;
+  --border-subtle: #1c1c1c;
+  --border-dropdown: #2e2e2e;
+  --shadow-dropdown: rgba(0, 0, 0, 0.7);
+  --positive: #25be6a;
+  --warning: #08bdba;
+  --danger: #ee5396;
+}