Is there any way to change image in tailwindcss when dark mode toggled?

Question

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?

Lebna

Answer 1

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.

Speedway

Thank you @Santeri-Sarle ! Yes, the problem was that I missed the extension of the variants from the tailwind.config.js, so luckily was just a one-liner. I am using class in the darkMode module, so the user can toggle between the light and dark mode and doesn't depend on system preferences, but it works with class as well. Have a good one, and thank you again. – Lebna

Ah, yep, I missed that you already had darkMode: 'class', but good that you got it to work regardless! – Speedway

If you do it like that, you can't control the image via bundlers like webpack. – Weakling

Answer 2

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

Carboni

Answer 3

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

Divulsion

That's right, and would work as well. However Tailwind would lose its primary purpose of not using CSS – Lebna

It's kind of like a brute-force approach. Maybe would be best to use it if no other solutions work. – Divulsion

Yes, I would agree with that! – Lebna