feat(themes): add Dracula theme to Open Source Classics

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

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' },

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;

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;
+}