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

Posted 2023-03-06

【中文标题】切换暗模式时，有啥方法可以更改 tailwindcss 中的图像？

【英文标题】：Is there any way to change image in tailwindcss when dark mode toggled?切换暗模式时，有什么方法可以更改 tailwindcss 中的图像？

【发布时间】：2021-10-20 10:37:49

【问题描述】：

我环顾四周，但找不到任何相关的问答。我正在使用 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">

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

【参考方案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。

【讨论】：

谢谢@Santeri-Sarle！是的，问题是我错过了来自tailwind.config.js 的变体扩展，所以幸运的是只是一个单行。我在 darkMode 模块中使用类，因此用户可以在明暗模式之间切换，并且不依赖于系统偏好，但它也适用于类。祝你好运，再次感谢你。

啊，是的，我错过了你已经拥有darkMode: 'class'，但无论如何你都能让它工作很好！

【参考方案2】：

我正在使用带有@nuxtjs/color-mode 的nuxt 来实现上述功能。对我来说，这更健壮且更易于维护

<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
        "
      />