So aktualisieren Sie mehrere CSS-Eigenschaften gleichzeitig ⇐ CSS

[Guest]

In einem Stylesheet habe ich die folgenden benutzerdefinierten Eigenschaften definiert

Code: Select all

:root {
color-scheme: dark;
--white: #FFF;
--zinc-50: #fafafa;
--zinc-100: #f4f4f5;
--zinc-200: #e4e4e7;
--zinc-300: #d4d4d8;
--zinc-400: #a1a1aa;
--zinc-500: #71717a;
--zinc-600: #52525b;
--zinc-700: #3f3f46;
--zinc-800: #27272a;
--zinc-900: #18181b;

--bg-color: #171617;
--text-color: #a4a3a4;
--pane-text-color: #c8c6c8;
--body-scroll-bg: #171617;
--body-scroll-thumb-bg: #373737;
--track-cover-fade-color: rgba(23,22,23,1);
}

Ich habe auch die folgende Erklärung

Code: Select all

html.light {
color-scheme: light;
--bg-color: #f5f6f8;
--text-color: #7e7e7e;
--pane-text-color: var(--zinc-500);
--body-scroll-bg: #f5f6f8;
--body-scroll-thumb-bg: var(--zinc-400);
--track-cover-fade-color: rgba(245,246,248,1);
}

In einer Javascript-Funktion konnte ich eine der Eigenschaften ändern, aber es gibt sicherlich eine elegantere Lösung, als jede Eigenschaft, die aktualisiert werden muss, manuell einzutragen?

Code: Select all

    setTheme(theme){
if (theme == "dark") {
root.style.setProperty('--table-sticky-heading-bg-color', "rgba(0,0,0,1)");
}
else {
root.style.setProperty('--table-sticky-heading-bg-color', "rgba(255,255,255,1)");
}
}