Использование настраиваемого класса для темной темы vmware ясности

Question

Я использую темную тему для переключения между светлой и темной темами ясности vmware.

Но проблема в том, что темная тема не применяется к моим настраиваемым css классам, которые очевидны.

Например, У меня есть собственный класс, который устанавливает фон содержимого:

.custom-class {background: white; }

Но когда применяется темная тема, я ожидаю, что фон изменится. Но я не уверен, как я могу выполнить sh.

Stackblitz, чтобы попробовать: https://stackblitz.com/edit/clarity-theme-switcher-9mjqdm

Для обходного пути я попытался найти существующий класс из ясность. css файл, который имеет различный фон в зависимости от темы (например, карточки), но большинство из них являются дополнительным свойством css, которое искажает мой интерфейс.

Также классы bg, такие как bg-fded, bg-primary et c. нет соответствующей темной темы. Может ли кто-нибудь помочь мне, по крайней мере, обойти это?

Answer 1

Похоже, вы переключаетесь между двумя таблицами стилей, поставляемыми с Clarity (Светлый / Темный). Мы генерируем эти две темы из одного и того же css с использованием настраиваемых свойств (css переменных), но изначально это были только s css переменные.

Вы могли бы sh это сделать для приложения аналогичным путь. Например, создайте светлые / темные таблицы стилей для ваших пользовательских классов. Превратите white в $custom-class-background и сгенерируйте две таблицы стилей (одну для светлых с $custom-class-background:white и одну для темных $custom-class-background:black.

Затем приложение может переключать эти таблицы стилей, когда оно выполняет темы Clarity.