Theming

CSS-Variablen

Themes werden durch CSS Custom Properties realisiert:

:root {
  /* Light Theme (Default) */
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
}

[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-text: #fafafa;
}

Theme-Switching

// Theme setzen
function setTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem("theme", theme);
}

// System Preference
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  setTheme("dark");
}

Brand-Theme

[data-theme="brand-a"] {
  --color-primary: #6b4ee6;
  --font-heading: "Brand Font";
}

Tailwind Config

Themes sind in tailwind.config.js integriert:

colors: {
  primary: 'var(--color-primary)',
  background: 'var(--color-bg)',
}

---

Themes sind konfiguriert – Dark Mode ist Pflicht für jedes Theme.