/* ============================================================ Focus Education LMS — Theme System Two color schemes: Dark (default) + Light Toggled via data-flms-theme="dark|light" on ============================================================ */ /* ── DARK THEME (default) ── */ [data-flms-theme="dark"], body:not([data-flms-theme]) { --fe-navy: #0D1321; --fe-navy2: #141929; --fe-navy3: #1C2333; --fe-navy4: #232B3E; --fe-navy5: #2C3550; --fe-yellow: #F5C518; --fe-yellow-dk: #D4A800; --fe-yellow-lt: #FDD835; --fe-yellow-bg: rgba(245,197,24,0.12); --fe-yellow-bg2: rgba(245,197,24,0.06); --fe-text: #FFFFFF; --fe-text2: #B8C0D4; --fe-text3: #6B7A99; --fe-border: rgba(255,255,255,0.07); --fe-border2: rgba(255,255,255,0.13); --fe-card: #141929; --fe-bg: #0D1321; --fe-success: #22C55E; --fe-success-bg: rgba(34,197,94,0.12); --fe-danger: #EF4444; --fe-danger-bg: rgba(239,68,68,0.12); --fe-warning: #F59E0B; --fe-warning-bg: rgba(245,158,11,0.12); --fe-info: #3B82F6; --fe-info-bg: rgba(59,130,246,0.12); --fe-shadow: 0 4px 24px rgba(0,0,0,0.5); --fe-shadow-card: 0 8px 32px rgba(0,0,0,0.6); --fe-input-bg: #1C2333; color-scheme: dark; } /* ── LIGHT THEME ── */ [data-flms-theme="light"] { --fe-navy: #F0F4FF; --fe-navy2: #FFFFFF; --fe-navy3: #F5F7FF; --fe-navy4: #E8ECFA; --fe-navy5: #D6DCEF; --fe-yellow: #D4A017; --fe-yellow-dk: #B8880D; --fe-yellow-lt: #E5B82B; --fe-yellow-bg: rgba(212,160,23,0.12); --fe-yellow-bg2: rgba(212,160,23,0.06); --fe-text: #0D1321; --fe-text2: #2C3A5C; --fe-text3: #6B7A99; --fe-border: rgba(0,0,0,0.09); --fe-border2: rgba(0,0,0,0.15); --fe-card: #FFFFFF; --fe-bg: #F0F4FF; --fe-success: #16A34A; --fe-success-bg: rgba(22,163,74,0.10); --fe-danger: #DC2626; --fe-danger-bg: rgba(220,38,38,0.10); --fe-warning: #D97706; --fe-warning-bg: rgba(217,119,6,0.10); --fe-info: #2563EB; --fe-info-bg: rgba(37,99,235,0.10); --fe-shadow: 0 2px 16px rgba(0,0,0,0.08); --fe-shadow-card: 0 4px 24px rgba(0,0,0,0.10); --fe-input-bg: #F5F7FF; color-scheme: light; } /* Light theme overrides for elements that use hardcoded dark values */ [data-flms-theme="light"] .flms-layout, [data-flms-theme="light"] .flms-auth-page { background: var(--fe-navy) !important; color: var(--fe-text) !important; } [data-flms-theme="light"] .flms-sidebar { background: var(--fe-navy2); border-right-color: var(--fe-border); box-shadow: 2px 0 12px rgba(0,0,0,0.06); } [data-flms-theme="light"] .flms-topbar { background: var(--fe-navy2); border-bottom-color: var(--fe-border); box-shadow: 0 1px 8px rgba(0,0,0,0.06); } [data-flms-theme="light"] .flms-input, [data-flms-theme="light"] .flms-select, [data-flms-theme="light"] .flms-textarea, [data-flms-theme="light"] .flms-floating-label { background: var(--fe-input-bg); color: var(--fe-text); } [data-flms-theme="light"] .flms-card, [data-flms-theme="light"] .flms-stat-card, [data-flms-theme="light"] .flms-modal, [data-flms-theme="light"] .flms-question-card, [data-flms-theme="light"] .flms-fee-card { background: var(--fe-navy2); border-color: var(--fe-border); } [data-flms-theme="light"] .flms-table thead { background: var(--fe-navy3); } [data-flms-theme="light"] .flms-table tbody tr:hover td { background: var(--fe-navy3); } [data-flms-theme="light"] .flms-sel-card, [data-flms-theme="light"] .flms-pay-option, [data-flms-theme="light"] .flms-item-card, [data-flms-theme="light"] .flms-lecture-row, [data-flms-theme="light"] .flms-chip { background: var(--fe-navy3); border-color: var(--fe-border); } [data-flms-theme="light"] .flms-option-label { background: var(--fe-navy2); border-color: var(--fe-border2); } [data-flms-theme="light"] .flms-essay-area { background: var(--fe-input-bg); border-color: var(--fe-border2); color: var(--fe-text); } [data-flms-theme="light"] .flms-sidebar-user { /* Sidebar stays dark in light mode — keep user area dark too, just brighten border */ border-top-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); } [data-flms-theme="light"] .flms-brand-header { background: var(--fe-navy2); } [data-flms-theme="light"] .flms-login-card { background: var(--fe-navy2); } [data-flms-theme="light"] .flms-alert-info { background: var(--fe-info-bg); border-color: rgba(37,99,235,.2); color: var(--fe-info); } [data-flms-theme="light"] .flms-alert-success { background: var(--fe-success-bg); color: var(--fe-success); } [data-flms-theme="light"] .flms-alert-error, [data-flms-theme="light"] .flms-alert-danger { background: var(--fe-danger-bg); color: var(--fe-danger); } [data-flms-theme="light"] .flms-alert-warning { background: var(--fe-warning-bg); color: var(--fe-warning); } [data-flms-theme="light"] .katex { color: var(--fe-text) !important; } /* ── THEME TOGGLE BUTTON ── */ .flms-theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--fe-navy3); border: 1.5px solid var(--fe-border2); border-radius: 20px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--fe-text2); transition: all 0.2s; white-space: nowrap; font-family: inherit; } .flms-theme-toggle:hover { border-color: var(--fe-yellow); color: var(--fe-yellow); } .flms-theme-toggle .theme-sun { display: none; } .flms-theme-toggle .theme-moon { display: inline; } [data-flms-theme="light"] .flms-theme-toggle .theme-sun { display: inline; } [data-flms-theme="light"] .flms-theme-toggle .theme-moon { display: none; } /* ── Smooth theme transitions ── */ body, .flms-sidebar, .flms-topbar, .flms-card, .flms-stat-card, .flms-modal, .flms-input, .flms-select, .flms-page-content, .flms-table, .flms-lecture-row, .flms-question-card { transition: background-color 0.25s ease, border-color 0.2s ease, color 0.2s ease; }