/* * Dark mode, built from NLC's brand palette: * Fire orange #FF3B00 - accent / CTAs (already the brand's ".secondary" color in light mode) * Scarlet #691414 - dark surfaces (nav, cards, modals, footer) * Cosmic latte #F3EFE7 - text on dark surfaces (already the brand's page-bg in light mode) * Black #000000 - page background * * Everything below lives under html[data-theme="dark"], stamped on by an inline script * in fragment/layout::header (see globalAttributes() in GlobalControllerAdvice for the * User.darkModeEnabled -> darkModeEnabled model attribute driving it). Light mode is completely * untouched - nothing here is read unless that attribute is present. * * A couple of neutral tones that are NOT in the brand palette are used for elevation only * (translucent white-over-black overlays for a second surface layer, and a lightened grey for * helper text) - there's no brand color to draw those from, and solid Scarlet everywhere would * flatten every layer of the UI into a single plane. */ html[data-theme="dark"] { --main-theme-color: #691414; /* Scarlet - .primary bg (was white) */ --main-theme-color-faded: #7a1f1f; /* progress-bar track */ --secondary-theme-color: #ff3b00; /* Fire orange - unchanged, already on-brand */ --tertiary-theme-color: #2a1010; /* dark neutral surface (was light grey) */ --forth-theme-color: #000000; /* Black - page/main background */ --fifth-theme-color: #f3efe7; /* Cosmic latte - secondary-text (was Scarlet, unreadable on black) */ --body-color: rgba(243, 239, 231, 0.85); /* Cosmic latte - base body text */ --primary-text: #f3efe7; /* text on .primary (Scarlet) buttons */ --dm-surface: #691414; --dm-surface-2: rgba(255, 255, 255, 0.06); --dm-border: rgba(243, 239, 231, 0.14); --dm-text: #f3efe7; --dm-accent: #ff3b00; } html[data-theme="dark"] body { background: var(--forth-theme-color); } /* Plain inline links only - explicitly NOT .btn/.btn-flat/.btn-floating, since Materialize's own .btn rule sets color:#fff with the same specificity as a bare "a" selector, and this file loads after materialize.min.css, so an unscoped "a{color:...}" here was winning the tiebreak and turning every button's text/icon (Cancel, the trash-can delete icon, etc.) the accent color instead of leaving Materialize's white alone. */ html[data-theme="dark"] a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-floating):not(.btn-flat) { color: var(--dm-accent); } html[data-theme="dark"] .btn-flat { color: var(--dm-text) !important; } html[data-theme="dark"] .secondary-text { color: var(--fifth-theme-color) !important; } html[data-theme="dark"] .grey-text { color: #bdbdbd !important; } /* ===================== Nav / footer ===================== */ html[data-theme="dark"] nav, html[data-theme="dark"] nav .sidenav { background-color: var(--dm-surface) !important; } html[data-theme="dark"] nav .nav-wrapper li a, html[data-theme="dark"] .sidenav li a { color: var(--dm-text) !important; } html[data-theme="dark"] nav .nav-wrapper li ul a { color: var(--dm-accent) !important; } html[data-theme="dark"] .sidenav-trigger { color: var(--dm-text) !important; } html[data-theme="dark"] .weather-hover-card { background: var(--dm-surface) !important; color: var(--dm-text) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .weather-hover-card-title, html[data-theme="dark"] .weather-hover-card-range, html[data-theme="dark"] .weather-hover-card-details { color: rgba(243, 239, 231, 0.65) !important; } html[data-theme="dark"] .weather-hover-card-temp-main, html[data-theme="dark"] .weather-hover-card-desc { color: var(--dm-text) !important; } html[data-theme="dark"] .weather-hover-card-details { border-top-color: var(--dm-border) !important; } html[data-theme="dark"] .weather-hover-card-alert { background: rgba(255, 152, 0, 0.15) !important; color: #ffcc80 !important; border-left-color: #ff9800 !important; } html[data-theme="dark"] .profile-hover-card { background: var(--dm-surface) !important; color: var(--dm-text) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .profile-hover-card-name { color: var(--dm-text) !important; } html[data-theme="dark"] .profile-hover-card-title, html[data-theme="dark"] .profile-hover-card-department { color: rgba(243, 239, 231, 0.65) !important; } html[data-theme="dark"] .profile-hover-card-links { border-top-color: var(--dm-border) !important; } html[data-theme="dark"] .profile-hover-card-link { color: rgba(243, 239, 231, 0.65) !important; } html[data-theme="dark"] .profile-hover-card-link:hover { color: var(--dm-text) !important; } html[data-theme="dark"] .a { color: var(--dm-text) !important; } html[data-theme="dark"] footer { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } /* ===================== Cards / collections / panels ===================== */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-panel, html[data-theme="dark"] .collection, html[data-theme="dark"] .collection .collection-item, html[data-theme="dark"] .day-card, html[data-theme="dark"] .stat-pills { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } /* Explicit Materialize color utility panels (e.g. "green lighten-4" success/error banners) keep their own background - they're already a deliberate colored callout, not page chrome. */ html[data-theme="dark"] .card-panel[class*="lighten"] { color: #212121; } /* .stat-pill and .week-nav-pill are both hardcoded white/light-grey in overview.html's own