Как добавить стиль с учетом цветового режима в без JavaScript? ⇐ CSS
-
Anonymous
Как добавить стиль с учетом цветового режима в без JavaScript?
Я использую Tailwind CSS и Syncfusion в своем размещенном приложении Blazor WebAssembly. Я хочу изменить цвет фона полей ввода в зависимости от цветового режима (светлый режим/темный режим) и хочу, чтобы цвет был прозрачным.
Можно ли это сделать? И повторюсь; Мне не нужны решения на JavaScript.
Отображаемый HTML-код для выглядит следующим образом:
В моем app.css есть класс, который меняет цвет, но не поддерживает цветовой режим и не является прозрачным:
.e-textbox { цвет фона: #999999 !important; } Для прозрачности ничего из этого не работает:
.e-textbox { /* Это не работает */ цвет фона: #99999940 !важно; } .e-текстовое поле { /* Это не работает */ цвет фона:rgba(127,127,127,.25) !important; } .e-текстовое поле { /* Это не работает */ @apply bg-neutral-500 bg-opacity-25; } А для распознавания цветового режима это не работает:
.e-textbox { /* Это не работает */ @применять bg-нейтральный-900 bg-opacity-10 темный:bg-нейтральный-200 темный: bg-opacity-10; }
Я использую Tailwind CSS и Syncfusion в своем размещенном приложении Blazor WebAssembly. Я хочу изменить цвет фона полей ввода в зависимости от цветового режима (светлый режим/темный режим) и хочу, чтобы цвет был прозрачным.
Можно ли это сделать? И повторюсь; Мне не нужны решения на JavaScript.
Отображаемый HTML-код для выглядит следующим образом:
В моем app.css есть класс, который меняет цвет, но не поддерживает цветовой режим и не является прозрачным:
.e-textbox { цвет фона: #999999 !important; } Для прозрачности ничего из этого не работает:
.e-textbox { /* Это не работает */ цвет фона: #99999940 !важно; } .e-текстовое поле { /* Это не работает */ цвет фона:rgba(127,127,127,.25) !important; } .e-текстовое поле { /* Это не работает */ @apply bg-neutral-500 bg-opacity-25; } А для распознавания цветового режима это не работает:
.e-textbox { /* Это не работает */ @применять bg-нейтральный-900 bg-opacity-10 темный:bg-нейтральный-200 темный: bg-opacity-10; }
Мобильная версия