Styling og theming
Farver, afstande og dark mode via prompts.
Styling og theming er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Fra "det virker" til "wow"
Du kan generere en fungerende UI på få sekunder — men forskellen på en amatørapp og en gennemarbejdet app er stylingen: farve, afstand, typografi og et sammenhængende tema.
I denne lektion lærer du at styre det hele med prompts, oprette et genanvendeligt tema og tilføje en elegant mørk tilstand — uden at røre en farvevælger, hvis du ikke vil.
Et tema er en fælles opskrift
Et tema er et lille sæt designbeslutninger — dine farver, skrifttyper og afstande — som defineres én gang og genbruges overalt. Ændrer du temaet, bliver hele appen opdateret.
Bed AI'en om at oprette designtokens: navngivne værdier som 'primærfarve' eller 'stor afstand', som komponenterne henviser til i stedet for at bruge faste værdier.
"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."Vælg en farvepalet med en prompt
Du behøver ikke kende farveteori. Beskriv en følelse, og lad AI'en foreslå en palet, som du derefter kan justere.
Bed om en primærfarve (dit brand), en accentfarve (til fremhævelser) og neutrale farver (til baggrunde og tekst). Bed om de faktiske hex-koder, så du kan fastlåse dem.
"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."Afstand: Hemmeligheden bag et "rent" design
De fleste amatørdesigns ser overfyldte ud. Løsningen er ensartede afstande og luft. Designere bruger en afstandsskala (multipla af 4 eller 8 px), så mellemrummene føles bevidste.
Hvis noget føles "forkert", skyldes det som regel afstanden. Sig bare "mere luft", så ved AI'en, hvad den skal gøre.
"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."Typografi, der føles designet
Skrifttyper giver designet masser af personlighed. Bed om en typografisk skala (tydelige størrelser til h1, h2, brødtekst og billedtekster) og en god linjehøjde, der gør teksten let at læse.
Hvis du kombinerer en markant overskriftsskrifttype med en ren brødteksskrifttype, løfter det straks designet.
"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."Mød Tailwind (kort fortalt)
De fleste AI-værktøjer til UI styler med Tailwind CSS — hjælpeklasser som p-4 (indvendig afstand) eller text-lg (stor tekst), der skrives direkte i markuppen.
Du skriver sjældent disse manuelt, men hvis du genkender dem, bliver det lettere at give præcis feedback som "brug en større tekststørrelse her".
<button class="px-4 py-2 rounded-lg bg-blue-600
text-white text-sm font-semibold hover:bg-blue-700">
Save
</button>Tilføj mørk tilstand
Mørk tilstand forventes i moderne apps. Den rigtige måde er at definere lyse og mørke versioner af dine temaværdier og derefter lade en kontakt skifte mellem dem.
Bed AI'en om at gøre farverne temaafhængige i stedet for at bruge faste værdier, så mørk tilstand "bare virker" overalt.
"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."Simulér et temas skift
Under overfladen handler det at skifte tema blot om at vælge et andet sæt farveværdier. Her er en lille JavaScript-model af idéen — kør den for at se, hvordan en kontakt vælger farver fra et temaobjekt.
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();Ensartethed slår snedighed
En smuk app er ikke en app med den mest avancerede knap — det er en app, hvor alt passer sammen. Samme hjørneradius, samme skygge, samme accentfarve og samme afstandsrytme.
Når du opdager uoverensstemmelser, kan du bede AI'en om at gøre dem ensartede i hele appen på én gang.
"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."Finpuds detaljerne: bevægelse og tilstande
Små detaljer signalerer kvalitet: diskrete effekter ved markør, glidende overgange og tydelige fokustilstande af hensyn til tilgængeligheden. Bed om blid animation — overdriv aldrig.
Disse sidste justeringer får en genereret UI til at føles håndlavet.
"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."Øvelse: Skift stil med to prompts
Tag en hvilken som helst UI, du har genereret, og giv den en helt ny identitet med blot en ny farvepalet og en anden skrifttype. Se, hvordan et temadrevet design forvandles med det samme. Det er styrken ved at style med tokens i stedet for manuelt.
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."Hurtigt tjek
Hvorfor er det bedre at oprette et tema med designtokens end at style hver komponent med faste farver?
Opsummering: Smukt med prompts
Du har lært at styre en apps udseende med ord: definere et tema med designtokens, vælge en farvepalet efter stemning, løse problemet med et 'klistret' layout med konsekvent afstand, indstille en typografisk skala og tilføje mørk tilstand ved at gøre farverne temabevidste.
Puds designet af med diskrete animationer, og stræb frem for alt efter ensartethed. I næste lektion lærer du at få dit smukke design til at se godt ud på både telefoner og computere — responsivt design med prompts.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 25
- Lektioner
- 100
Ofte stillede spørgsmål
Er lektionen “Styling og theming” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Styling og theming”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Styling og theming”?
Farver, afstande og dark mode via prompts. Du øver dig i Vibe-programmering med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vibe-programmering?
Der kræves ingen tidligere erfaring. Vibe-programmering på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Styling og theming”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vibe-programmering-lektion?
Ja. Alle Vibe-programmering-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Beskriv en brugerflade med ord
- Generering af komponenter
- Styling og theming
- Gør den responsiv