/* ===================================================================== OSAV — donkere modus --------------------------------------------------------------------- De ENIGE plek in het project waar donkere kleuren staan. Geactiveerd door data-theme="dark" op . OSAV START LICHT. Dat is een bewuste afwijking van IUASR-SIS, dat donker start: de helderheid die dit systeem nastreeft is een lichte werkvlakte met een diepe zijbalk. Wie donker wil, zet de schakelaar om en dat wordt onthouden. HOE DIT BESTAND WERKT: bijna alles gebeurt door de tokens uit osav.css te herdefiniëren. Alleen vlakken die in osav.css een HARDE kleur hebben (#FFFFFF op een kaart, de witte actieve navigatiekaart) hebben hier een eigen regel nodig. DRIE REGRESSIES DIE IUASR-SIS HIER HEEFT GEHAD, en die hier dus niet mogen terugkomen: 1. een harde #FFFFFF in een component — blijft wit op donker; 2. een kleur in een Blade met een terugval naar een token dat niet bestond — dan gold ALTIJD de terugval, dus de lichte kleur; 3. rgba() met alpha als achtergrond van een kaart — dan schijnt de donkere laag eronder door en verandert de kleur met de context. ThemeTest bewaakt punt 1 en 2. ===================================================================== */ html[data-theme='dark'] { color-scheme: dark; } html[data-theme='dark'] { /* --- Merk: indigo wordt tekstkleur, de VULLING gaat naar een accent --- */ --brand: #C3BDE4; /* leesbaar op donker; was de vulkleur */ --brand-hover: #D9D5F0; --brand-soft: #262038; --brand-tint: rgba(255, 255, 255, .07); --brand-tint-2: rgba(255, 255, 255, .04); --accent: #FF6B80; /* rood, lichter zodat het op donker leest */ --accent-hover: #FF8496; --heritage: #57C39C; --gold: #E2B552; /* --- Vlakken en inkt ------------------------------------------------ */ --canvas: #12101C; --surface: #1C1930; --surface-2: #232037; --sidebar: #171426; --sidebar-ink: #E9E7F5; --sidebar-muted: #A9A4C2; --ink: #E9E7F5; --ink-2: #C4BFD9; --ink-3: #A29CBC; /* 5.2:1 op --surface */ --ink-on-brand: #171426; /* donkere tekst op de nu LICHTE merkvulling */ --line: rgba(255, 255, 255, .16); --line-subtle: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .28); /* --- Statussen: dezelfde betekenis, omgekeerd contrast --------------- */ --ok: #6FD79A; --ok-bg: #17352A; --warn: #E9C46A; --warn-bg: #37301B; --danger: #FF8A80; --danger-bg: #3B1F22; --neutral: #B3BDD1; --neutral-bg: #262B38; --info: #8FBEF0; --info-bg: #1B2839; --shadow-card: rgba(0, 0, 0, .45) 0 1px 3px, rgba(0, 0, 0, .35) 0 8px 24px -12px; --shadow-pop: rgba(0, 0, 0, .55) 0 2px 6px, rgba(0, 0, 0, .5) 0 16px 40px -14px; } /* --------------------------------------------------------------------- Vlakken met een HARDE kleur in osav.css. Alleen deze hebben een eigen regel nodig; al het andere volgt uit de tokens hierboven. --------------------------------------------------------------------- */ /* * De zijbalk moet een RAND houden. * * In lichte modus scheidt de diepe indigo balk zich vanzelf van de lichte * werkvlakte. In donkere modus staat een donkere balk tegen een donkere * vlakte en valt die scheiding weg: het scherm leest als een grijs vlak * waarin het menu zweeft. Een hairline zet de scheiding terug zonder de * kleur te veranderen. */ html[data-theme='dark'] .osav-sidebar { background: #1A1730; border-inline-end: 1px solid rgba(255, 255, 255, .09); } /* De actieve navigatiekaart is in licht een WIT vlak in de donkere balk. In donkere modus zou wit knallen; hier wordt het een lichter vlak van dezelfde balk, met de merktekstkleur erop. */ html[data-theme='dark'] .osav-nav__item.is-active { background: #2A2440; color: #FFFFFF; box-shadow: none; } /* De tegel en de kalenderrand in de zijbalk staan al op doorschijnend wit over een donkere balk; die werken in beide standen. De harde witte TEKST erin blijft ook in donkere modus juist. */ /* De merkvlakken die in licht indigo waren gevuld met witte tekst. In donker draait dat om: een licht vlak met donkere tekst leest daar beter dan een nog donkerder vlak op een donkere achtergrond. */ html[data-theme='dark'] .osav-header__logo .mark, html[data-theme='dark'] .osav-user__avatar, html[data-theme='dark'] .osav-login__mark, html[data-theme='dark'] .osav-weekcal__tbl td.today, html[data-theme='dark'] .osav-lang__opt.is-active, html[data-theme='dark'] .osav-btn--primary { background: var(--brand); color: var(--ink-on-brand); } html[data-theme='dark'] .osav-btn--primary:hover { background: var(--brand-hover); color: var(--ink-on-brand); } /* Gevaar blijft een gevulde knop met lichte tekst — daar draait niets om, want de rode vulling is in beide standen donker genoeg voor witte tekst. */ html[data-theme='dark'] .osav-btn--danger { background: #A81C2E; color: #FFFFFF; } html[data-theme='dark'] .osav-btn--danger:hover { background: #C02338; color: #FFFFFF; } /* De pijl in een keuzelijst is een ingebakken SVG met een vaste kleur. Zonder deze regel blijft hij bijna onzichtbaar op een donker veld. */ html[data-theme='dark'] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A29CBC' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* De achtergrondlaag onder het uitgeschoven menu mag donkerder. */ html[data-theme='dark'] .osav-backdrop { background: rgba(0, 0, 0, .6); } /* --------------------------------------------------------------------- De schakelaar zelf: zon of maan, afhankelijk van de huidige stand. Staat hier en niet in osav.css omdat beide helften bij elkaar horen. --------------------------------------------------------------------- */ .osav-themebtn .ic-moon { display: inline-flex; } .osav-themebtn .ic-sun { display: none; } html[data-theme='dark'] .osav-themebtn .ic-moon { display: none; } html[data-theme='dark'] .osav-themebtn .ic-sun { display: inline-flex; }