/* ============================================================ Moviefy Theme System - 8 themes matching original Flutter app Applied via data-theme attribute on element ============================================================ */ /* Default: Dark theme (scheme-dark already in base) */ [data-theme="dark"], :root { --theme-bg: #212529; --theme-surface: #2d3238; --theme-surface-hover: #373d43; --theme-accent: #6366f1; --theme-accent-hover: #818cf8; --theme-text: #f8f9fa; --theme-text-muted: #9ca3af; --theme-border: #374151; --theme-card: rgba(45, 50, 56, 0.5); } [data-theme="light"] { --theme-bg: #f8f9fa; --theme-surface: #ffffff; --theme-surface-hover: #f3f4f6; --theme-accent: #4f46e5; --theme-accent-hover: #6366f1; --theme-text: #1f2937; --theme-text-muted: #6b7280; --theme-border: #e5e7eb; --theme-card: rgba(255, 255, 255, 0.8); } [data-theme="black"] { --theme-bg: #000000; --theme-surface: #111111; --theme-surface-hover: #1a1a1a; --theme-accent: #6366f1; --theme-accent-hover: #818cf8; --theme-text: #ffffff; --theme-text-muted: #888888; --theme-border: #222222; --theme-card: rgba(17, 17, 17, 0.8); } [data-theme="green"] { --theme-bg: #0f1f15; --theme-surface: #1a2e22; --theme-surface-hover: #243d2e; --theme-accent: #22c55e; --theme-accent-hover: #4ade80; --theme-text: #f0fdf4; --theme-text-muted: #86efac; --theme-border: #1e3a27; --theme-card: rgba(26, 46, 34, 0.5); } [data-theme="yellow"] { --theme-bg: #1f1c0f; --theme-surface: #2e2a1a; --theme-surface-hover: #3d3824; --theme-accent: #eab308; --theme-accent-hover: #facc15; --theme-text: #fefce8; --theme-text-muted: #fde68a; --theme-border: #3a3420; --theme-card: rgba(46, 42, 26, 0.5); } [data-theme="red"] { --theme-bg: #1f0f0f; --theme-surface: #2e1a1a; --theme-surface-hover: #3d2424; --theme-accent: #ef4444; --theme-accent-hover: #f87171; --theme-text: #fef2f2; --theme-text-muted: #fca5a5; --theme-border: #3a2020; --theme-card: rgba(46, 26, 26, 0.5); } [data-theme="purple"] { --theme-bg: #170f1f; --theme-surface: #241a2e; --theme-surface-hover: #30243d; --theme-accent: #a855f7; --theme-accent-hover: #c084fc; --theme-text: #faf5ff; --theme-text-muted: #d8b4fe; --theme-border: #2e1f3a; --theme-card: rgba(36, 26, 46, 0.5); } [data-theme="pink"] { --theme-bg: #1f0f18; --theme-surface: #2e1a26; --theme-surface-hover: #3d2433; --theme-accent: #ec4899; --theme-accent-hover: #f472b6; --theme-text: #fdf2f8; --theme-text-muted: #f9a8d4; --theme-border: #3a2030; --theme-card: rgba(46, 26, 38, 0.5); } /* Apply theme variables to key elements */ [data-theme] { background-color: var(--theme-bg) !important; color: var(--theme-text); } [data-theme="light"] .bg-zinc-800\/50, [data-theme="light"] .bg-zinc-800 { background-color: var(--theme-surface) !important; } [data-theme="light"] .text-white { color: var(--theme-text) !important; } [data-theme="light"] .text-zinc-400, [data-theme="light"] .text-zinc-500 { color: var(--theme-text-muted) !important; } [data-theme="light"] .border-zinc-700, [data-theme="light"] .border-zinc-700\/50 { border-color: var(--theme-border) !important; } /* Non-dark/light themes: accent color overrides */ [data-theme="green"] .bg-indigo-600 { background-color: var(--theme-accent) !important; } [data-theme="green"] .text-indigo-400 { color: var(--theme-accent-hover) !important; } [data-theme="green"] .hover\:bg-indigo-700:hover { background-color: #16a34a !important; } [data-theme="yellow"] .bg-indigo-600 { background-color: var(--theme-accent) !important; } [data-theme="yellow"] .text-indigo-400 { color: var(--theme-accent-hover) !important; } [data-theme="yellow"] .hover\:bg-indigo-700:hover { background-color: #ca8a04 !important; } [data-theme="red"] .bg-indigo-600 { background-color: var(--theme-accent) !important; } [data-theme="red"] .text-indigo-400 { color: var(--theme-accent-hover) !important; } [data-theme="red"] .hover\:bg-indigo-700:hover { background-color: #dc2626 !important; } [data-theme="purple"] .bg-indigo-600 { background-color: var(--theme-accent) !important; } [data-theme="purple"] .text-indigo-400 { color: var(--theme-accent-hover) !important; } [data-theme="purple"] .hover\:bg-indigo-700:hover { background-color: #9333ea !important; } [data-theme="pink"] .bg-indigo-600 { background-color: var(--theme-accent) !important; } [data-theme="pink"] .text-indigo-400 { color: var(--theme-accent-hover) !important; } [data-theme="pink"] .hover\:bg-indigo-700:hover { background-color: #db2777 !important; }