/* ───────────────────────────────────────────── 🌙 DARK MODE OVERRIDES Applied when is set ───────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #1c1e26; --color-primary: #292d3e; --color-accent: #f1f1f1; --color-link: #f1f1f1; --color-link-hover: #fff; /* * Do not force a dark background on the element in dark mode. * The background should respect the user's preference configured * via account.php (inline style). If a background colour is applied * here, it overrides the user's chosen colour or image. Leaving this * unset allows the inline `background-style` on to take effect. */ /* background-color: var(--color-bg); */ color: #f1f1f1; } /* ───────────────────────────────────────────── 🛡️ SAFETY NET: Ensure all text is visible in dark mode Mute all text colors to ensure readability against dark backgrounds ───────────────────────────────────────────── */ [data-theme="dark"] body, [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th { color: inherit; } /* Override any black text to ensure visibility */ [data-theme="dark"] .text-black, [data-theme="dark"] *[style*="color: black"], [data-theme="dark"] *[style*="color:#000"], [data-theme="dark"] *[style*="color: #000"] { color: #d0d0d0 !important; } /* * Set a sensible link colour for dark mode. In dark mode, the default * Bootstrap link colour (#0d6efd) can be hard to see against the dark * background. We override all anchor tags to use the accent colour * defined at the top of this file. Hover states use the default link * hover colour for better contrast. */ [data-theme="dark"] a { color: var(--color-accent); } [data-theme="dark"] a:hover { color: var(--color-link-hover); } /* Ensure visited links remain visible in dark mode by inheriting the accent colour. * Without this, visited links may revert to the browser default purple, which * is difficult to see on dark backgrounds. We explicitly set visited * anchors to the same colour as unvisited ones for consistency. */ [data-theme="dark"] a:visited { color: var(--color-accent); } /* Improve readability of links inside tables and back buttons. These * selectors target anchors within table cells and links styled as * Bootstrap "btn-link". Without these overrides, the default * link colour inherits from the surrounding text and becomes * indistinguishable on dark backgrounds. */ /* Override link colours in tables and for .btn-link when dark mode is active. * Using the accent colour (#e06c75) for anchors inside table rows * proved difficult to read against dark striped backgrounds. * Instead, use the default off‑white link colour and brighten on hover. * Force these colours with !important to override Bootstrap defaults. */ /* Override link colours in tables and for .btn-link when dark mode is active. * Use the accent colour (#e06c75) for anchors inside tables so that they * remain visible against light table backgrounds. For buttons (.btn-link), * also use the accent colour to differentiate interactive elements. */ [data-theme="dark"] table a, [data-theme="dark"] .btn-link { color: var(--color-accent) !important; } [data-theme="dark"] table a:hover, [data-theme="dark"] .btn-link:hover { color: var(--color-link-hover) !important; } /* Ensure visited .btn-link elements remain visible. Without this, * visited links can fall back to the browser default purple which * blends into the dark background or accent colour. By setting * visited .btn-link to use the standard link colour, we improve * contrast for links that have been clicked previously. */ [data-theme="dark"] .btn-link:visited { color: var(--color-link) !important; } /* Make muted and secondary text readable in dark mode. Many * components (cards, tables, small print) rely on the * `.text-muted` and `.text-secondary` classes to deemphasise * information. In a light theme this renders in grey on white, * but in a dark theme those greys become nearly invisible. */ [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: #b5b5b5 !important; } [data-theme="dark"] a { color: var(--color-link); } [data-theme="dark"] a:hover { color: var(--color-link-hover); } /* 🧭 Navbar */ [data-theme="dark"] nav.navbar { background-color: var(--color-primary) !important; } /* 🧑 Sidebar */ [data-theme="dark"] .sidebar { background-color: var(--color-primary); color: #f1f1f1; } [data-theme="dark"] .sidebar a { color: #f1f1f1; } [data-theme="dark"] .sidebar a.active { color: #e06c75; } [data-theme="dark"] .sidebar a:hover { text-decoration: underline; } /* 📚 Cards */ [data-theme="dark"] .card { background-color: #2a2d3c; color: #f1f1f1; border-color: #444; } [data-theme="dark"] .card .card-title, [data-theme="dark"] .card .card-subtitle { color: #f1f1f1; } /* * When dark theme is enabled, override any inline background colour * or image set on the element. User-selected backgrounds are * applied via the style attribute, which normally has high * specificity. Using !important here ensures the dark theme will * consistently override those styles, preventing light backgrounds * from washing out the content when dark mode is active. */ [data-theme="dark"] { /* * Do not override the body's background colour or image in dark mode. * The user-selected background set via inline style (account * preferences) should take precedence. We still apply the dark * text colour to ensure readability. */ /* background-color: #1c1e26 !important; */ /* background-image: none !important; */ color: #f1f1f1; } /* * Additional dark-mode overrides * Many components across the site define explicit light backgrounds and * text colours, which become difficult to read when the body theme is * switched to dark. The rules below provide sensible defaults for * commonly used Bootstrap classes and custom elements. Feel free to * extend as new components are introduced. */ /* Form controls */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text { background-color: #333 !important; color: #f1f1f1 !important; border-color: #555 !important; } /* Dropdown menus */ [data-theme="dark"] .dropdown-menu { background-color: #2a2d3c; color: #f1f1f1; border-color: #444; } /* Tables */ [data-theme="dark"] table { background-color: #2a2d3c; color: #f1f1f1; } [data-theme="dark"] thead { background-color: #343a40; color: #f1f1f1; } [data-theme="dark"] tbody tr { background-color: #2a2d3c; color: #f1f1f1; } [data-theme="dark"] tbody tr:nth-child(odd) { background-color: #2f3245; } /* Buttons - use standard Bootstrap blue for primary, not red */ [data-theme="dark"] .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; } [data-theme="dark"] .btn-primary:hover { background-color: #0b5ed7 !important; border-color: #0b5ed7 !important; color: #fff !important; } [data-theme="dark"] .btn-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff !important; } [data-theme="dark"] .btn-secondary:hover { background-color: #5a6268; border-color: #545b62; color: #fff !important; } [data-theme="dark"] .btn-success { background-color: #98c379; border-color: #98c379; color: #282c34; } [data-theme="dark"] .btn-success:hover { background-color: #7aa45b; border-color: #7aa45b; } [data-theme="dark"] .btn-info { background-color: #56b6c2; border-color: #56b6c2; color: #282c34; } [data-theme="dark"] .btn-info:hover { background-color: #449aa6; border-color: #449aa6; } [data-theme="dark"] .btn-warning { background-color: #d19a66; border-color: #d19a66; color: #282c34; } [data-theme="dark"] .btn-warning:hover { background-color: #b57c47; border-color: #b57c47; } [data-theme="dark"] .btn-danger { background-color: #be5046; border-color: #be5046; color: #fff; } [data-theme="dark"] .btn-danger:hover { background-color: #9f4138; border-color: #9f4138; } /* Modal content */ [data-theme="dark"] .modal-content { background-color: #2a2d3c; color: #f1f1f1; border-color: #444; } /* Alerts */ [data-theme="dark"] .alert { background-color: #343a40; border-color: #444; color: #f1f1f1; } /* Input placeholders */ [data-theme="dark"] ::placeholder { color: #bbb; opacity: 1; } /* Misc overrides */ [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background-color: #2a2d3c !important; color: #f1f1f1 !important; } [data-theme="dark"] .text-dark { color: #f1f1f1 !important; } /* * Make muted and secondary text readable in dark mode. Many * components (cards, tables, small print) rely on the * `.text-muted` and `.text-secondary` classes to deemphasise * information. In a light theme this renders in grey on white, * but in a dark theme those greys become nearly invisible. */ [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: #b5b5b5 !important; } /* Ensure small text is also legible */ [data-theme="dark"] .small, [data-theme="dark"] small { color: #d0d0d0 !important; } /* Labels in dark mode */ [data-theme="dark"] label, [data-theme="dark"] .form-label { color: #e0e0e0 !important; } /* Progress bars need contrast in dark mode */ [data-theme="dark"] .progress { background-color: #2f3245; } [data-theme="dark"] .progress-bar { background-color: #56b6c2; color: #282c34; } /* Improve outline button contrast */ [data-theme="dark"] .btn-outline-secondary { color: #f1f1f1; border-color: #6c757d; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #6c757d; color: #282c34; } /* Lighten table header and row backgrounds */ [data-theme="dark"] .table-light th { background-color: #343a40 !important; color: #f1f1f1 !important; } [data-theme="dark"] .table > :not(caption) > * > * { border-color: #444; } /* 🧾 Auth Forms */ [data-theme="dark"].page-login .container, [data-theme="dark"].page-register .container, [data-theme="dark"] .verify-container { background-color: #2a2d3c; color: #f1f1f1; box-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.05); } /* 🧩 Borders + Misc */ [data-theme="dark"] hr, [data-theme="dark"] .border-top { border-color: #444 !important; } [data-theme="dark"] .list-group-item { background-color: #2a2d3c; color: #f1f1f1; border-color: #444; } /* Outline buttons - clean white text and borders */ [data-theme="dark"] .btn-outline-primary, [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-dark { color: #f1f1f1 !important; border-color: #f1f1f1 !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-dark:hover { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; } /* Keep semantic colors for other outline buttons */ [data-theme="dark"] .btn-outline-danger { color: #f1f1f1 !important; border-color: #aaa !important; } [data-theme="dark"] .btn-outline-success { color: #f1f1f1 !important; border-color: #aaa !important; } [data-theme="dark"] .btn-outline-info { color: #f1f1f1 !important; border-color: #aaa !important; } [data-theme="dark"] .btn-outline-warning { color: #f1f1f1 !important; border-color: #aaa !important; } /* 🌙 DARK MODE BUTTON ICON */ .theme-icon { transition: transform 0.3s ease, opacity 0.3s ease; display: inline-block; font-size: 1.2rem; } body.dark-mode .theme-icon { content: "☀️"; transform: rotate(180deg); }