javascript - 有什么方法可以在暗模式切换时更改 tailwind css 中的图像？

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

您需要在 tailwind.config.js 中添加 darkMode: 'media'，并扩展背景图像的变体以包含深色模式。这是一个示例 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 .