Vinum levert geen kleuren. Het levert de plekken waar kleuren komen — een set `--vinum-*` CSS-variabelen die zowel de publieke renderer als de hele admin stylen. Zet ze één keer en beide veranderen mee, en daarom lijkt de admin op deze site op deze site en niet op een dashboard.
Zet ze
@import "tailwindcss";@source "../node_modules/@vinumcms/react/src";@source "../node_modules/@vinumcms/admin/src"; :root { --vinum-bg: #f6f6f2; --vinum-fg: #16202e; --vinum-accent: #16202e; --vinum-border: rgba(22, 32, 46, 0.22); --vinum-font-display: "Old Standard TT", serif;}Wat je weglaat valt terug op Vinums standaard, dus een site kan vier variabelen zetten en er doordacht uitzien. De `@source`-regels zijn niet optioneel — Tailwind slaat `node_modules` over, en zonder die regels rendert de admin volledig zonder opmaak terwijl er nergens een fout verschijnt.
Wat de groepen doen
Vlakken — `--vinum-bg`, `--vinum-bg-raised`, `--vinum-bg-invert`. De pagina, een paneel daarop, en het omgekeerde vlak waar een sectie op kan staan.
Inkt — `--vinum-fg`, `--vinum-fg-dim`, `--vinum-fg-faint`, en hun `-invert`-tegenhangers. Lopende tekst, secundaire tekst en haarlijnen. `faint` is een vulling, geen tekstkleur: het is inkt met lage dekking en leest als niets zodra het op woorden terechtkomt.
Accent — `--vinum-accent`, `--vinum-accent-soft`, `--vinum-on-accent`. Wat het oog trekt, en wat daarop leesbaar blijft.
Randen — `--vinum-border` en `--vinum-border-strong`. Een haarlijn, en een lijn die iets betekent.
Typografie — `--vinum-font-display`, `--vinum-font-body`, `--vinum-font-mono`, `--vinum-measure`.
Paren, geen losse kleuren
Elke tone benoemt een achtergrond én de voorgrond die daarop leesbaar blijft. Dat paar is de hele reden dat een auteur een `tone`-keuze krijgt en geen kleurkiezer: twee losse keuzes zijn precies hoe tekst onleesbaar op een accentachtergrond belandt, en het paar maakt dat onmogelijk.
Wat niet met een thema te regelen is
De lay-out. Ruimte, breedtes en de structuur van een blok worden bepaald door wie het blok schreef, niet door een variabele en niet door een auteur. Er is ooit een `space`-variant gebouwd en weer verwijderd omdat die daarmee in tegenspraak was; de redenering staat in `docs/DECISIONS.md`.
De enige plaatsingskeuze die een auteur wél krijgt is `align`, bewust toegelaten en pas nadat de regel met opzet werd gewijzigd in plaats van door aangroei.
Donkere modus
Er is geen schakelaar voor een donkere modus, omdat er niets te schakelen valt: herdefinieer dezelfde variabelen onder welke selector je maar wilt — een media query, een class, een attribuut — en alles volgt, de admin inbegrepen.