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, die es ermöglichen, 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 ermöglicht Entwicklern, Zeit und Mühe bei Änderungen der Stile zu sparen, indem es die Duplizierung von Code reduziert.
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
}
body {
color: var(--primary-color);
background-color: var(--secondary-color);
}
Dynamisches Ändern des Website-Themen
Eine dynamische Themenänderung mit CSS-Variablen ist nicht nur praktisch, sondern auch recht einfach. Dazu müssen die Werte der Variablen je nach gewähltem Thema, z. B. hell oder dunkel, geändert werden.
Praktisches Beispiel
- Standardwerte für Variablen festlegen:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
- Alternative Farbschemata definieren:
[data-theme="dark"] {
--bg-color: #333333;
--text-color: #ffffff;
}
[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #000000;
}
- 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 leichter verständlich zu machen.
- Dynamik und Interaktivität: Einfache Verwendung von JavaScript für dynamische Themenänderungen.