I was looking around, but couldn't find any related Q&A out there. I'm building a project in ReactJS with tailwindCSS, and implementing dark mode to the site. Everything works fine, but now I have some issues with a background image. I have set the two image in the 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')",
       })
    },
  },

and have the classNames on the decent section

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

but when I toggle dark mode, the image doesn't change, the dark image stays on the light mode. Any idea how could I go around?

I was looking around, but couldn't find any related Q&A out there. I'm building a project in ReactJS with tailwindCSS, and implementing dark mode to the site. Everything works fine, but now I have some issues with a background image. I have set the two image in the 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')",
       })
    },
  },

and have the classNames on the decent section

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

but when I toggle dark mode, the image doesn't change, the dark image stays on the light mode. Any idea how could I go around?

• javascript
• reactjs
• react-hooks
• tailwind-css
• darkmode

4 Answers 4

You need to add darkMode: 'media' in your tailwind.config.js, as well as extend the background image's variants to include dark mode. Here is an example 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: [],
}

Then it should work. You can see a working example here.

I use following

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

I`m using nuxt with @nuxtjs/color-mode for the said features. For me, this is more robust and easier to maintain

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

You can also achieve the same using div. You can set the background-image of the div and adjust the background-size to 100%. Now with the help of the dark CSS class, you can specify different background-image for dark and light modes.

Normally, this trick is performed for setting different background images for light and dark modes on websites.

HTML:

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

Custom 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%;
}