Как обновить несколько свойств CSS одновременно ⇐ CSS

[Anonymous]

В таблице стилей определены следующие пользовательские свойства
: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);
}

У меня также есть следующее объявление
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);
}

В функции javascript мне удалось изменить одно из свойств, но наверняка есть более элегантное решение, вместо того, чтобы вручную вводить каждое свойство, которое необходимо обновить?
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)");
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... es-at-once