/* * Dark mode that keeps the palette. * * BTDT's own themes/modes/dark.css is a generic grayscale layer: it overrides the * palette's primary/secondary/success/… with fixed greys and pastels, so every palette * looked the same in dark mode (user report 2026-08-29). This layer darkens the * SURFACES the way upstream does (body, greys, borders, shadows, forms, --bs-white/black * swap) but leaves the palette's semantic colours, contrast tokens and hover shades * untouched, and DERIVES the dark tints — subtle backgrounds, emphasis text, subtle * borders, links — from those colours with color-mix(), so a palette change shows in * dark mode too. Activated by [data-mode="dark"], which the BTDT loader stamps on . */ [data-mode="dark"] { --theme-dark-surface: #121212; --bs-body-bg: #121212; --bs-body-bg-rgb: 18, 18, 18; --bs-body-color: #e0e0e0; --bs-body-color-rgb: 224, 224, 224; --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(224, 224, 224, 0.75); --bs-secondary-color-rgb: 224, 224, 224; --bs-secondary-bg: #2a2a2a; --bs-secondary-bg-rgb: 42, 42, 42; --bs-tertiary-color: rgba(224, 224, 224, 0.5); --bs-tertiary-color-rgb: 224, 224, 224; --bs-tertiary-bg: #1e1e1e; --bs-tertiary-bg-rgb: 30, 30, 30; --bs-gray-100: #1e1e1e; --bs-gray-200: #2a2a2a; --bs-gray-300: #383838; --bs-gray-400: #555; --bs-gray-500: #777; --bs-gray-600: #999; --bs-gray-700: #bbb; --bs-gray-800: #ccc; --bs-gray-900: #e0e0e0; /* The white/black swap is what turns bg-white cards and dropdowns dark. */ --bs-white: #1e1e1e; --bs-white-rgb: 30, 30, 30; --bs-black: #fff; --bs-black-rgb: 255, 255, 255; --bs-white-contrast: #e0e0e0; --bs-white-contrast-rgb: 224, 224, 224; --bs-black-contrast: #121212; --bs-black-contrast-rgb: 18, 18, 18; /* light/dark are surfaces, not brand colours: dark greys with light text. */ --bs-light: #2a2a2a; --bs-light-rgb: 42, 42, 42; --bs-light-contrast: #e0e0e0; --bs-light-contrast-rgb: 224, 224, 224; --bs-light-hover-bg: #333; --bs-light-hover-border: #333; --bs-light-active-bg: #3a3a3a; --bs-light-active-border: #3a3a3a; --bs-light-focus-shadow-rgb: 58, 58, 58; --bs-light-text-emphasis: #e0e0e0; --bs-light-bg-subtle: #1e1e1e; --bs-light-border-subtle: #383838; --bs-dark: #0a0a0a; --bs-dark-rgb: 10, 10, 10; --bs-dark-contrast: #e0e0e0; --bs-dark-contrast-rgb: 224, 224, 224; --bs-dark-hover-bg: #0f0f0f; --bs-dark-hover-border: #0f0f0f; --bs-dark-active-bg: #141414; --bs-dark-active-border: #141414; --bs-dark-focus-shadow-rgb: 20, 20, 20; --bs-dark-text-emphasis: #e0e0e0; --bs-dark-bg-subtle: #0a0a0a; --bs-dark-border-subtle: #0a0a0a; /* Palette-derived tints: subtle backgrounds sink toward the surface, emphasis text and links lift toward white, subtle borders sit between. */ --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 22%, var(--theme-dark-surface)); --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 22%, var(--theme-dark-surface)); --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 22%, var(--theme-dark-surface)); --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 22%, var(--theme-dark-surface)); --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 22%, var(--theme-dark-surface)); --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 22%, var(--theme-dark-surface)); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 55%, #fff); --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 55%, #fff); --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 55%, #fff); --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 55%, #fff); --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 55%, #fff); --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 55%, #fff); --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 45%, var(--theme-dark-surface)); --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 45%, var(--theme-dark-surface)); --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 45%, var(--theme-dark-surface)); --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 45%, var(--theme-dark-surface)); --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 45%, var(--theme-dark-surface)); --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 45%, var(--theme-dark-surface)); --bs-link-color: color-mix(in srgb, var(--bs-primary) 65%, #fff); --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 45%, #fff); --bs-primary-link-hover-rgb: var(--bs-primary-rgb); --bs-border-color: #383838; --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5); --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3); --bs-code-color: #f48fb1; --bs-highlight-color: #121212; --bs-highlight-bg: #fff176; --bs-form-focus-border-color: color-mix(in srgb, var(--bs-primary) 60%, #fff); --bs-form-range-active-bg: color-mix(in srgb, var(--bs-primary) 60%, #fff); --bs-form-valid-color: #8bc34a; --bs-form-valid-border-color: #8bc34a; --bs-form-invalid-color: #ef9a9a; --bs-form-invalid-border-color: #ef9a9a; --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0e0e0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-form-switch-focus-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239e9e9e'/%3e%3c/svg%3e"); } [data-mode="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } [data-mode="dark"] .nav-tabs { --bs-nav-tabs-link-active-color: var(--bs-body-color); } /* Outline buttons: a dark palette colour vanishes on the dark surface, the lifted emphasis tint does not; hover fills with the real colour and its contrast text. */ [data-mode="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-text-emphasis); --bs-btn-disabled-color: var(--bs-primary-text-emphasis); --bs-btn-disabled-border-color: var(--bs-primary-text-emphasis); } [data-mode="dark"] .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text-emphasis); --bs-btn-border-color: var(--bs-secondary-text-emphasis); --bs-btn-hover-color: var(--bs-secondary-contrast); --bs-btn-hover-bg: var(--bs-secondary); --bs-btn-hover-border-color: var(--bs-secondary); --bs-btn-disabled-color: var(--bs-secondary-text-emphasis); --bs-btn-disabled-border-color: var(--bs-secondary-text-emphasis); } [data-mode="dark"] .btn-outline-dark, [data-mode="dark"] .btn-outline-light { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-body-color); --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-bg: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-body-color); } [data-mode="dark"] .list-group-item-action:hover, [data-mode="dark"] .list-group-item-action:focus { background-color: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }