/* =========================================================================== hsb-nacht.css — de donkere stand =========================================================================== WAT DIT BESTAND DOET hsb-merk.css regelt het logo en de merkkleuren in de donkere stand. Dit bestand doet de rest van de pagina: de achtergrond, de tekst, de kaarten, de lijnen en de tabellen. WAAROM HET WERKT MET ZO WEINIG REGELS Twee meevallers in jullie eigen CSS: 1. site.css zet body op var(--white) en var(--text-main). Die twee tokens staan bovenin in :root. Door ze hieronder opnieuw te zetten volgt de hele pagina mee, zonder dat er één selector bij hoeft. 2. Bootstrap 5 werkt met --bs-body-bg, --bs-border-color en zo verder. Diezelfde truc werkt daar dus ook. Daarna blijven alleen de losse hulpklassen over die een kleur hard neerzetten: bg-white, bg-light en text-dark. Die staan onderaan. LAAD DIT ALS LAATSTE Na site.css en na hsb-merk.css, anders winnen die. HOE DE STAND WORDT GEZET assets/js/hsb-thema.js zet data-thema="donker" of "licht" op , en onthoudt de keuze. Staat er niets, dan geldt de systeemvoorkeur van de bezoeker. De handmatige keuze wint altijd van het systeem; vandaar overal die :root:not([data-thema="licht"]) voor de media query. =========================================================================== */ /* --------------------------------------------------------------------------- De tokens --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { /* van site.css */ --white: #0E1C27; --bg-light: #152836; --text-main: #E8EDF2; --text-muted: #9DB0C0; /* van Bootstrap */ --bs-body-bg: #0E1C27; --bs-body-color: #E8EDF2; --bs-emphasis-color: #FFFFFF; --bs-secondary-color: #9DB0C0; --bs-secondary-bg: #152836; --bs-tertiary-bg: #152836; --bs-border-color: #22394B; --bs-card-bg: #152836; --bs-card-border-color:#22394B; --bs-heading-color: #E8EDF2; --bs-link-color: #7FB3DA; --bs-link-hover-color: #A6CCEA; color-scheme: dark; } } :root[data-thema="donker"] { --white: #0E1C27; --bg-light: #152836; --text-main: #E8EDF2; --text-muted: #9DB0C0; --bs-body-bg: #0E1C27; --bs-body-color: #E8EDF2; --bs-emphasis-color: #FFFFFF; --bs-secondary-color: #9DB0C0; --bs-secondary-bg: #152836; --bs-tertiary-bg: #152836; --bs-border-color: #22394B; --bs-card-bg: #152836; --bs-card-border-color:#22394B; --bs-heading-color: #E8EDF2; --bs-link-color: #7FB3DA; --bs-link-hover-color: #A6CCEA; color-scheme: dark; } /* --------------------------------------------------------------------------- De hulpklassen die een kleur hard neerzetten --------------------------------------------------------------------------- bg-white staat 255 keer in de opmaak, bg-light 140 keer en text-dark 91 keer. Die luisteren niet naar een token, dus die moeten hier apart. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .bg-white { background-color: #152836 !important; } :root:not([data-thema="licht"]) .bg-light { background-color: #152836 !important; } :root:not([data-thema="licht"]) .text-dark { color: #E8EDF2 !important; } :root:not([data-thema="licht"]) .navbar-shadow { box-shadow: 0 1px 0 #22394B; } } :root[data-thema="donker"] .bg-white { background-color: #152836 !important; } :root[data-thema="donker"] .bg-light { background-color: #152836 !important; } :root[data-thema="donker"] .text-dark { color: #E8EDF2 !important; } :root[data-thema="donker"] .navbar-shadow { box-shadow: 0 1px 0 #22394B; } /* --------------------------------------------------------------------------- De knop in de menubalk --------------------------------------------------------------------------- Eén knop met twee iconen erin: een zon en een maan. Welke er te zien is bepaalt de CSS, niet het JavaScript. Dat scheelt een afhankelijkheid en het blijft kloppen als het script niet laadt. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- WAAROM DEZE KNOP GEEN RANDJE MEER HEEFT --------------------------------------------------------------------------- Hier stond een knop van 40 bij 40 met een rand eromheen en een ronde hoek. Op zichzelf netjes, maar hij staat in een rij met vier andere: zoeken, bellen, delen en favorieten. Die vier zijn kale iconen zonder rand. Eén knop met een cirkel ertussen vier zonder leest niet als "dit is een knop", maar als "hier is iets misgegaan". Het oog ziet de uitzondering, niet de functie. Nu is het een kaal icoon net als de rest. Dezelfde maat, dezelfde kleur, dezelfde tussenruimte. Dat hij aanklikbaar is blijkt uit de aanwijzer en uit het feit dat de zon in een maan verandert — niet uit een randje. Het klikgebied blijft wel 40 bij 40. Een icoon van 20 px is op een telefoon te klein om te raken; die ruimte eromheen hoort er te zijn, ook als je hem niet ziet. --------------------------------------------------------------------------- */ .thema-knop { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 999px; transition: color .18s ease, background-color .18s ease; } .thema-knop:hover, .thema-knop:focus-visible { color: var(--brand-orange, #f56c20); } /* Standaard, in de lichte stand, staat de maan aan: die biedt donker aan. */ .thema-knop__zon { display: none; } .thema-knop__maan { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .thema-knop__zon { display: block; } :root:not([data-thema="licht"]) .thema-knop__maan { display: none; } } :root[data-thema="donker"] .thema-knop__zon { display: block; } :root[data-thema="donker"] .thema-knop__maan { display: none; } /* Zolang het script niet heeft gedraaid blijft de knop weg. Een knop die niets doet is erger dan geen knop. */ .thema-knop { visibility: hidden; } :root[data-thema-klaar] .thema-knop { visibility: visible; }