diff --git a/README.md b/README.md index f020b42e..4038132b 100644 --- a/README.md +++ b/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. diff --git a/src/components/ThemePicker.tsx b/src/components/ThemePicker.tsx index 34fa31f4..c417f3e3 100644 --- a/src/components/ThemePicker.tsx +++ b/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' }, ], }, { diff --git a/src/locales/de.ts b/src/locales/de.ts index 3a09f947..72862c05 100644 --- a/src/locales/de.ts +++ b/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?', diff --git a/src/locales/en.ts b/src/locales/en.ts index a7138321..4c121b47 100644 --- a/src/locales/en.ts +++ b/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?', diff --git a/src/locales/fr.ts b/src/locales/fr.ts index d70828fe..d85dd0c1 100644 --- a/src/locales/fr.ts +++ b/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 ?', diff --git a/src/locales/nl.ts b/src/locales/nl.ts index c8e8e69e..831cacc5 100644 --- a/src/locales/nl.ts +++ b/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?', diff --git a/src/locales/zh.ts b/src/locales/zh.ts index acb3f11a..375844ce 100644 --- a/src/locales/zh.ts +++ b/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: '如何设置下载文件夹?', diff --git a/src/store/themeStore.ts b/src/store/themeStore.ts index 77573e3f..663f4747 100644 --- a/src/store/themeStore.ts +++ b/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; diff --git a/src/styles/theme.css b/src/styles/theme.css index dfcfb974..e9e0d1e2 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -13712,4 +13712,375 @@ input[type="range"]:hover::-webkit-slider-thumb { [data-theme='powerslave'] ::-webkit-scrollbar-thumb:hover { background: #C8800A; -} \ No newline at end of file +} + +/* ─── 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; +}