Блог

Главная - Вопросы по программированию - Сделать градиент в темном режиме «фоновое изображение» работать с простым фоном » цвет фона` в светлом режиме в CSS с попутным ветром?

Сделать градиент в темном режиме «фоновое изображение» работать с простым фоном » цвет фона` в светлом режиме в CSS с попутным ветром?

#css #tailwind-css

Вопрос:

У меня есть div с классом bg-blue-100 text-blue-900 dark:bg-info , где bg-info находится linear-gradient(to right, hsla(240, 100%, 50%, 0.2), transparent 50%)

Я понимаю, что режим освещения работает нормально, но dark:bg-info не работает, так как он использует background-image свойство CSS, а не background-color свойство CSS для режима освещения.

Как мне заставить работать темный режим? Существует конфликт между background-image в Темном режиме и background-color в светлом режиме.

Как это решить?

Я сделал демонстрацию стекблица, показывающую проблему -> >https://stackblitz.com/edit/github-6frqvs-tqnsnl?file=pages/index.tsx

Откройте в новом окне, так как Темный режим попутного ветра не отображается бок о бок на Стекблитце.

Обратите внимание, как он не показывает синий градиент в темном режиме, несмотря на то, что код:

 <div className="p-4 m-4 h-20 w-96 bg-red-400 text-red-900 dark:bg-info">Hello hi</div>

Редактировать:

Мне удалось заставить Темный режим работать в игре с попутным ветром, так что вот демо -> >https://play.tailwindcss.com/fecClyOaIZ

Установите флажок только в 1-м поле. 2-я коробка-это демонстрация того, как она действительно должна выглядеть в темном режиме.

В темном режиме 1-е поле должно выглядеть темно-синим с черным градиентом (см. 2-е поле).

Режим освещения (1-е поле выглядит правильно в режиме освещения)

световой режим

Темный режим (1-е поле выглядит неправильно в темном режиме. На самом деле должно выглядеть как 2-я коробка)

темный режим

Ответ №1:

Хитрость в том, чтобы использовать dark:bg-transparent , как позволяет CSS background-color , и background-image в то же время.

 <div class="h-screen m-0 p-0 dark:bg-black">
  <div class="flex flex-col justify-center items-center mx-20 text-center h-full">
    <div class="px-4 py-4 rounded-md bg-pink-100 text-pink-900 dark:bg-info dark:bg-transparent dark:text-white">This shouldn't look like this in Dark Mode</div>
    <button id="toggleDark" class="inline-flex justify-center px-4 py-2 text-sm font-medium mt-8 text-green-900 bg-green-100 border border-transparent rounded-md hover:bg-green-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500" onclick="document.documentElement.classList.toggle('dark');">Toggle Dark Mode</button>
    <div class="px-4 py-4 rounded-md dark:bg-info mt-8 dark:text-white">It should look like this in Dark Mode</div>
  </div>
</div>

Игра с попутным ветром -> >https://play.tailwindcss.com/ZWl7ZBwqnQ

темный режим

Метки: