diff --git a/src/components/ThemePicker.tsx b/src/components/ThemePicker.tsx index c417f3e3..64b8b722 100644 --- a/src/components/ThemePicker.tsx +++ b/src/components/ThemePicker.tsx @@ -46,6 +46,7 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [ { 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: 'dracula', label: 'Dracula', bg: '#282a36', card: '#44475a', accent: '#bd93f9' }, { 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' }, diff --git a/src/store/themeStore.ts b/src/store/themeStore.ts index 663f4747..0a72c653 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' | 'nightfox' | 'dayfox' | 'dawnfox' | 'duskfox' | 'nordfox' | 'terafox' | 'carbonfox'; +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' | 'dracula'; interface ThemeState { theme: Theme; diff --git a/src/styles/theme.css b/src/styles/theme.css index 49c598b1..74db56cf 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -14101,3 +14101,56 @@ input[type="range"]:hover::-webkit-slider-thumb { --warning: #08bdba; --danger: #ee5396; } + +/* ─── Dracula ─── */ +[data-theme='dracula'] { + 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%23f8f8f2%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: #191a21; + --ctp-mantle: #21222c; + --ctp-base: #282a36; + --ctp-surface0: #3a3c4e; + --ctp-surface1: #44475a; + --ctp-surface2: #565869; + --ctp-overlay0: #6272a4; + --ctp-overlay1: #7970a9; + --ctp-overlay2: #c0bfcc; + --ctp-text: #f8f8f2; + --ctp-subtext1: #e0dfe6; + --ctp-subtext0: #c0bfcc; + --ctp-mauve: #bd93f9; + --ctp-lavender: #bd93f9; + --ctp-pink: #ff79c6; + --ctp-flamingo: #ff79c6; + --ctp-rosewater:#ffb86c; + --ctp-blue: #6272a4; + --ctp-sapphire: #8be9fd; + --ctp-sky: #8be9fd; + --ctp-teal: #8be9fd; + --ctp-green: #50fa7b; + --ctp-yellow: #f1fa8c; + --ctp-peach: #ffb86c; + --ctp-maroon: #ff5555; + --ctp-red: #ff5555; + + --bg-app: #282a36; + --bg-sidebar: #21222c; + --bg-card: #44475a; + --bg-hover: #44475a; + --bg-player: #21222c; + --bg-glass: rgba(40, 42, 54, 0.82); + --accent: #bd93f9; + --accent-dim: rgba(189, 147, 249, 0.15); + --accent-glow: rgba(189, 147, 249, 0.3); + --text-primary: #f8f8f2; + --text-secondary: #e0dfe6; + --text-muted: #6272a4; + --border: #44475a; + --border-subtle: #3a3c4e; + --border-dropdown: #565869; + --shadow-dropdown: rgba(0, 0, 0, 0.6); + --positive: #50fa7b; + --warning: #ffb86c; + --danger: #ff5555; +}