/* ========================================================================== HobbyManager — "Soft Muted" theme, DARK MODE Load AFTER theme.css. Activates when the page (or any ancestor, e.g. ) carries data-bs-theme="dark" — Bootstrap 5.3's native color-mode mechanism. Nothing here fires unless that attribute is set. Design intent: no pure black, no pure white — a soft charcoal surface with off-white text and the same desaturated status palette from the light theme, just re-tuned for legibility on a dark background. ========================================================================== */ [data-bs-theme="dark"] { /* Surfaces — layered charcoal, not black */ --bs-body-bg: #1B1E24; --bs-body-color: #E4E6EB; --bs-secondary-bg: #23262E; /* used by some components as a raised surface */ --bs-tertiary-bg: #343B48; /* inputs, .btn-light — needs to read clearly against body-bg */ --bs-secondary-color: #9AA3B2; /* muted/.text-muted */ --bs-border-color: #4A5262; --bs-border-color-translucent: rgba(228, 230, 235, .09); --bs-emphasis-color: #F2F3F5; /* Accent — soft navy blue, kept out of the purple/violet range */ --bs-primary: #6E8FCB; --bs-primary-rgb: 110, 143, 203; --bs-link-color: var(--bs-primary); --bs-link-hover-color: #86A3D6; --bs-focus-ring-color: rgba(110, 143, 203, .3); /* Status palette (secondary/info/success/danger), re-tuned for dark bg */ --bs-secondary: #9BA5B5; --bs-secondary-rgb: 155, 165, 181; --bs-secondary-text-emphasis: #C3CAD6; --bs-secondary-bg-subtle: #2A2E36; --bs-secondary-border-subtle: #3A3F49; --bs-info: #839AE8; --bs-info-rgb: 131, 154, 232; --bs-info-text-emphasis: #BAC6F3; --bs-info-bg-subtle: #262B42; --bs-info-border-subtle: #38406A; --bs-success: #6FAE8C; --bs-success-rgb: 111, 174, 140; --bs-success-text-emphasis: #A9D8BF; --bs-success-bg-subtle: #21322A; --bs-success-border-subtle: #2E4A3D; --bs-danger: #D08A6C; --bs-danger-rgb: 208, 138, 108; --bs-danger-text-emphasis: #E7B79E; --bs-danger-bg-subtle: #332720; --bs-danger-border-subtle: #4A3830; /* Shadows — softer still; dark surfaces need less shadow to read as elevated, and a hard shadow on dark backgrounds looks like a smudge */ --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --bs-box-shadow: 0 2px 6px rgba(0, 0, 0, .3); --bs-box-shadow-lg: 0 6px 20px rgba(0, 0, 0, .35); } /* -------------------------------------------------------------------------- Surfaces that are hardcoded to white/light in the app's own markup and in theme.css need an explicit dark counterpart, since they don't read from body-bg automatically. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); } [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .workboard-container .card-header, [data-bs-theme="dark"] .task-card { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-control { background-color: var(--bs-tertiary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(110, 143, 203, .2) !important; } /* Any element using the bg-light utility (task-status dropdowns, offcanvas form fields styled borderless-light, etc.) — bg-light ships with its own !important in Bootstrap, so it silently overrides plain background rules unless we match it here. This is the fix for "status dropdowns/offcanvas inputs are too bright." */ [data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } /* Browser autofill (very common on login fields) paints its own white background + black text that ignores normal CSS, including !important background-color rules above — this is almost certainly why the login inputs look bright with unreadable text. */ [data-bs-theme="dark"] input:-webkit-autofill, [data-bs-theme="dark"] input:-webkit-autofill:hover, [data-bs-theme="dark"] input:-webkit-autofill:focus { -webkit-text-fill-color: var(--bs-body-color); -webkit-box-shadow: 0 0 0 1000px var(--bs-tertiary-bg) inset; box-shadow: 0 0 0 1000px var(--bs-tertiary-bg) inset; caret-color: var(--bs-body-color); transition: background-color 9999s ease-in-out 0s; } [data-bs-theme="dark"] .btn-light { --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: #3D4552; } /* btn-outline-dark derives its color from --bs-dark, which is left at its default near-black value in dark mode (there's no dark-mode-appropriate "dark" to invert to) - so the outline/text blend into the dark background until hover fills it in. Re-themed the same way .btn-light is above: light text/border by default, filling with the raised surface color on hover/active instead of a near-black one. */ [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--bs-tertiary-bg); --bs-btn-active-border-color: var(--bs-border-color); } [data-bs-theme="dark"] .badge.bg-light { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-bs-theme="dark"] .workboard-container .sortable-list { background-color: #17191F; } [data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-dark-emphasis { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .bg-dark-subtle { background-color: var(--bs-tertiary-bg) !important; } /* Highlighted text on the dark charcoal surface: --bs-info-bg-subtle (#262B42) was almost indistinguishable from body-bg (#1B1E24). Use a stronger translucent wash of the accent and force high-contrast text on top so the selection is obvious without washing the glyphs out. */ [data-bs-theme="dark"] ::selection { background: rgba(var(--bs-primary-rgb), .45); color: var(--bs-emphasis-color); } /* Hobby accent: same hue, re-tuned lightness/saturation for legibility on the dark charcoal surface - same approach as --bs-info etc. above. */ [data-bs-theme="dark"] .hobby-edge, [data-bs-theme="dark"] .hobby-dot, [data-bs-theme="dark"] .acc-momentum-fill { --hobby-accent: hsl(var(--h, 0), 60%, 62%); } /* Accomplishments page: the "before" segment of the momentum bar and the zero-day trend bar are both muted/secondary shapes on their own tertiary-bg track - bg-secondary's default opacity-50 treatment reads fine in light mode but is nearly invisible against the darker dark-mode tertiary-bg, so it needs its own explicit color here rather than relying on opacity alone. */ [data-bs-theme="dark"] .progress-bar.bg-secondary.opacity-50 { opacity: 1 !important; background-color: var(--bs-border-color) !important; }