Next.js 15: fullstack-webbappar · Lektion

Responsiv design och mörkt läge

Skapa layouter som anpassar sig till alla skärmar med mobile-first-brytpunkter och lägg till ett genomarbetat, användaranpassat mörkt läge med CSS-variabler och Tailwind.

Lektion 4 av 413 steg

Responsiv design och mörkt läge är en gratis lektion i Next.js 15: fullstack-webbappar på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15: fullstack-webbappar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Mobile-first-tänkande

Responsiv design innebär en layout som anpassar sig till telefoner, surfplattor och datorer. Det moderna tillvägagångssättet är mobile-first: utforma först för små skärmar och lägg sedan till förbättringar för större skärmar.

Media queries

CSS-regeln @media tillämpar stilar endast över eller under en viss bredd. Mobile-first använder brytpunkter med min-width.

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

Flexibla enheter

Föredra relativa enheter så att layouter skalas naturligt:

rem för avstånd och teckenstorlek
% och fr för bredder
clamp() för flexibel typografi

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

Tailwind-brytpunkter

Tailwind gör responsivitet möjlig direkt i klassnamnen med prefix som sm:, md: och lg:. Klasser utan prefix utgör basen för mobiler.

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

Flexbox och Grid

Två layoutmotorer täcker nästan alla behov:

Flexbox för endimensionella rader eller kolumner
Grid för tvådimensionella layouter

Kombinera dem och låt brytpunkterna omflöda innehållet.

Vad är mörkt läge?

Mörkt läge ersätter en ljus färgpalett med en mörk för att minska ansträngningen för ögonen och spara batteri på OLED-skärmar. En bra implementation respekterar användarens systeminställning och låter användaren åsidosätta den.

Systeminställning

CSS-mediefunktionen prefers-color-scheme identifierar operativsystemets tema, så att ni kan använda det som standardval.

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

CSS-variabler för teman

Definiera färger som anpassade CSS-egenskaper på rotelementet och åsidosätt dem sedan för mörkt läge. Komponenterna refererar till variablerna, så ett enda byte målar om hela appen.

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

Tailwinds dark-variant

Tailwind levereras med varianten dark:. Växla en dark-klass på html-elementet, så aktiveras verktygsklasserna för mörkt läge.

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

Spara valet

Spara användarens val i localStorage och tillämpa det före rendering för att undvika att fel tema blinkar till. Bibliotek som next-themes hanterar detta smidigt i Next.js.

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

Tillgänglighet och kontrast

Oavsett tema ska texten vara lättläst. Sikta enligt WCAG på ett kontrastförhållande på minst 4.5:1 för brödtext. Testa båda temana; en färg som fungerar på vitt kanske inte fungerar på mörkt.

Snabbtest

Testa era kunskaper om responsiv design och teman.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er adaptiv styling:

Mobile-first-baserade media queries och flexibla enheter anpassar layouter
Tailwinds prefix md:/lg: gör brytpunkter till en del av klassnamnen
CSS-variabler tillsammans med prefers-color-scheme möjliggör mörkt läge
Spara valet och se till att kontrasten är tillgänglig i båda temana

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Responsiv design och mörkt läge” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15: fullstack-webbappar, inklusive ”Responsiv design och mörkt läge”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Vad lär jag mig i ”Responsiv design och mörkt läge”?

Skapa layouter som anpassar sig till alla skärmar med mobile-first-brytpunkter och lägg till ett genomarbetat, användaranpassat mörkt läge med CSS-variabler och Tailwind. Ni övar på Next.js 15: fullstack-webbappar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15: fullstack-webbappar?

Du behöver inga förkunskaper. Utbildningen i Next.js 15: fullstack-webbappar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Responsiv design och mörkt läge”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15: fullstack-webbappar-lektionen?

Ja. Varje Next.js 15: fullstack-webbappar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Next.js 15: fullstack-webbappar