Fullstackwebapps met Next.js 15 · Les

Responsive design en dark mode

Bouw lay-outs die zich met mobile-first-breakpoints aan elk scherm aanpassen en voeg met CSS-variabelen en Tailwind een verzorgde, gebruikersbewuste dark mode toe.

Les 4 van 413 stappen

Responsive design en dark mode is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 4 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 Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Mobile-first denken

Responsief ontwerp betekent één lay-out die zich aanpast aan telefoons, tablets en desktops. De moderne aanpak is mobile-first: style het kleine scherm eerst en voeg daarna verbeteringen voor grotere schermen toe.

Mediaquery's

De CSS-regel @media past stijlen alleen toe boven of onder een bepaalde breedte. Bij mobile-first gebruik je breekpunten met min-width.

.grid { display: block; }
@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

Vloeiende eenheden

Gebruik bij voorkeur relatieve eenheden, zodat lay-outs natuurlijk meeschalen:

rem voor tussenruimte en tekengrootte
% en fr voor breedtes
clamp() voor vloeiende typografie

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Tailwind-breekpunten

Tailwind maakt responsiviteit inline met voorvoegsels zoals sm:, md: en lg:. Klassen zonder voorvoegsel vormen de mobiele basis.

<div class="block md:grid md:grid-cols-2 lg:grid-cols-3">

Flexbox en Grid

Twee lay-outsystemen dekken bijna alles:

Flexbox voor eendimensionale rijen of kolommen
Grid voor tweedimensionale lay-outs

Combineer ze en laat breekpunten de inhoud opnieuw rangschikken.

Wat is de donkere modus?

De donkere modus vervangt een licht kleurenpalet door een donker palet om oogvermoeidheid te verminderen en batterij te besparen op OLED-schermen. Een goede implementatie houdt rekening met de systeemvoorkeur van de gebruiker en laat die voorkeur overschrijven.

Systeemvoorkeur

De CSS-mediafunctie prefers-color-scheme detecteert het thema van het besturingssysteem, zodat je standaard de keuze kunt gebruiken die de gebruiker al heeft gemaakt.

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

CSS-variabelen voor thema's

Definieer kleuren als aangepaste CSS-eigenschappen op het hoofdelement en overschrijf ze daarna voor de donkere modus. Componenten verwijzen naar variabelen, zodat één schakelaar de hele app opnieuw inkleurt.

:root { --bg: #fff; --fg: #111; }
[data-theme='dark'] { --bg: #111; --fg: #eee; }
body { background: var(--bg); color: var(--fg); }

De donkere variant van Tailwind

Tailwind levert een dark:-variant. Schakel een dark-klasse in op het html-element en de donkere hulpprogramma's worden actief.

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">

De keuze bewaren

Sla de keuze van de gebruiker op in localStorage en pas die vóór het tekenen toe om een korte weergave van het verkeerde thema te voorkomen. Bibliotheken zoals next-themes regelen dit netjes in Next.js.

const theme = localStorage.getItem('theme') || 'system';
document.documentElement.dataset.theme = theme;

Toegankelijkheid en contrast

Welk thema je ook gebruikt, houd tekst leesbaar. Streef volgens WCAG naar een contrastverhouding van ten minste 4.5:1 voor hoofdtekst. Test beide thema's; een kleur die op wit werkt, kan op een donkere achtergrond onvoldoende zijn.

Korte controle

Test je kennis van responsiviteit en thema's.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt adaptieve stijlen geleerd:

Mediaquery's volgens mobile-first en vloeiende eenheden passen lay-outs aan
Voorvoegsels zoals md:/lg: van Tailwind maken breekpunten inline
CSS-variabelen samen met prefers-color-scheme maken de donkere modus mogelijk
Bewaar de keuze en zorg in beide thema's voor toegankelijk contrast

Gratis beginnen

Leer TypeScript 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: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Responsive design en dark mode” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Responsive design en dark mode”, 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 Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “Responsive design en dark mode”?

Bouw lay-outs die zich met mobile-first-breakpoints aan elk scherm aanpassen en voeg met CSS-variabelen en Tailwind een verzorgde, gebruikersbewuste dark mode toe. Je oefent met Fullstackwebapps met Next.js 15 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 Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 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 4 van 4.

Hoe lang duurt de les “Responsive design en dark mode”?

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 Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 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

← Terug naar Fullstackwebapps met Next.js 15