DEV Community

Discussion on: A UseDarkMode react hook for everyone!

Collapse
 
kamil7x profile image
Kamil Trusiak

For general use, it's okay to rely on media query.

But in case of Tailwind, it also has option to set dark mode manually, by using dark class on parent element. tailwindcss.com/docs/dark-mode

I think it would be nice to include this case (maybe some configuration option?)

Collapse
 
tzwel profile image
tzwel

holy shit does tailwind always look like this?

Collapse
 
kamil7x profile image
Kamil Trusiak

No, I just used black and white, because didn't want to think too much about it

Thread Thread
 
tzwel profile image
tzwel

i meant the syntax

Thread Thread
 
kamil7x profile image
Kamil Trusiak

Yes. It's a set of utility classes. It has also possibility to configure values for default classes and create classes on the fly. But the latter isn't used very frequently in my opinion.

Thread Thread
 
tzwel profile image
tzwel

bruh

Collapse
 
willholmes profile image
Will Holmes

I'm not sure I follow. So above you'll see how I demonstrate the usage of the dark class. But this hook allows you to get the exact value that the dark class will use, just in your react code as well.

Collapse
 
kamil7x profile image
Kamil Trusiak

You can change tailwind config to darkMode: 'class' and then you can use <body class="dark"> to set dark mode regardless of user's prefers-color-scheme value.

Here you have an example play.tailwindcss.com/nQueSOesIA

In this case your hook might report incorrect value.