CSS entwickelt sich ständig weiter, um Entwicklern mehr Flexibilität und Kontrolle zu bieten. Eine der spannendsten Neuerungen, die sich derzeit in der Entwicklungsphase befindet, sind CSS Custom Functions.
Diese ermöglichen es, eigene Funktionen direkt in CSS zu definieren und Werte dynamisch zu berechnen – ähnlich wie in Programmiersprachen. Besonders nützlich sind sie für dynamische Farbwechsel, wie sie für einen Light- und Darkmode benötigt werden. In diesem Artikel zeige ich, wie wir mit CSS Custom Functions ein flexibles und wartungsfreundliches Farbschema realisieren können.
Die hier vorgestellten CSS Custom Functions befinden sich derzeit noch in der Entwicklungsphase und sind in aktuellen Browsern noch nicht verfügbar. Es gibt noch kein offizielles Release-Datum. Wer bereits jetzt experimentieren möchte, sollte sich die CSS Working Drafts des W3C und experimentelle Features in Chrome Canary anschauen. Da sich die Spezifikation noch ändern kann, könnte die finale Implementierung anders aussehen als in diesem Artikel beschrieben.
Warum CSS Custom Functions?
Bisher haben Entwickler CSS-Variablen (--primary-color, --bg-color, etc.) verwendet, um Farben in verschiedenen Themes zu definieren. Doch CSS Custom Functions gehen einen Schritt weiter:
• Sie erlauben dynamische Berechnungen direkt in CSS
• Sie reduzieren redundanten Code
• Sie machen das Styling leichter anpassbar und wiederverwendbar
Ein Beispiel: Anstatt für jede Farbe zwei Variablen (eine für Light- und eine für Darkmode) zu definieren, können wir eine einzige Funktion nutzen, die automatisch die passende Farbe zurückgibt.
Light- und Darkmode mit CSS Custom Functions
1. Die Custom Function definieren
Mit der neuen @function-Regel erstellen wir eine benutzerdefinierte Funktion --theme-color(), die eine Farbe abhängig vom Modus (light oder dark) zurückgibt:
@function --theme-color(--light, --dark) {
result: if(var(--mode) = light, var(--light), var(--dark));
}
Wie funktioniert die if-Abfrage?
Die if()-Funktion in CSS (die derzeit in Entwicklung ist) funktioniert ähnlich wie eine if-Bedingung in Programmiersprachen:
if(Bedingung, Wert wenn wahr, Wert wenn falsch)
Auf unser Beispiel angewendet:
if(var(--mode) = light, var(--light), var(--dark))
Das bedeutet:
1. var(--mode) = light → Prüft, ob die Variable --mode den Wert light hat.
2. Wenn das wahr ist → Gibt die Farbe zurück, die als erster Parameter (--light) übergeben wurde.
3. Wenn das falsch ist → Gibt die Farbe aus dem zweiten Parameter (--dark) zurück.
Beispielhafte Werte im Browser:
Falls --mode: light; gesetzt ist:
--theme-color(white, black) /* Gibt 'white' zurück */
Falls --mode: dark; gesetzt ist:
--theme-color(white, black) /* Gibt 'black' zurück */
Die if()-Abfrage entscheidet automatisch, welche Farbe zurückgegeben wird, basierend auf der --mode-Variable.
2. Anwendung im Stylesheet
Jetzt nutzen wir die Funktion für den Hintergrund und den Text:
:root {
--mode: light; /* Standardmodus */
}
body {
background-color: --theme-color(white, black);
color: --theme-color(black, white);
}
.button {
background-color: --theme-color(#f0f0f0, #333);
color: --theme-color(#333, #f0f0f0);
}
Die Funktion kann für beliebige Farbkombinationen wiederverwendet werden.
3. Darkmode umschalten – Wie funktioniert der Wechsel?
Damit unser Light- und Darkmode funktioniert, brauchen wir eine Möglichkeit, den --mode-Wert umzuschalten. Dies kann entweder über eine CSS-Klasse oder über JavaScript erfolgen.
Methode 1: Umschalten mit CSS-Klassen
Wir definieren zunächst die Standardwerte im :root-Element (Standard = Lightmode):
:root {
--mode: light;
}
Nun legen wir eine .darkmode-Klasse an, die den Modus auf dark setzt:
.darkmode {
--mode: dark;
}
Methode 2: Umschalten mit JavaScript (Interaktiv mit Button)
Nun möchten wir, dass der Benutzer den Modus per Klick wechseln kann. Dazu fügen wir einen Button in unser HTML ein:
<button class="toggle-mode">Wechsle Modus</button>
Mit folgendem JavaScript-Snippet kann der Modus umgeschaltet werden:
document.querySelector(".toggle-mode").addEventListener("click", () => {
document.documentElement.classList.toggle("darkmode");
});
Ergebnis: Automatischer Farbwechsel ohne zusätzlichen CSS-Code!
Sobald der Benutzer den Button klickt, wechselt unser Design zwischen Light- und Darkmode, ohne dass wir händisch background-color oder color überschreiben müssen – alles wird durch unsere --theme-color()-Funktion geregelt.
Warum ist das besser als klassische Methoden?
Bisher musste man für Light- und Darkmode oft auf CSS-Variablen oder JavaScript zurückgreifen. Diese Ansätze haben jedoch einige Nachteile:
• Redundanter Code: Für jede Farbe mussten zwei separate Variablen (z. B. --light-primary und --dark-primary) definiert werden.
• Manuelle Umschaltung: In vielen Fällen wurde JavaScript genutzt, um Variablenwerte dynamisch zu setzen.
• Geringere Wartungsfreundlichkeit: Änderungen am Design führten oft dazu, dass mehrere Stellen im Code angepasst werden mussten.
Mit CSS Custom Functions lassen sich diese Probleme eleganter lösen:
• Automatische Farbwahl: Eine einzige Funktion gibt je nach Modus die richtige Farbe zurück.
• Weniger Code, bessere Lesbarkeit: Kein doppeltes Definieren von Variablen oder unnötige Styles.
• Skalierbarkeit: Das Konzept kann nicht nur für Farben, sondern auch für Abstände, Größen oder andere Design-Elemente verwendet werden.
• Weniger JavaScript-Abhängigkeiten: Der Farbwechsel geschieht rein in CSS, ohne dass JavaScript Farbwerte setzen oder überschreiben muss.
Zusätzlich eröffnet diese Technik neue Möglichkeiten für dynamische Themes oder reaktive Designs, die sich an Benutzerpräferenzen anpassen – direkt in CSS, ohne komplizierte Workarounds.
CSS Custom Functions sind noch Zukunftsmusik – aber mit viel Potenzial!
CSS Custom Functions bieten eine neue Möglichkeit, Styles flexibler und dynamischer zu gestalten. Aber Achtung:
• Sie befinden sich noch in der Entwicklungsphase.
• Es gibt noch kein festes Release-Datum.
• Die finale Syntax könnte sich noch ändern.
Ich persönlich finde dieses Feature sehr praktisch, da es viele neue Möglichkeiten eröffnet, die aktuell noch umständlicher umzusetzen sind. Besonders für komplexe Designs, die dynamisch auf verschiedene Bedingungen reagieren müssen, sehe ich großes Potenzial. Ich freue mich schon darauf, wenn CSS Custom Functions offiziell verfügbar sind!
