/** * THEME SYSTEM * ============ * Three themes: Dark, Gray, and Light * Controlled by data-theme attribute on tag */ /* ============================================ DARK THEME (Default) ============================================ */ [data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --text-primary: #f8fafc; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.5); --accent-color: #fbbf24; --success-color: #10b981; --danger-color: #ef4444; --border-color: #334155; } /* ============================================ GRAY THEME (Muted) ============================================ */ [data-theme="gray"] { --bg-primary: #2d3748; --bg-secondary: #4a5568; --bg-tertiary: #718096; --text-primary: #f7fafc; --text-secondary: #e2e8f0; --text-muted: #cbd5e0; --accent-color: #ed8936; --success-color: #48bb78; --danger-color: #f56565; --border-color: #718096; } /* ============================================ LIGHT THEME (Flashbang 😂) ============================================ */ [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f7fafc; --bg-tertiary: #e2e8f0; --text-primary: #1a202c; --text-secondary: #2d3748; --text-muted: #718096; --accent-color: #d69e2e; --success-color: #38a169; --danger-color: #e53e3e; --border-color: #cbd5e0; } /* ============================================ APPLY THEME VARIABLES ============================================ */ body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; transition: background-color 0.3s ease, color 0.3s ease; } .dark-card { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .text-info { color: var(--accent-color) !important; } .text-white { color: var(--text-primary) !important; } .text-white-50 { color: var(--text-muted) !important; } .bg-dark { background-color: var(--bg-secondary) !important; } .border-secondary { border-color: var(--border-color) !important; } .form-control, .form-select { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } .form-control:focus, .form-select:focus { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--accent-color) !important; } .btn-outline-info { color: var(--accent-color) !important; border-color: var(--accent-color) !important; } .btn-outline-info:hover { background-color: var(--accent-color) !important; color: var(--bg-primary) !important; } .history-item { background: var(--bg-tertiary) !important; border-left-color: var(--accent-color) !important; } /* ============================================ THEME SELECTOR CARDS (Settings Page) ============================================ */ .theme-card { cursor: pointer; padding: 15px; border: 2px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); transition: all 0.3s ease; } .theme-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .theme-card.active { border-color: var(--accent-color); box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); } .theme-preview { height: 120px; border-radius: 8px; overflow: hidden; margin-bottom: 10px; } .theme-preview-header { height: 30px; padding: 10px; } .theme-preview-body { padding: 10px; } .theme-preview-text { height: 8px; margin-bottom: 5px; border-radius: 4px; } /* Dark preview */ .theme-preview-dark { background: #0f172a; } .theme-preview-dark .theme-preview-header { background: #1e293b; } .theme-preview-dark .theme-preview-text { background: #334155; } /* Gray preview */ .theme-preview-gray { background: #2d3748; } .theme-preview-gray .theme-preview-header { background: #4a5568; } .theme-preview-gray .theme-preview-text { background: #718096; } /* Light preview */ .theme-preview-light { background: #ffffff; border: 1px solid #e2e8f0; } .theme-preview-light .theme-preview-header { background: #f7fafc; } .theme-preview-light .theme-preview-text { background: #cbd5e0; } .theme-info h5 { color: var(--text-primary); margin-bottom: 5px; font-size: 1rem; } .theme-info p { color: var(--text-muted); }