it-praxisportal/courses/html_css/07_css_variablen_und_farbwelten

CSS 07: CSS Custom Properties & Farbsysteme 🌈

Willkommen in Modul 07!

In diesem Modul erstellst du ein dynamisches Design-Token-System mit CSS Custom Properties (--variable), nutzt moderne Farbmodelle (HEX, RGB, HSL, OKLCH) und implementierst ein variables Dark/Light Theme.

---

💡 1. Das Wichtigste in Kürze

Deklaration & Zugriff

:root {
  --primary: #3b82f6;
  --bg-surface: oklch(0.98 0.01 240);
  --radius-sm: 6px;
}

.button {
  background-color: var(--primary);
  border-radius: var(--radius-sm);
}

Farbmodelle im Überblick

• HEX: #3b82f6
• RGB / RGBA: rgba(59, 130, 246, 0.8) oder rgb(59 130 246 / 80%)
• HSL: hsl(217, 91%, 60%)
• OKLCH: oklch(0.65 0.22 255) (Sehr große Dynamik auf modernen Displays)

---

🎯 Teilziele in aufgabe.html

1. :root Tokens: Definiere Design-Token (--primary-color, --bg-page, --bg-card, --text-color, --radius).
2. var() Verknüpfung: Formatiere body und .card mit var(...).
3. Farbwelten: Nutze HEX, HSL/RGBA und oklch(...).
4. Farbverlauf: Wende linear-gradient(...) auf .gradient-header an.
5. Theme-Klasse: Überschreibe Variablen in .dark-theme.