/* ═══════════════════════════════════════════════════════ themes.css — Universal 10-Theme System Works for: todo-manager, expense-manager, focus-timer, dashboard, apps.html Usage: JS key: 'soraTheme' ═══════════════════════════════════════════════════════ */ /* ── 1. CLASSIC (default) ── already in each app's :root */ /* ── 2. MIDNIGHT ── */ [data-theme="midnight"] { --bg: #0f1117; --surface: #1a1d27; --surface2: #22263a; --s2: #22263a; --blue: #6ba3d6; --blue-soft: rgba(107,163,214,0.18); --blue-s: rgba(107,163,214,0.18); --green: #56c897; --green-soft: rgba(86,200,151,0.18); --green-s: rgba(86,200,151,0.18); --pink: #e87fb5; --pink-soft: rgba(232,127,181,0.18); --pink-s: rgba(232,127,181,0.18); --amber: #f0b35a; --amber-soft: rgba(240,179,90,0.18); --amber-s: rgba(240,179,90,0.18); --purple: #b09ee0; --purple-soft: rgba(176,158,224,0.18); --text: #e8eaf6; --text-muted: #8892a4; --muted: #8892a4; --border: rgba(255,255,255,0.09); --sh: 0 2px 12px rgba(0,0,0,0.25); --sh2: 0 6px 28px rgba(0,0,0,0.35); } [data-theme="midnight"] body { background: #0f1117; } [data-theme="midnight"] .select-box, [data-theme="midnight"] .download-btn, [data-theme="midnight"] select, [data-theme="midnight"] input, [data-theme="midnight"] textarea { background: #1a1d27 !important; color: #e8eaf6 !important; border-color: rgba(255,255,255,0.12) !important; } /* ── 3. CHERRY BLOSSOM ── */ [data-theme="cherry"] { --bg: #fff5f7; --surface: #ffffff; --surface2: #fdeef1; --s2: #fdeef1; --blue: #d45f8c; --blue-soft: #fad4e0; --blue-s: #fad4e0; --green: #e8a0b4; --green-soft: #fae0e8; --green-s: #fae0e8; --pink: #c24470; --pink-soft: #f7c0d0; --pink-s: #f7c0d0; --amber: #e8879a; --amber-soft: #fcd4dc; --amber-s: #fcd4dc; --purple: #b05580; --purple-soft: #f0c8d8; --text: #3d1a26; --text-muted: #9c6070; --muted: #9c6070; --border: #f7c0cc; } [data-theme="cherry"] body { background: #fff5f7; } /* ── 4. FOREST ── */ [data-theme="forest"] { --bg: #f0f7f2; --surface: #ffffff; --surface2: #e8f4ec; --s2: #e8f4ec; --blue: #3a8f60; --blue-soft: #c8e8d4; --blue-s: #c8e8d4; --green: #5aaa74; --green-soft: #d4f0dc; --green-s: #d4f0dc; --pink: #7ab88c; --pink-soft: #d8eedd; --pink-s: #d8eedd; --amber: #8bc478; --amber-soft: #ddefd8; --amber-s: #ddefd8; --purple: #4d9e6c; --purple-soft: #cce8d4; --text: #0e2218; --text-muted: #5a7a66; --muted: #5a7a66; --border: #b8ddc4; } [data-theme="forest"] body { background: #f0f7f2; } /* ── 5. SUNSET ── */ [data-theme="sunset"] { --bg: #fff8f2; --surface: #ffffff; --surface2: #fff2e8; --s2: #fff2e8; --blue: #e07840; --blue-soft: #fad4b8; --blue-s: #fad4b8; --green: #e89040; --green-soft: #fce0b8; --green-s: #fce0b8; --pink: #d4604a; --pink-soft: #f8c8b8; --pink-s: #f8c8b8; --amber: #f0a840; --amber-soft: #fce8b8; --amber-s: #fce8b8; --purple: #c86038; --purple-soft: #f4c0a8; --text: #2c1408; --text-muted: #9a6050; --muted: #9a6050; --border: #f0c8a8; } [data-theme="sunset"] body { background: #fff8f2; } /* ── 6. OCEAN ── */ [data-theme="ocean"] { --bg: #f0f8fb; --surface: #ffffff; --surface2: #e4f4f8; --s2: #e4f4f8; --blue: #2a9db8; --blue-soft: #b8e8f4; --blue-s: #b8e8f4; --green: #3ab8a0; --green-soft: #c0f0e8; --green-s: #c0f0e8; --pink: #2888b0; --pink-soft: #b8ddf0; --pink-s: #b8ddf0; --amber: #40c0c8; --amber-soft: #c8f0f4; --amber-s: #c8f0f4; --purple: #1878a4; --purple-soft: #a8d4e8; --text: #082030; --text-muted: #4a8090; --muted: #4a8090; --border: #a8d8e8; } [data-theme="ocean"] body { background: #f0f8fb; } /* ── 7. LAVENDER ── */ [data-theme="lavender"] { --bg: #f5f2fc; --surface: #ffffff; --surface2: #eee8f8; --s2: #eee8f8; --blue: #7c5bbf; --blue-soft: #ddd0f8; --blue-s: #ddd0f8; --green: #9a78d4; --green-soft: #ecdcf8; --green-s: #ecdcf8; --pink: #b07de0; --pink-soft: #f0dcfc; --pink-s: #f0dcfc; --amber: #8868cc; --amber-soft: #e4d8f4; --amber-s: #e4d8f4; --purple: #6a4ab0; --purple-soft: #d8c8f4; --text: #1a0e30; --text-muted: #7060a0; --muted: #7060a0; --border: #d4c8ee; } [data-theme="lavender"] body { background: #f5f2fc; } /* ── 8. SAKURA NIGHT ── */ [data-theme="sakura-night"] { --bg: #12090e; --surface: #1e1018; --surface2: #281420; --s2: #281420; --blue: #f08ab0; --blue-soft: rgba(240,138,176,0.18); --blue-s: rgba(240,138,176,0.18); --green: #e87878; --green-soft: rgba(232,120,120,0.18); --green-s: rgba(232,120,120,0.18); --pink: #f070a0; --pink-soft: rgba(240,112,160,0.18); --pink-s: rgba(240,112,160,0.18); --amber: #e0a0c0; --amber-soft: rgba(224,160,192,0.18); --amber-s: rgba(224,160,192,0.18); --purple: #d878c0; --purple-soft: rgba(216,120,192,0.18); --text: #f8e8f0; --text-muted: #b08898; --muted: #b08898; --border: rgba(240,138,176,0.15); --sh: 0 2px 12px rgba(0,0,0,0.4); --sh2: 0 6px 28px rgba(0,0,0,0.5); } [data-theme="sakura-night"] body { background: #12090e; } [data-theme="sakura-night"] .select-box, [data-theme="sakura-night"] .download-btn, [data-theme="sakura-night"] select, [data-theme="sakura-night"] input, [data-theme="sakura-night"] textarea { background: #1e1018 !important; color: #f8e8f0 !important; border-color: rgba(240,138,176,0.2) !important; } /* ── 9. SLATE ── */ [data-theme="slate"] { --bg: #f5f5f7; --surface: #ffffff; --surface2: #eeeef2; --s2: #eeeef2; --blue: #4a5568; --blue-soft: #d8dde8; --blue-s: #d8dde8; --green: #606878; --green-soft: #dde0e8; --green-s: #dde0e8; --pink: #38445a; --pink-soft: #d0d4e0; --pink-s: #d0d4e0; --amber: #556070; --amber-soft: #d8dce4; --amber-s: #d8dce4; --purple: #3a4458; --purple-soft: #ccd0dc; --text: #121822; --text-muted: #6a7280; --muted: #6a7280; --border: #d4d8e2; } [data-theme="slate"] body { background: #f5f5f7; } /* ── 10. NEON ── */ [data-theme="neon"] { --bg: #08090f; --surface: #10121e; --surface2: #181a28; --s2: #181a28; --blue: #00d4ff; --blue-soft: rgba(0,212,255,0.18); --blue-s: rgba(0,212,255,0.18); --green: #00ff88; --green-soft: rgba(0,255,136,0.18); --green-s: rgba(0,255,136,0.18); --pink: #ff2d78; --pink-soft: rgba(255,45,120,0.18); --pink-s: rgba(255,45,120,0.18); --amber: #ffcc00; --amber-soft: rgba(255,204,0,0.18); --amber-s: rgba(255,204,0,0.18); --purple: #c420ff; --purple-soft: rgba(196,32,255,0.18); --text: #e0f0ff; --text-muted: #6080a0; --muted: #6080a0; --border: rgba(0,212,255,0.2); --sh: 0 2px 12px rgba(0,0,0,0.4); --sh2: 0 6px 28px rgba(0,0,0,0.5); } [data-theme="neon"] body { background: #08090f; } [data-theme="neon"] .select-box, [data-theme="neon"] .download-btn, [data-theme="neon"] select, [data-theme="neon"] input, [data-theme="neon"] textarea { background: #10121e !important; color: #e0f0ff !important; border-color: rgba(0,212,255,0.25) !important; } [data-theme="neon"] .hero-card { box-shadow: 0 8px 28px rgba(0,212,255,0.2) !important; } [data-theme="neon"] .mini-card { box-shadow: 0 2px 12px rgba(0,212,255,0.12) !important; } [data-theme="neon"] .finance-card { box-shadow: 0 8px 28px rgba(0,212,255,0.15) !important; } /* ════════════════════════════════════════════════════════ UNIVERSAL THEME SWITCHER PANEL ════════════════════════════════════════════════════════ */ .theme-trigger { position: fixed; bottom: 24px; right: 20px; z-index: 1000; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.14); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.2s, box-shadow 0.2s; font-family: inherit; } .theme-trigger:hover { transform: scale(1.1) rotate(30deg); box-shadow: 0 6px 28px rgba(0,0,0,0.18); } .theme-panel { position: fixed; bottom: 84px; right: 20px; z-index: 999; background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 18px; box-shadow: 0 12px 48px rgba(0,0,0,0.15); width: 240px; display: none; flex-direction: column; gap: 10px; animation: panelIn 0.25s cubic-bezier(0.16,1,0.3,1); color: var(--text); } .theme-panel.open { display: flex; } @keyframes panelIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .theme-panel-title { font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted, var(--muted, #6b7280)); margin-bottom: 4px; } .theme-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .theme-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; transition: transform 0.18s, border-color 0.18s; position: relative; -webkit-tap-highlight-color: transparent; } .theme-swatch:hover { transform: scale(1.18); } .theme-swatch.active { border-color: var(--text); transform: scale(1.08); } .theme-swatch::title { display: none; } /* Swatch colors */ .sw-classic { background: linear-gradient(135deg, #5a8fc4, #5ac49e); } .sw-midnight { background: linear-gradient(135deg, #1a1d27, #6ba3d6); } .sw-cherry { background: linear-gradient(135deg, #fce0e8, #d45f8c); } .sw-forest { background: linear-gradient(135deg, #3a8f60, #8bc478); } .sw-sunset { background: linear-gradient(135deg, #e07840, #f0a840); } .sw-ocean { background: linear-gradient(135deg, #2a9db8, #3ab8a0); } .sw-lavender { background: linear-gradient(135deg, #7c5bbf, #b07de0); } .sw-sakura-night { background: linear-gradient(135deg, #12090e, #f08ab0); } .sw-slate { background: linear-gradient(135deg, #4a5568, #d8dde8); } .sw-neon { background: linear-gradient(135deg, #08090f, #00d4ff); border: 1px solid rgba(0,212,255,0.4); } .theme-name-label { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted, var(--muted, #6b7280)); min-height: 16px; } @media (max-width: 768px) { .theme-trigger { bottom: 16px; right: 16px; width: 44px; height: 44px; font-size: 20px; } .theme-panel { bottom: 72px; right: 16px; width: 210px; } }