/* ============================================================ De dag/nacht-knop: de vorm, zonder kleur WAAROM DIT EEN EIGEN BLAD IS. Wat hier staat is structuur en geen smaak: dat de knop een rij is met het icoon naast het woord, hoe groot dat icoon is, en welk van de drie iconen zichtbaar is. Dat is op elke site hetzelfde. De kleuren, de hoeken, de hoogte en de letters zijn wél van het thema en staan in zijn eigen blad. Stond dit in fr-gedeeld.css, dan had franeker een eigen kopie nodig: dat thema laadt fr-gedeeld niet, want het brengt zijn eigen ontwerptokens mee en deelt er geen enkele met de andere drie. Die kopie stond er ook, en liep meteen het risico uit de pas te lopen -- precies het probleem dat deze ronde oplost. Een thema zet dit blad in zijn `sharedCss`, dus het laadt vóór theme.css en een thema kan er gewoon overheen schrijven. Welk icoon zichtbaar is hangt aan `data-thema` op . Dat kenmerk staat er al vóór er JavaScript draait (`_local_portal/partials/weergave_vroeg.php`), dus het icoon klopt ook op een pagina uit de cache en bij een bezoeker zonder JavaScript. ============================================================ */ .fr-thema-knop { display: inline-flex; align-items: center; } /* De maat van het icoon via een eigen waarde, zodat een thema hem in een mediaquery kan verlagen zonder dat de volgorde van de bladen ertoe doet. */ .fr-thema-knop svg { width: var(--fr-weergave-icoon, 18px); height: var(--fr-weergave-icoon, 18px); flex: none; } /* Eén knop, drie iconen: het script wisselt data-thema op , de CSS toont het icoon dat erbij hoort. */ .fr-thema-knop [data-fr-thema-icoon] { display: none; } html[data-thema="auto"] .fr-thema-knop [data-fr-thema-icoon="auto"], html[data-thema="licht"] .fr-thema-knop [data-fr-thema-icoon="licht"], html[data-thema="donker"] .fr-thema-knop [data-fr-thema-icoon="donker"] { display: block; }