Bauen

Theming

Eine Handvoll Tokens trägt das ganze Aussehen. Ändere Akzent, Radius oder Schrift einmal, und jede Component folgt, hell wie dunkel.

Auf dieser Seite

Tokens#

Components nutzen nie feste Farben, nur Tokens. Jedes Token hat einen Wert für Hell und einen für Dunkel, deshalb funktioniert jede Component in beiden Modi ohne eine Zeile mehr. Als Tailwind-Klassen sehen sie so aus.

Klasse	Dazu	Wofür
bg-background	text-foreground	Die Seite und ihr Text.
bg-surface, bg-surface-2	text-foreground	Ruhige Flächen, die sich von der Seite abheben, etwa ein Band oder ein Codefeld.
bg-card	text-card-foreground	Karten und Panels.
bg-muted	text-muted-foreground	Gedämpfte Flächen und Nebentext.
border-border	border-border-strong	Haarlinien und die kräftigere Kante bei Hover.
bg-primary	text-primary-foreground	Der Akzent, für den Hauptknopf und aktive Zustände.
text-success, text-destructive	bg-warning, text-info	Zustände wie gespeichert, Fehler, Warnung und Hinweis.

Alle Werte mit Farbfeldern stehen auf der Seite Theming. Schatten kommen über shadow-[var(--shadow-sm)] bis --shadow-lg, die helle Oberkante über var(--highlight).

Akzent#

Der Akzent färbt Hauptknöpfe, aktive Zustände, Diagrammlinien und kleine Lichter. Sieben fertige Akzente stehen bereit, data-accent wählt einen, am html-Element für die ganze Seite oder an jedem anderen Element nur für diesen Bereich.

Blaublue
Violettviolet
Cyancyan
Smaragdgreen
Sunsetorange
Rosérose
Neutralneutral

<html class="dark" data-accent="violet">

<!-- Nur dieser Bereich in Grün -->
<section data-accent="green">…</section>

Dark Mode als Standard#

Das Kit startet dunkel. Ohne Klasse zeigt kit.css den hellen Modus, class="dark" am html-Element schaltet auf dunkel. Schreib die Klasse direkt ins Markup, dann ist Dark Mode schon beim ersten Bild da.

<html lang="de" class="dark" data-accent="blue">

Darf jemand umschalten, merkt sich ein kleines Skript im head die Wahl. Ein Umschalter dreht nur die Klasse um.

src/layouts/Layout.astro

<script is:inline>
  // Im <head>, vor dem ersten Bild. Dark bleibt, außer jemand hat Light gewählt.
  const saved = localStorage.getItem('theme');
  document.documentElement.classList.toggle('dark', saved !== 'light');
</script>

function toggleTheme() {
  const dark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', dark ? 'dark' : 'light');
}

Eigene Markenfarbe#

Deine Markenfarbe wird zum Akzent, für hell und dunkel passend abgestimmt.

Farbsystem berechnen
aiw theme --colors brand=#1f6feb
aiw theme rechnet eine OKLCH-Skala in elf Stufen, misst den Kontrast jeder Stufe nach WCAG und schreibt src/styles/theme.css mit dem Akzent für beide Modi und DTCG-Tokens nach tokens/colors.tokens.json.

Nach kit.css einbinden

/* src/styles/global.css */
@import "tailwindcss";
@import "@fontsource-variable/inter";
@import "./kit.css";
@import "./theme.css";

data-accent weglassen
Mit eigener Farbe steht am html-Element nur class="dark". Ein fertiger Akzent hätte im Dark Mode Vorrang vor deiner Farbe.

Von Hand sind es zwei Tokens je Modus. Im Farblabor stellst du sie mit Reglern ein und kopierst das CSS.

src/styles/theme.css

:root {
  --primary: oklch(0.56 0.17 200);
  --primary-foreground: oklch(0.985 0 0);
}
.dark {
  --primary: oklch(0.69 0.14 200);
  --primary-foreground: oklch(0.18 0.03 200);
}

Radius#

Ein Wert steuert alle Rundungen. --radius ist die Basis, daraus leiten sich rounded-sm bis rounded-2xl ab. Kleinere Werte wirken sachlich, größere weich.

:root {
  --radius: 0.5rem; /* Standard 0.75rem */
}

Schrift#

Das Kit arbeitet mit einer Schrift für alles, auch für Code, Zahlen stehen tabellarisch. Der Stapel beginnt mit SF Pro Display auf Apple-Geräten und nimmt sonst Inter, das aiw add kit selbst gehostet mitbringt.

Eine eigene Schrift holst du mit aiw fonts add selbst gehostet ins Projekt, samt Ersatzmaßen gegen Layoutsprünge, und setzt sie als --font-sans.

aiw fonts add Manrope

:root {
  --font-sans: "Manrope Variable", system-ui, sans-serif;
}