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>

3 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)

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

6 replies

VinceBT-BG Mar 8, 2024

@johannbuscail Are you using 3.4.1 ?

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

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 👀

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Disable dark mode on certain dom element #10646

{{title}}

Replies: 7 comments 12 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Disable dark mode on certain dom element #10646

Replies: 7 comments · 12 replies

kaguya3222 Feb 22, 2023 Author

kaguya3222 Jun 6, 2023 Author

kaguya3222 Jun 8, 2023 Author

Replies: 7 comments 12 replies

kaguya3222
Feb 22, 2023
Author

kaguya3222 Jun 6, 2023
Author

kaguya3222 Jun 8, 2023
Author