/* ============================================================ CHERI SMS - Dark Mode Theme Overrides Created: February 19, 2026 IMPORTANT: This file ONLY loads when web.config UI_DesignTheme = "modern" Dark mode activates when: 1. User clicks the dark mode toggle (sets data-theme="dark" on ) 2. OR web.config UI_DarkModeDefault = "dark" 3. OR web.config UI_DarkModeDefault = "auto" and OS prefers dark When UI_DesignTheme = "classic", this file is NOT loaded. ============================================================ */ /* Dark mode via data attribute (set by JS toggle) */ [data-theme="dark"] { /* Primary Colors - Lighter indigo for dark backgrounds */ --primary-color: #818cf8; --primary-hover: #a5b4fc; --primary-dark: #c7d2fe; --primary-light: #1e1b4b; --primary-lighter: #312e81; --primary-50: #1e1b4b; --primary-100: #312e81; --primary-200: #3730a3; --primary-500: #818cf8; --primary-600: #a5b4fc; /* Secondary */ --secondary-color: #a78bfa; --secondary-hover: #c4b5fd; --secondary-light: #2e1065; /* Accent */ --accent-color: #fbbf24; --accent-hover: #fcd34d; --accent-light: #451a03; /* Semantic Colors - Brighter for dark bg */ --success-color: #34d399; --success-light: #064e3b; --success-dark: #6ee7b7; --warning-color: #fbbf24; --warning-light: #451a03; --warning-dark: #fcd34d; --danger-color: #f87171; --danger-light: #450a0a; --danger-dark: #fca5a5; --info-color: #22d3ee; --info-light: #083344; --info-dark: #67e8f9; /* Background Colors */ --bg-page: #0f172a; --bg-card: #1e293b; --bg-sidebar: var(--lp-dark-bg, linear-gradient(180deg, #312e81 0%, #1e1b4b 100%)); --bg-input: #334155; --bg-hover: #334155; --bg-selected: #312e81; --bg-overlay: rgba(0, 0, 0, 0.7); /* Text Colors */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-on-primary: #ffffff; --text-on-dark: #f1f5f9; --text-link: #818cf8; --text-link-hover: #a5b4fc; /* Border Colors */ --border-color: #334155; --border-focus: #818cf8; --border-hover: #475569; --border-light: #1e293b; /* Sidebar */ --sidebar-bg: var(--lp-dark-bg, linear-gradient(180deg, #312e81 0%, #1e1b4b 100%)); /* Shadows - Darker for dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.3); } /* Dark mode body */ [data-theme="dark"] body { background-color: var(--bg-page) !important; color: var(--text-primary); } /* Dark mode cards */ [data-theme="dark"] .card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .card-header { background-color: var(--bg-hover) !important; border-color: var(--border-color) !important; color: var(--text-primary); } /* Dark mode forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-theme="dark"] .form-label { color: var(--text-secondary); } /* Dark mode tables */ [data-theme="dark"] .table { --bs-table-bg: var(--bg-card); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); --bs-table-striped-bg: var(--bg-hover); --bs-table-hover-bg: var(--bg-hover); color: var(--text-primary); } [data-theme="dark"] .table thead th { background-color: var(--bg-hover) !important; color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .table td { border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .table tbody tr:hover { background-color: var(--bg-hover) !important; } /* Dark mode modals */ [data-theme="dark"] .modal-content { background-color: var(--bg-card) !important; color: var(--text-primary); } [data-theme="dark"] .modal-header { border-color: var(--border-color); } [data-theme="dark"] .modal-footer { border-color: var(--border-color); } [data-theme="dark"] .modal-backdrop.show { background-color: rgba(0, 0, 0, 0.7); } /* Dark mode dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--bg-hover); color: var(--primary-color); } [data-theme="dark"] .dropdown-divider { border-color: var(--border-color); } /* Dark mode alerts */ [data-theme="dark"] .alert-primary { background-color: #1e1b4b; color: #c7d2fe; border: 1px solid #3730a3; } [data-theme="dark"] .alert-success { background-color: #064e3b; color: #6ee7b7; border: 1px solid #059669; } [data-theme="dark"] .alert-warning { background-color: #451a03; color: #fcd34d; border: 1px solid #d97706; } [data-theme="dark"] .alert-danger { background-color: #450a0a; color: #fca5a5; border: 1px solid #dc2626; } [data-theme="dark"] .alert-info { background-color: #083344; color: #67e8f9; border: 1px solid #0891b2; } /* Dark mode tabs */ [data-theme="dark"] .nav-tabs { border-color: var(--border-color); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--primary-color) !important; background: transparent !important; } /* Dark mode breadcrumb */ [data-theme="dark"] .breadcrumb-item a { color: var(--text-secondary); } [data-theme="dark"] .breadcrumb-item.active { color: var(--text-primary); } /* Dark mode text utilities */ [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-body { color: var(--text-primary) !important; } /* Dark mode background utilities */ [data-theme="dark"] .bg-white { background-color: var(--bg-card) !important; } [data-theme="dark"] .bg-light { background-color: var(--bg-hover) !important; } [data-theme="dark"] .bg-body { background-color: var(--bg-page) !important; } /* Dark mode borders */ [data-theme="dark"] .border { border-color: var(--border-color) !important; } [data-theme="dark"] .border-top { border-color: var(--border-color) !important; } [data-theme="dark"] .border-bottom { border-color: var(--border-color) !important; } /* Dark mode list groups */ [data-theme="dark"] .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .list-group-item:hover { background-color: var(--bg-hover); } /* Dark mode progress bars */ [data-theme="dark"] .progress { background-color: var(--border-color); } /* Dark mode pagination */ [data-theme="dark"] .page-link { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .page-link:hover { background-color: var(--bg-hover); color: var(--primary-color); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); } /* Dark mode scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-page); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-hover); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Dark mode accordions */ [data-theme="dark"] .accordion-item { background-color: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .accordion-button { background-color: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--bg-hover); color: var(--primary-color); } /* Dark mode sidebar specific overrides */ [data-theme="dark"] .left-menu { background: var(--sidebar-bg) !important; } /* Dark mode HR */ [data-theme="dark"] hr { border-color: var(--border-color); opacity: 0.5; } /* Dark mode code blocks */ [data-theme="dark"] code { background-color: var(--bg-hover); color: var(--danger-color); padding: 0.125em 0.25em; border-radius: var(--radius-sm); } /* Dark mode tooltips */ [data-theme="dark"] .tooltip-inner { background-color: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); } /* ============================================================ DARK MODE TOGGLE BUTTON STYLES ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.15); color: #ffffff; cursor: pointer; transition: all var(--transition-fast); font-size: 16px; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(15deg); } /* Sun icon in dark mode, moon icon in light mode */ .theme-toggle .bi-sun-fill { display: none; } .theme-toggle .bi-moon-fill { display: inline; } [data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline; } [data-theme="dark"] .theme-toggle .bi-moon-fill { display: none; } /* ============================================================ AUTO DARK MODE (follows OS preference) Only applies if no explicit data-theme is set ============================================================ */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { /* Same variables as [data-theme="dark"] */ --primary-color: #818cf8; --primary-hover: #a5b4fc; --primary-dark: #c7d2fe; --primary-light: #1e1b4b; --secondary-color: #a78bfa; --accent-color: #fbbf24; --success-color: #34d399; --warning-color: #fbbf24; --danger-color: #f87171; --info-color: #22d3ee; --bg-page: #0f172a; --bg-card: #1e293b; --bg-sidebar: var(--lp-dark-bg, linear-gradient(180deg, #312e81 0%, #1e1b4b 100%)); --bg-input: #334155; --bg-hover: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-link: #818cf8; --text-link-hover: #a5b4fc; --border-color: #334155; --border-focus: #818cf8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.3); } }