Mit den custom properties, (benutzerdefinierte Eigenschaften) können Sie für Werte von CSS-Eigenschaften zu Beginn des Stylesheets Variablen festlegen und später für beliebige Deklarationen verwenden. So können Sie zum Beispiel eine Farbpalette definieren und müssen Sie bei einem Redesign nur einmal im Dokument ändern.
Ändern Sie den Farbton mit Hilfe des Schiebereglers und erstellen Sie Ihr eigenens Theme!
Hier kommen Sie zurück zum Wiki-Artikel!
:root {
--baseHue: 240;
--primary: hsl(var(--baseHue) 80% 40%);
--accent1: hsl(calc(var(--baseHue) - 231) 80% 40%);
--backgr1: hsl(calc(var(--baseHue) - 231) 80% 40% / .15);
--accent2: hsl(calc(var(--baseHue) - 200) 90% 50%);
--backgr2: hsl(calc(var(--baseHue) - 200) 90% 50% / .15);
}}