/** * Goodev meet - Dark Mode * Toggle via data-theme="dark" on * All tokens defined in design-system.css * Version: 2.0 */ /* ==================== TRANSITIONS ==================== */ body, .header, .footer, .card, .form-input, .form-textarea, .form-select { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* ==================== DARK MODE TOGGLE (in header nav) ==================== */ #dark-mode-toggle { position: relative; } /* ==================== DARK HEADER ==================== */ [data-theme="dark"] .header { background-color: rgba(30, 30, 46, 0.95); border-bottom-color: var(--border-color); backdrop-filter: blur(10px); } /* ==================== DARK FOOTER ==================== */ [data-theme="dark"] .footer { background-color: #181828; border-top-color: var(--border-color); } [data-theme="dark"] .footer-bottom { border-top-color: var(--border-color); } /* ==================== DARK FORMS ==================== */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-select { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } /* ==================== DARK CARDS ==================== */ [data-theme="dark"] .card { background-color: var(--bg-secondary); border-color: var(--border-color); } /* ==================== SCROLLBAR ==================== */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }