Disable dark mode on certain dom element #10646

kaguya3222 · 2023-02-21T18:06:27Z

kaguya3222
Feb 21, 2023

I think it would be useful to have the ability to disable dark mode on certain elements.

For example, in Tailwind docs, we can declare darkMode option as following:

{ darkMode: 'class' }

Then we're enabling dark mode globally, for example:

<html class="dark"> ... </html>

Then use dark mode classes like:

<html class="dark">
  <div class="text-light-100 dark:text-dark-100">Hello!</div>
</html>

But I faced a situation when I need to disable dark mode only in one element (by some condition). Something like this:

<html class="dark">
  <div class="text-light-100 dark:text-dark-100">Dark text</div>
  <div>
    <div class="text-light-100 dark:text-dark-100">This text shouldn't be dark if some condition is true</div>
  </div>
</html>

Is it possible to have some API that will allow to disable dark mode on some node element ? By applying light CSS class for example:

<html class="dark">
  <div class="text-light-100 dark:text-dark-100">Dark text</div>
  <div class="light">
    <div class="text-light-100 dark:text-dark-100">This text is light</div>
  </div>
</html>

kaguya3222 · 2023-02-22T20:47:08Z

kaguya3222
Feb 22, 2023
Author

@adamwathan Could you please check if this is possible & needed? If this API was approved I would work on this

0 replies

matyushen · 2023-06-05T12:04:17Z

matyushen
Jun 5, 2023

Any good solutiuon for this yet?

3 replies

kaguya3222 Jun 6, 2023
Author

I didn't find any good solution using Tailwind. I decided to use javascript self-written solution in 1 component where I needed this behavior. Unfortunately 😢

sedubois Jun 6, 2023

@kaguya3222 would you mind sharing the outline of your JS solution? It might be interesting as a workaround for tailwindlabs/tailwindcss-typography#228 (comment). Thanks 🙏

kaguya3222 Jun 8, 2023
Author

@sedubois not sure whether it helps, but I will try to find the code and send it as a gist :) Since it's a React component.

I would be really happy if some maintainer of tailwind approved this suggestion and I could work on it though

renatorib · 2023-12-11T19:03:13Z

renatorib
Dec 11, 2023

Just sharing my workaround right know:

plugins: [
  plugin(({ addVariant }) => {
    addVariant("dark", [":is(.dark &):not(.light &)"]);
  })
]

<div class="dark">
  It's dark!
  <div class="light">
    It's back to light!
  </div>
</div>

It changes dark variant to :is(.dark &):not(.light &) instead of just :is(.dark &).
So everything inside .dark is still dark mode, unless inside .light.

The issue with this approach is that you cannot back to dark mode inside .light anymore.

<div class="dark">
  It's dark!
  <div class="light">
    It's back to light!
    <div class="dark">
      It's still light :(
    </div>
  </div>
</div>

4 replies

VinceBT-BG Jan 9, 2024

@renatorib Can you share your Tailwind version and whole config ? How did you make this work, I cannot reproduce on my machine

cwqt Jan 25, 2024

As far as I can tell trying to override dark doesn't work, see https://play.tailwindcss.com/OGTsamETju

You can get around this however by doing:

plugins: [
  plugin(({ addVariant }) => {
    addVariant("_dark", [":is(.dark &):not(.light &)"]);
  })
]

<div class="dark">
  It's dark!
  <div class="light">
    <div class="text-[#00ff00] _dark:text-[#ff0000]">
      It's back to light!
    </div>
  </div>
</div>

olets Jan 26, 2024

As far as I can tell trying to override dark doesn't work

@cwqt #11534 (reply in thread)

rozsazoltan Aug 22, 2025

Disable dark mode on certain dom element #10646 (reply in thread)

@custom-variant dark (&:is(.dark &):not(.light &)); /* just transferred original example from v3 to v4 syntax */

Disable dark mode on certain dom element #10646 (reply in thread) (recommended)

@custom-variant dark (&:where(.dark, .dark *:not(.light))); /* recommended, read reference for more details */

johannbuscail · 2023-12-19T12:41:36Z

johannbuscail
Dec 19, 2023

Any update ?

0 replies

olets · 2024-01-10T02:23:06Z

olets
Jan 10, 2024

Here are two solutions, one using arbitrary variants and one using a static variant plugin.

https://play.tailwindcss.com/mfu56JScaE

0 replies

VinceBT-BG · 2024-02-20T17:07:33Z

VinceBT-BG
Feb 20, 2024

Try darkMode: ['variant', [':is(.dark &):not(.light &)']] in your Tailwind config

7 replies

johannbuscail Mar 8, 2024

Yes, nothing happens.

VinceBT-BG Mar 14, 2024

Make sure everything is like this:

Using Tailwind 3.4.1 or higher
Having this kind of Tailwind config:

module.exports = {
	darkMode: ['variant', [':is(.dark &):not(.light &)']],
	// Rest of the config here
}

Having your top <html> tag with a theme class for example
Having a child of this html tag have the opposite theme class for exemple here

So, this kind of configuration:

<html class="dark">
  <body>
  	<div class="light">
		<p class="text-red-500 dark:text-green-500">Hello World!</p>
	</div>
  </body>
</html>

The paragraph should be red even though your html tag has the dark class

Boston343 Apr 8, 2024

I'm not sure why, but it didn't quite work for me. But THIS does darkMode: ["variant", "&:is(.dark *):not(.light *)"],

aminkhadivar Oct 14, 2024

I'm not sure why, but it didn't quite work for me. But THIS does darkMode: ["variant", "&:is(.dark *):not(.light *)"],

thanks a lot . this is working for me

rozsazoltan Aug 22, 2025

For v4:

https://play.tailwindcss.com/0w2UpG3rE1 (I tweaked the playground a bit - it's green if we get the expected result, red if not.)

@custom-variant dark (&:is(.dark &):not(.light &));

https://play.tailwindcss.com/pwHXBAYqr6 (I tweaked the playground a bit - it's green if we get the expected result, red if not.)

@custom-variant dark (&:is(.dark *):not(.light *));

Note: I just transferred the original v3 example into v4. It could use some fine-tuning. Currently, unfortunately, the dark mode only works on the first .dark, and then .light permanently overrides it in the nested elements.

But with this, inside .light there's no way to switch back to .dark.

See here: Disable dark mode on certain dom element #10646 (reply in thread)

For more examples, read the comments below as well. Perhaps this concept fits best with the goal you want to achieve:

Disable dark mode on certain dom element #10646 (reply in thread)

rossinek · 2024-06-07T08:27:24Z

rossinek
Jun 7, 2024

I had a slightly different situation: instead of forcing a light mode, I wanted to invert the theme. The component should be light in dark mode and dark in light mode. Maybe someone will find my solution useful:

module.exports = {
  darkMode: ['variant', ':is(.dark &, .dark-invert &):not(.dark .dark-invert &)'],
  // ...
}

Then usage:

<div class="dark-invert">
  <p class="text-red-500 dark:text-blue-500">
    I'm red in dark mode and blue in light mode
  </p>
</div>

I'd love to see other/better solutions 👀

1 reply

rozsazoltan Aug 22, 2025

For v4:

https://play.tailwindcss.com/nzMTTNpuvr (I tweaked the playground a bit - it's green if we get the expected result, red if not.)

@custom-variant dark (&:is(.dark &, .dark-invert &):not(.dark .dark-invert &));

Note: I just transferred the original v3 example into v4. It could use some fine-tuning. Currently, unfortunately, the dark mode only works on the first .dark, and then .dark-invert permanently overrides it in the nested elements.

But with this, inside .dark-invert there's no way to switch back to .dark.

See here: Disable dark mode on certain dom element #10646 (reply in thread)

For more examples, read the comments below as well. Perhaps this concept fits best with the goal you want to achieve:

Disable dark mode on certain dom element #10646 (reply in thread)

IranMine123 · 2025-08-22T16:55:49Z

IranMine123
Aug 22, 2025

hello I know its been since a while for this issue but any solutions for v4?
i tried custom-variant but didn't work

4 replies

rozsazoltan Aug 22, 2025

Up.: I tweaked the playground a bit - it's green if we get the expected result, red if not.

Maybe:

https://play.tailwindcss.com/81KUWdI9Lu

@custom-variant dark {
  /* default dark */
  &:where(.dark, .dark *):not(.dark .light, .dark .light *) {
    @slot;
  }
  /* dark apply inside light */
  &:where(.dark .light .dark, .dark .light .dark *) {
    @slot;
  }
};

If inside .light you don't want to recursively re-enable dark mode with another .dark, then this is sufficient - but in that case, dark mode will remain permanently disabled within .light.

https://play.tailwindcss.com/ZI3FVfaokO?file=css

@custom-variant dark (&:where(.dark, .dark *):not(.dark .light, .dark .light *));

For more examples, read the comments below as well. Perhaps this concept fits best with the goal you want to achieve:

Disable dark mode on certain dom element #10646 (reply in thread)

IranMine123 Aug 22, 2025

@custom-variant dark {
  /* default dark */
  &:where(.dark, .dark *):not(.dark .not-dark, .dark .not-dark *) {
    @slot;
  }
  /* dark apply inside not-dark */
  &:where(.dark .not-dark .dark, .dark .not-dark .dark *) {
    @slot;
  }
};

thanks for the reply, but the selector you used will broke if there are more than one nesting elements with light class.
the solution i came up with (but not a 100% solution still) is:

@custom-variant dark {
  &:is(.dark, .dark *:not(.light, .light *)) {
    @slot;
  }
}

rozsazoltan Aug 23, 2025

I tweaked the playground a bit - it's green if we get the expected result, red if not.

https://play.tailwindcss.com/Wcv2gPy3D2?file=css (example for your selector)

Yeah, I played around with it, got just as far as you did, so I didn't share it - since there's not much point if I can't reapply the dark * afterwards.

Anyway, the most I can imagine is .dark .light .dark - I think it's already a far-fetched example if you need to switch themes more than once. At that point, I'd say it's more of a design flaw, so I was just chasing the impossible purely for fun.

rozsazoltan Aug 23, 2025

In some cases, it might be acceptable that for every element where we don't want dark mode to apply, we need to use .light, and .light does not override .dark on nested elements.

https://play.tailwindcss.com/O9bri481sn?file=css

@custom-variant dark (&:where(.dark, .dark *:not(.light)));

Uh oh!

Disable dark mode on certain dom element #10646

Uh oh!

Replies: 8 comments · 19 replies

Uh oh!

kaguya3222 Feb 22, 2023 Author

Uh oh!

Uh oh!

kaguya3222 Jun 6, 2023 Author

Uh oh!

Uh oh!

kaguya3222 Jun 8, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 8 comments 19 replies

kaguya3222
Feb 22, 2023
Author

kaguya3222 Jun 6, 2023
Author

kaguya3222 Jun 8, 2023
Author