Verwendung von CSS-Variablen zur dynamischen Änderung des Website-Themes

In der Webentwicklung sind Flexibilität und Dynamik des Designs von großer Bedeutung. CSS-Variablen sind ein leistungsstarkes Werkzeug zur effektiven Manipulation von Stilen, das es ermöglicht, das Thema der Website einfach und schnell zu ändern.

Was sind CSS-Variablen?

CSS-Variablen oder CSS-Variablen sind ein Weg, um Werte von CSS-Eigenschaften in Variablen zu speichern. Sie werden im Format --variable-name definiert und mit var(--variable-name) verwendet. Dies gibt Entwicklern die Möglichkeit, Zeit und Aufwand bei Änderungen der Stile zu sparen und die Code-Duplikation zu reduzieren.

:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
}

body {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

Dynamische Änderung des Website-Themas

Ein dynamisches Thema mit CSS-Variablen zu erstellen, ist nicht nur praktisch, sondern auch ziemlich einfach. Dazu müssen die Werte der Variablen je nach gewähltem Thema, z.B. hell oder dunkel, geändert werden.

Praktisches Beispiel

1. Standardwerte für Variablen festlegen:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

1. Alternative Farbschemata definieren:

[data-theme="dark"] {
  --bg-color: #333333;
  --text-color: #ffffff;
}

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
}

1. Themenwechsel mit JavaScript:

const toggleTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
};

document.getElementById('theme-switcher').addEventListener('click', toggleTheme);

Dieses Skript ändert das Attribut data-theme des html-Elements beim Klicken auf die Schaltfläche mit der ID theme-switcher.

Vorteile der Verwendung von CSS-Variablen

• Leichte Wartung: Möglichkeit, das Thema ohne großen Aufwand zu ändern.
• Reduzierung der Code-Duplikation: Einmal eine Variable festlegen – und sie ist im gesamten CSS-Dokument verfügbar.
• Bessere Strukturierung: CSS-Variablen helfen, den Code sauberer und verständlicher zu machen.
• Dynamik und Interaktivität: Einfache Verwendung von JavaScript zur dynamischen Änderung von Themen.