/* ========================================================================== Dark Mode -------------------------------------------------------------------------- Native dark theme for the SafeUT School Dashboard. Activation is driven by the user's OS / browser setting (prefers-color-scheme). A small script in _Host.cshtml mirrors that preference onto the attribute so that Bootstrap 5.3's built-in dark styling engages for standard components. This file layers on top of that to darken the app's custom hardcoded surfaces and the Telerik/Kendo widgets, which are not covered by Bootstrap's color modes. Brand colors are reused where they remain legible; only backgrounds are darkened. ========================================================================== */ [data-bs-theme="dark"] { /* Dark surface palette (backgrounds darkened; brand colors preserved) */ --dark-bg: #1e2329; --dark-surface: #2a3038; --dark-surface-2: #333b44; --dark-text: #e6e8ea; --dark-text-muted: #b5bcc4; --dark-border: #4a545e; color-scheme: dark; background-color: var(--dark-bg); color: var(--dark-text); } [data-bs-theme="dark"] body { background-color: var(--dark-bg); color: var(--dark-text); } /* Links keep the brand blue, which remains legible on dark backgrounds */ [data-bs-theme="dark"] a, [data-bs-theme="dark"] a-link { color: var(--theme-light-blue); } [data-bs-theme="dark"] a:hover, [data-bs-theme="dark"] a-link:hover { color: #9adcf8; } /* No-script overlay */ [data-bs-theme="dark"] div#scriptDisabled { background: var(--dark-bg); } /* -------------------------------------------------------------------------- Login page -------------------------------------------------------------------------- */ [data-bs-theme="dark"] #login-block, [data-bs-theme="dark"] #login-block .form-control { background-color: var(--dark-surface); color: var(--dark-text); } [data-bs-theme="dark"] #login-block .form-control { border-color: var(--dark-border); } [data-bs-theme="dark"] #login-content { border-color: var(--dark-border); } /* -------------------------------------------------------------------------- Chat / message bubbles and typing indicator -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .media-received p { background-color: var(--dark-surface-2); color: var(--dark-text); } [data-bs-theme="dark"] .typing-indicator { background-color: var(--dark-surface-2); } [data-bs-theme="dark"] .typing-indicator span { background-color: var(--dark-text-muted); } /* -------------------------------------------------------------------------- Alerts -------------------------------------------------------------------------- */ [data-bs-theme="dark"] #alert-accordion-button:not(.collapsed) { background-color: var(--dark-surface) !important; border-color: var(--dark-border); color: var(--dark-text); } [data-bs-theme="dark"] #alert-accordion-unassigned { background-color: #3a2f1a; color: var(--theme-coral); } /* -------------------------------------------------------------------------- Generic surfaces and borders that were hardcoded light -------------------------------------------------------------------------- */ [data-bs-theme="dark"] table.expandable-table th, [data-bs-theme="dark"] table.expandable-table td, [data-bs-theme="dark"] div.details, [data-bs-theme="dark"] .whatsNewBorder, [data-bs-theme="dark"] .whatIsNewHeader, [data-bs-theme="dark"] .card-body-border, [data-bs-theme="dark"] .tab-border, [data-bs-theme="dark"] .telerick-no-shadow { border-color: var(--dark-border) !important; } /* -------------------------------------------------------------------------- Bootstrap form controls: soften the hardcoded black borders for dark bg -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] .form-check-input, [data-bs-theme="dark"] .form-check-input:focus, [data-bs-theme="dark"] .k-checkbox { border-color: var(--dark-border); } /* -------------------------------------------------------------------------- Telerik / Kendo widgets (not covered by Bootstrap color modes) -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .k-grid, [data-bs-theme="dark"] .k-grid-header, [data-bs-theme="dark"] .k-grid-content, [data-bs-theme="dark"] .k-grid .k-table-th, [data-bs-theme="dark"] .k-grid td, [data-bs-theme="dark"] .k-grid-md td, [data-bs-theme="dark"] .k-grid-md .k-table-td { background-color: var(--dark-surface); color: var(--dark-text); border-color: var(--dark-border); } [data-bs-theme="dark"] .k-input, [data-bs-theme="dark"] .k-input:hover, [data-bs-theme="dark"] .k-input-solid, [data-bs-theme="dark"] .k-input-solid:focus, [data-bs-theme="dark"] .k-input-solid:focus-within { background-color: var(--dark-surface); color: var(--dark-text); border-color: var(--dark-border) !important; } [data-bs-theme="dark"] .k-searchbox { border-color: var(--dark-border); } [data-bs-theme="dark"] .k-list, [data-bs-theme="dark"] .k-popup, [data-bs-theme="dark"] .k-list-item { background-color: var(--dark-surface); color: var(--dark-text); } [data-bs-theme="dark"] .select-all-item:hover { background: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .k-pager-numbers .k-button { color: var(--dark-text) !important; } [data-bs-theme="dark"] .k-pager-numbers .k-button:hover { background-color: var(--dark-surface-2); } [data-bs-theme="dark"] .k-pager-sizes .k-dropdown-list, [data-bs-theme="dark"] .k-pager-sizes .k-dropdown, [data-bs-theme="dark"] .k-pager-sizes .k-dropdownlist, [data-bs-theme="dark"] .k-pager-sizes > select { border-color: var(--dark-border); } [data-bs-theme="dark"] .k-tabstrip-items-wrapper .k-tabstrip-item { color: var(--dark-text) !important; border-color: var(--dark-border); } [data-bs-theme="dark"] .k-tabstrip-content, [data-bs-theme="dark"] .k-tabstrip > .k-content, [data-bs-theme="dark"] .k-tabstrip-top > .k-content { background-color: var(--dark-surface); color: var(--dark-text); }