/* ======================================== THEME SWITCHER - Light Theme Override Default = Dark (defined in style.css :root) Light = activated via data-theme="light" on ======================================== */ /* ======================================== 1. LIGHT THEME VARIABLES ======================================== */ [data-theme="light"] { /* Background colors */ --bg-primary: #f0f2f5; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-hover: #f5f5fa; /* Text colors */ --text-primary: #1a1a2e; --text-secondary: #4b5563; --text-muted: #9ca3af; /* Status colors - slightly adjusted for light bg */ --success-bg: rgba(16, 185, 129, 0.1); --warning-bg: rgba(245, 158, 11, 0.1); --danger-bg: rgba(239, 68, 68, 0.1); --info-bg: rgba(59, 130, 246, 0.1); /* Borders & shadows */ --border: #e5e7eb; --border-light: #d1d5db; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); } /* ======================================== 2. LIGHT THEME - Scrollbar ======================================== */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f0f2f5; } [data-theme="light"] ::-webkit-scrollbar-thumb { background-color: #c4c4cc; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: #a8a8b3; } /* ======================================== 3. THEME TOGGLE BUTTON ======================================== */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all 0.3s ease; font-size: 16px; } .theme-toggle-btn:hover { background: var(--bg-hover); color: var(--primary); border-color: var(--primary); } /* Icon transition */ .theme-toggle-btn i { transition: transform 0.3s ease; } .theme-toggle-btn:hover i { transform: rotate(20deg); } /* Login page - position absolue en haut à droite */ .login-theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 100; } /* ======================================== 4. LIGHT THEME - Wallpaper Override ======================================== */ [data-theme="light"] .area { background-color: #e8eaf0; background-image: linear-gradient(135deg, #e8eaf0 0%, #dde1ed 50%, #d4d9e8 100%); } [data-theme="light"] .circles li { background: rgba(99, 102, 241, 0.06); box-shadow: 0 8px 32px 0 rgba(99, 102, 241, 0.06); border: 1px solid rgba(99, 102, 241, 0.1); } /* ======================================== 5. LIGHT THEME - Specific Overrides ======================================== */ /* Sidebar */ [data-theme="light"] .sidebar { border-right-color: var(--border); } /* Cards with subtle border on light */ [data-theme="light"] .stat-card, [data-theme="light"] .chart-card, [data-theme="light"] .card { border: 1px solid var(--border); } /* Tables */ [data-theme="light"] .data-table th { background: #f8f9fa; } [data-theme="light"] .data-table tr:hover { background: #f5f5fa; } /* Inputs and selects */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff; border-color: var(--border); color: var(--text-primary); } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: var(--primary); } /* Modals */ [data-theme="light"] .modal-overlay { background: rgba(0, 0, 0, 0.3); } [data-theme="light"] .modal { border: 1px solid var(--border); } /* Topbar */ [data-theme="light"] .topbar { border-bottom: 1px solid var(--border); } /* Badges / Tags */ [data-theme="light"] .badge, [data-theme="light"] .tag { border: 1px solid var(--border); } /* Dropdown menus */ [data-theme="light"] .user-dropdown-menu { border: 1px solid var(--border); } /* Profile button - no extra border on wrapper */ [data-theme="light"] .user-dropdown-btn { border-color: transparent; background: transparent; } [data-theme="light"] .user-dropdown-btn:hover { background: var(--bg-hover); border-color: var(--border); } /* Login page specific */ [data-theme="light"] .login-container { border: 1px solid var(--border); }