So a while ago I came across an issue whilst developing.
I was creating a solution in nextjs with typescript and using tailwind to help with my cs...
For further actions, you may consider blocking this person and/or reporting abuse
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
darkclass on parent element. tailwindcss.com/docs/dark-modeI think it would be nice to include this case (maybe some configuration option?)
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.
You can change tailwind config to
darkMode: 'class'and then you can use<body class="dark">to set dark mode regardless of user'sprefers-color-schemevalue.Here you have an example play.tailwindcss.com/nQueSOesIA
In this case your hook might report incorrect value.
holy shit does tailwind always look like this?
No, I just used black and white, because didn't want to think too much about it
i meant the syntax
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.
bruh
Looks good! May want to add a cleanup function with a
removeEventListenerthough?Yep! On the todo :)
I'm sorry I don't really understand, but I'm curious why we need a cleanup function here?
It prevents memory leaks in older browsers; if the hook is rendered and later removed the event listener in some cases will still remain. Garbage collection has improved over the years but browsers like IE haven't received these updates so it's good to manually remove event listeners for consistent behavior.
Thanks for the suggestion Bryce, this has been added in the latest version 1.0.2
Oh I see. Thanks Bryce! You were refering to the npm package? I thought you were refering to the code snippet in this blog. Thanks for the explanation. I was wondering why we need cleanup function for hook