切换暗模式时，有什么方法可以更改 tailwindcss 中的图像吗？

Question

我环顾四周，但找不到任何相关的问答。我正在使用 tailwindCSS 在 ReactJS 中构建一个项目，并在网站上实现暗模式。一切正常，但现在我的背景图像遇到了一些问题。 我已经在

tailwind.config.js

中设置了两个图像

  darkMode: 'class',
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'code': "url('/src/components/About/coding-bg-dark.png')",
        'light-code': "url('/src/components/About/lightcode.png')",
       })
    },
  },

并将类名放在合适的部分

<section id='introduction' className="bg-code dark:bg-light-code bg-cover bg-fixed flex flex-wrap content-center w-full md:h-screen">

但是当我切换深色模式时，图像不会改变，深色图像保持在浅色模式。知道我该怎么走吗？

Answer 1

您需要在

darkMode: 'media'

中添加

tailwind.config.js

，并扩展背景图像的变体以包含暗模式。这是一个例子

tailwind.config.js

：

module.exports = {
  darkMode: 'media',
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'image-one':
          "url('https://images.unsplash.com/photo-1629651480694-edb8451b31aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80')",
        'image-two':
          "url('https://images.unsplash.com/photo-1629651726230-6430554a8890?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2734&q=80')",
      }),
    },
  },
  variants: {
    extend: {
      backgroundImage: ['dark'],
    },
  },
  plugins: [],
}

然后它应该可以工作。您可以在here查看一个工作示例。

Answer 2

我使用 nuxt 和 @nuxtjs/color-mode 来实现上述功能。对我来说，这更强大且更易于维护

<img
        v-show="$colorMode.value === 'dark'"
        src="~/assets/images/index/bg-1.jpg"
        class="absolute w-full"
        style="height: 50vh"
      />
      <span
        v-show="$colorMode.value === 'dark'"
        class="
          absolute
          w-full
          h-full
          bg-gradient-to-t
          from-gray-800
          to-transparent
        "
      />
      <img
        v-show="$colorMode.value === 'light'"
        src="~/assets/images/index/bg-2.jpg"
        class="absolute w-full"
        style="height: 50vh"
      />
      <span
        v-show="$colorMode.value === 'light'"
        class="
          absolute
          w-full
          h-full
          bg-gradient-to-tl
          from-gray-900
          to-transparent
        "
      />

Answer 3

您也可以使用

div

实现相同的目的。您可以设置div的

background-image

并将

background-size

调整为

100%

。现在，借助

dark

CSS 类，您可以为深色和浅色模式指定不同的

background-image

。

通常，此技巧是为了在网站上为浅色和深色模式设置不同的背景图像而执行的。

HTML：

<div className="bg-Pic dark:bg-Pic-dark w-36 h-36"></div>

自定义CSS：

.dark .dark\:bg-Pic-dark {
  background-image: url("../images/pic-dark.png");
  background-size: 100% 100%;
}

.bg-Pic {
  background-image: url("../images/pic-light.png");
  background-size: 100% 100%;
}

Answer 4

我使用以下

<img
    className="w-32 hidden dark:block"
    src="/img/logo.png"
    alt=""
/>
<img
    className="w-32 block dark:hidden"
    src="/img/logo-light.png"
    alt=""
/>