⚡Vibe Coding

Custom Themes erstellen

Deine App, dein Look

Ein eigenes Theme macht deine App wiedererkennbar. Mit CSS-Variablen und Tailwind Config aenderst du Farben, Schriften und Spacing global in einer Datei. Dark Mode inklusive.

Pro-Tip — Der schnelle Weg
Definiere dein Theme als CSS-Variablen in globals.css. So kannst du zwischen Light und Dark Mode wechseln indem du nur die Variablen-Werte aenderst.
Seite 1
1

CSS-Variablen definieren

Lege deine Farben als HSL-Werte in CSS-Variablen an. Shadcn nutzt dieses System und alle Komponenten passen sich automatisch an.

/* globals.css */
:root {
 --background: 0 0% 100%;
 --foreground: 222 84% 5%;
 --primary: 262 83% 58%;
 --primary-foreground: 0 0% 100%;
 --accent: 262 83% 95%;
 --radius: 0.75rem;
}


.dark {
 --background: 222 84% 5%;
 --foreground: 0 0% 98%;
 --primary: 262 83% 68%;
}
2

Tailwind Config anpassen

Referenziere die CSS-Variablen in der Tailwind Config. So kannst du bg-primary, text-foreground und andere Utility-Klassen nutzen.

// tailwind.config.ts
module.exports = {
 theme: {
 extend: {
 colors: {
 background: 'hsl(var(--background))',
 foreground: 'hsl(var(--foreground))',
 primary: {
 DEFAULT: 'hsl(var(--primary))',
 foreground: 'hsl(var(--primary-foreground))'
 }
 },
 fontFamily: {
 sans: ['Inter', 'sans-serif']
 }
 }
 }
}
3

Dark Mode Toggle

Nutze next-themes fuer den Dark Mode Toggle. Es verhindert Flash of Unstyled Content und speichert die Praeferenz automatisch.

npm install next-themes


// providers.tsx
import { ThemeProvider } from 'next-themes'


export function Providers({ children }) {
 return (
 <ThemeProvider attribute='class' defaultTheme='system'>
 {children}
 </ThemeProvider>
 )
}


// Toggle Button
import { useTheme } from 'next-themes'
const { theme, setTheme } = useTheme()
<Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
 {theme === 'dark' ? 'Light' : 'Dark'} Mode
</Button>
4

Custom Fonts laden

Nutze next/font fuer optimiertes Font-Loading. Google Fonts werden lokal gehostet, kein externer Request noetig.

import { Inter, Space_Grotesk } from 'next/font/google'


const inter = Inter({ subsets: ['latin'], variable: '--font-sans' })
const grotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-heading' })


// In layout.tsx:
<body className={`${inter.variable} ${grotesk.variable}`}>
5

Brand-Konsistenz pruefen

Erstelle eine Theme-Preview Seite die alle Farben, Schriften und Komponenten auf einen Blick zeigt. So stellst du sicher dass alles harmonisch aussieht.

Seite 2
Warum das funktioniert
  • CSS-Variablen erlauben Theme-Wechsel ohne JavaScript
  • Tailwind Utilities mit Custom Colors machen Styling konsistent
  • next-themes verhindert den gefuerchteten Flash beim Laden
  • Lokale Fonts mit next/font eliminieren externe Requests und verbessern Performance
Tipps
  • HSL-Farben sind leichter anzupassen als HEX oder RGB
  • Teste dein Theme immer in Light UND Dark Mode
  • Nutze maximal 2 Schriftarten, eine fuer Headings, eine fuer Body
  • Kontrast-Ratio checken fuer Barrierefreiheit mit contrast-ratio.com
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen