Как стилизовать свет и темный режим в веб -компонентах с настройками пользователя / ОС ⇐ CSS

[Anonymous]

Поскольку я не знаю способа стилизовать веб -компонент с родительским Lightdom селектор классов, чтобы выбрать, какой селектор тем (свет или темный) я нашел способ выбрать его с помощью пользовательского свойства: < /p>
HTML-страница < /p>

Код: Выделить всё

< /code>
:root {
--tone-neutral-01: #000000;
/* etc... */
}

:root.dark-mode {
--tone-neutral-01: #FFFFFF;
/* etc... */
}
< /code>
мой веб-компонент < /p>


...


< /code>
веб-компонент css < /p>
.tabs {
background-color: var(--tone-neutral-01);
border: 1px solid transparent;
}

@container style(--global-pref-theme: dark) {
.tabs {
border-color: var(--tone-neutral-02);
}
}
< /code>
Мне нужен этот подход для решения визуальных исключений пользовательского интерфейса, когда темный режим отличается от режима света. Настройки системы, когда пользователь выбирает и заставляет меня добавлять правило медиа -запроса и потенциально дублировать много кода CSS: < /p>
Веб -компонент css < /p>

.tabs {
background-color: var(--tone-neutral-01);
border: 1px solid transparent;
}

@container style(--global-pref-theme: dark) {
/* user select only */
.tabs {
border-color: var(--tone-neutral-02);
}
}

@container style(--global-pref-theme: system) {
@media (prefers-color-scheme: dark) {
/* OS only */
.tabs {
border-color: var(--tone-neutral-02);
}
}
}
< /code>
Я не могу использовать список селекторов запросов, но это было бы неплохо: < /p>
.tabs {
background-color: var(--tone-neutral-01);
border: 1px solid transparent;
}

@container style(--global-pref-theme: dark),
@container style(--global-pref-theme: system) {
@media (prefers-color-scheme: dark) {
/* OS only */
.tabs {
border-color: var(--tone-neutral-02);
}
}
}

Есть ли какой -нибудь способ сделать это и избежать дублированного кода CSS? > или ROLLUP решения при необходимости (я использую трафарет).
Я бы избежал JavaScript, потому что у меня есть 75 веб -компонентов, которые нужно стилизовать, и это было бы ужасно для я.
Я уже использую пользовательские свойства для цветов.

Подробнее здесь: https://stackoverflow.com/questions/789 ... s-settings