Styling en theming
Kleuren, tussenruimte en donkere modus via een prompt.
Styling en theming is een gratis Vibe-coding-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.
Van 'het werkt' naar 'wauw'
Je kunt binnen enkele seconden een werkende UI genereren — maar het verschil tussen een amateuristische en een verzorgde app zit in de opmaak: kleur, witruimte, typografie en een samenhangend thema.
In deze les leer je dit allemaal met prompts te sturen, een herbruikbaar thema in te stellen en een fraaie donkere modus toe te voegen — zonder een kleurenkiezer aan te raken als je dat niet wilt.
Een thema is een gedeeld recept
Een thema is een kleine verzameling ontwerpkeuzes — je kleuren, lettertypen en witruimte — die je één keer definieert en overal hergebruikt. Als je het thema wijzigt, wordt de hele app bijgewerkt.
Vraag de AI om ontwerptokens in te stellen: benoemde waarden zoals 'hoofdkleur' of 'grote witruimte' waarnaar componenten verwijzen in plaats van waarden rechtstreeks vast te leggen.
"Set up a theme with design tokens: a primary color, a secondary
color, a neutral grey scale, a base font, and consistent spacing
steps (4, 8, 16, 24, 32px). Make all my components use these tokens
instead of hard-coded values."Een kleurenpalet kiezen met een prompt
Je hebt geen kleurentheorie nodig. Beschrijf een gevoel en laat de AI een palet voorstellen, dat je daarna kunt aanpassen.
Vraag om een hoofdkleur (je merk), een accentkleur (voor accenten) en neutrale kleuren (voor achtergronden en tekst). Vraag om de daadwerkelijke hex-codes, zodat je ze definitief kunt vastleggen.
"Suggest a color palette for a healthy-eating app: fresh, calm,
and trustworthy. Give me a primary, an accent, and 5 neutral greys,
as hex codes. Then apply them across all my components."Witruimte: het geheim van 'strak'
De meeste amateuristische UI's zien er benauwd uit. De oplossing is consistente witruimte en lege ruimte. Ontwerpers gebruiken een schaal voor witruimte (veelvouden van 4 of 8 px), zodat tussenruimtes bewust gekozen aanvoelen.
Als iets niet goed voelt, ligt dat meestal aan de witruimte. Zeg gewoon "meer ademruimte" en de AI weet wat ze moet doen.
"Increase the whitespace throughout the page. Use a consistent
8px spacing scale. Add more padding inside cards and more gap
between sections so it feels calm and uncluttered."Typografie die ontworpen aanvoelt
Lettertypen bepalen voor een groot deel de persoonlijkheid. Vraag om een typografische schaal (duidelijke formaten voor h1, h2, hoofdtekst en bijschriften) en een goede regelhoogte voor de leesbaarheid.
Door een opvallend lettertype voor koppen te combineren met een helder lettertype voor de hoofdtekst, til je een ontwerp direct naar een hoger niveau.
"Set up typography: use 'Inter' for body text and a slightly bolder
geometric font for headings. Define a clear scale (h1 48px, h2 32px,
h3 24px, body 16px) with comfortable line height. Apply it everywhere."Maak kennis met Tailwind (globaal)
De meeste AI-tools voor UI's gebruiken Tailwind CSS voor de opmaak — hulpprogrammaklassen zoals p-4 (opvulling) of text-lg (grote tekst) die rechtstreeks in de opmaak staan.
Je schrijft deze zelden zelf, maar als je ze herkent, kun je nauwkeurige feedback geven, zoals "gebruik hier een groter tekstformaat".
<button class="px-4 py-2 rounded-lg bg-blue-600
text-white text-sm font-semibold hover:bg-blue-700">
Save
</button>Een donkere modus toevoegen
Een donkere modus wordt verwacht in moderne apps. De juiste aanpak is om lichte en donkere versies van je thematokens te definiëren en vervolgens een schakelaar tussen beide te laten wisselen.
Vraag de AI om kleuren afhankelijk te maken van het thema in plaats van ze rechtstreeks vast te leggen, zodat de donkere modus overal gewoon werkt.
"Add dark mode. Create a dark version of my color tokens: dark
backgrounds, light text, and slightly muted accents. Add a toggle
in the navbar that switches themes, and remember the user's choice."Een themaschakelaar simuleren
Onder de motorkap betekent wisselen tussen thema's simpelweg dat je een andere verzameling kleurwaarden kiest. Hier is een klein JavaScript-model van dat idee — voer het uit om te zien hoe een schakelaar kleuren uit een themaobject kiest.
const themes = {
light: { bg: '#ffffff', text: '#111111' },
dark: { bg: '#111111', text: '#f5f5f5' }
};
let current = 'light';
function toggle() {
current = current === 'light' ? 'dark' : 'light';
const t = themes[current];
console.log(current + ' -> bg ' + t.bg + ', text ' + t.text);
}
toggle();
toggle();Consistentie is belangrijker dan slimheid
Een mooie app is niet een app met de meest bijzondere knop — het is een app waarin alles bij elkaar past. Dezelfde hoekradius, dezelfde schaduwstijl, dezelfde accentkleur en hetzelfde ritme in de witruimte.
Als je inconsistentie opmerkt, vraag je de AI om die in één keer in de hele app gelijk te trekken.
"Audit my app for visual inconsistencies. Make all corner radii,
shadows, button styles, and spacing consistent. Use my theme tokens
everywhere and remove any one-off hard-coded colors."Werk details af: beweging en toestanden
Kleine details stralen kwaliteit uit: subtiele aanwijseffecten, vloeiende overgangen en duidelijke focus-toestanden voor toegankelijkheid. Vraag om rustige animatie — overdrijf het nooit.
Deze laatste afwerking laat een gegenereerde UI met de hand gemaakt aanvoelen.
"Add subtle polish: smooth 150ms transitions on hover, a gentle
lift on cards, and clear keyboard focus rings on buttons and inputs.
Keep animations tasteful and quick, not flashy."Oefening: geef het een nieuwe stijl met twee prompts
Neem een UI die je hebt gegenereerd en geef die met alleen een ander palet en een ander lettertype een compleet nieuwe identiteit. Kijk hoe een ontwerp dat door een thema wordt gestuurd direct verandert. Dit is de kracht van opmaak met tokens in plaats van handmatig.
Prompt 1: "Switch the theme to a warm sunset palette:
deep orange primary, soft pink accent, cream backgrounds."
Prompt 2: "Change headings to a bold rounded font and add
dark mode with a matching warm-dark variant."Korte controle
Waarom is het beter om een thema met ontwerptokens in te stellen dan elk onderdeel op te maken met rechtstreeks vastgelegde kleuren?
Samenvatting: mooi met een prompt
Je hebt geleerd hoe je het uiterlijk van een app met woorden beheerst: definieer een thema met ontwerptokens, kies op gevoel een kleurenpalet, los een 'krappe' uitstraling op met consistente tussenruimte, stel een typografische schaal in en voeg donkere modus toe door kleuren thema-afhankelijk te maken.
Werk het geheel af met subtiele bewegingen en streef vooral naar consistentie. In de volgende les maak je je prachtige ontwerp geschikt voor zowel telefoons als desktops — responsief ontwerp met prompts.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 25
- Lessen
- 100
Veelgestelde vragen
Is de les “Styling en theming” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “Styling en theming”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vibe-coding bevat in totaal 4 lessen.
Wat leer ik in “Styling en theming”?
Kleuren, tussenruimte en donkere modus via een prompt. Je oefent met Vibe-coding door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vibe-coding te beginnen?
Ervaring vooraf is niet nodig. Vibe-coding op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Styling en theming”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vibe-coding?
Ja. Elke les over Vibe-coding bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een UI in woorden beschrijven
- Componenten genereren
- Styling en theming
- Responsief maken