You’re doing dark mode wrong!

Do you like typing dark: every time you write any color in tailwind? I don’t! And even if you like that, how would you add a third or fourth theme? Did you know you can use CSS Variables to theme in Tailwind CSS?
🔗 Key Links 🔗
- Github: github.com/cod...
- Tailwind Docs on Color: tailwindcss.co...
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/mic...
- Theme: marketplace.vi...
- Icons: marketplace.vi...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoff...

[@treyjapan]

CSS variables are indeed awesome! Thanks for your amazing tutorial ❤

[@CodinginPublic]

Totally agree! Thanks for saying something!

[@oldfridayboy5597]

I don‘t use tailwind, and I never plan on using it, but finally someone who explains how to do darkmode properly! Thank you so much

[@erenova0]

Tailwind is amazing Man u gotta try this thing it saves a lot work

[@CodinginPublic]

lol no worries; yeah, ain't gonna type dark: every 3 words haha

[@Gainmackain1]

I’m planning to integrate dark mode to my app soon. This video just popped up and it’s so incredibly helpful!

[@CodinginPublic]

Awesome! Let me know how you get on. I'm never writing another dark: directive :)

[@codernerd7076]

Oh wow, this is amazing, had no idea thank you so much for the tutorial! This gonna save me so much time!

[@CodinginPublic]

Seriously. I’m never writing dark: again lol

[@blovio]

I needed this a year ago when I was setting up dark mode, I ended up doing the same thing as you with CSS variables because I hated the dark: selector on every element but I had to really dig to figure out how to implement it with @layer base in tailwind. Really nice concise tutorial!

[@CodinginPublic]

Glad you enjoyed it! Yes, I nearly gave up on Tailwind over this dark: thing haha. I still don't use it all the time, but find Tailwind very useful for projects I touch only occasionally.

[@blovio]

I go back and forth on tailwind, right now I’ve decided I like it a lot in react projects if you’re diligent about keeping components small and modular

[@UrbanaJoker]

This was exactly what I was looking for, great video!

[@CodinginPublic]

Glad it was helpful!

[@tarekalkhatib5619]

Thank u !!, I was practicing a project and just began by defining a few custom colors thinking that in the end I would just make another variables for the light mode, but I couldn't figure it out on my own and all other tutorials are just doing it in a complicated long way.

[@CodinginPublic]

So glad it was a help!

[@HassanRaza-ym3uf]

this is the one of the most coolest video related to tailwind

[@CodinginPublic]

So glad you enjoyed it!

[@arkarchanmyae4575]

Thanks, it saved me a lot of trouble with switching dark mode which I'm planning to use in my project.

[@CodinginPublic]

Great!

[@jkbecker]

That's awesome and something I'll be able to use right away!

[@CodinginPublic]

Great! Yeah, I’ll never write another dark: directive if I can help it :)

[@Exlaso]

I was searching for this, thank you

[@CodinginPublic]

Glad I could help

[@avidcoderr]

Short, Sweet and 2DaPoint. Excellent ability to make impactful videos. Simply Awesome!

[@CodinginPublic]

Glad you liked it!

[@SouhaibD]

Thanks for sharing these handy tips

[@CodinginPublic]

Glad it was helpful!

[@H-Root]

Awesome tutorial keep going 🎉❤

[@CodinginPublic]

So glad you liked it!

[@trevortylerlee]

Thanks for this, I’ve been struggling with the flash of unstyled content

[@CodinginPublic]

You’re welcome!

[@alimora442]

I most definitely have been doing it inline/wrong. Thank you, Chris

[@CodinginPublic]

Technically just a preference, but I can't imagine going back to "dark" everywhere.

[@ihateorangecat]

It worked and now I'm using this in my project. Thank you! 🙏

[@CodinginPublic]

Glad it helped!

[@antonio_cl]

Underrated channel. Let's go for the 100k in 2023 🎉

[@CodinginPublic]

Thanks! It’s looking like 35k is more realistic lol

[@haidarezio]

fam you meant underrated, overrated is the exact opposite xD

[@antonio_cl]

@@haidarezio you are correct :)

[@LangitBiru-07]

​@@CodinginPublicgas yuk ❤ pasti bisa

[@CodinginPublic]

@@antonio_cl Didn't want to correct you; easy mistake. Knew what you meant :)

[@vitvitvitvitvitvitvitvit]

thanks, dude! tried to implement the dark-mode by following the docs, but its such a pain use it in the way the tailwind recommends

[@CodinginPublic]

So glad it was a help!

[@DJN1K3]

Great method, I might just revisit some light options for my dark themed mobile site. Thanks for the tip.

[@CodinginPublic]

Sure thing! Sure beats all the annoyance of dark: everywhere :)

[@michelmaillard8798]

I got problems later in components… will have another try

[@jakubholcman3668]

Very nice reminder about css variables, thank you :D

[@CodinginPublic]

So glad it was a help!

[@bearbricknik]

Hi, So I have a problem and I am unable to find a solution. I am using prefers-color-scheme and also want to use data-theme. Basically the intended usage is that on first page access the color scheme should pick the users maschine color and whenever the user wants to switch he can either do it with changing his maschine or using the switch. However, this is not working on my end. Either the switch or the system scheme but not both of them at the same time. Am I doing something wrong?

[@CodinginPublic]

It's likely the order of your CSS declarations. You'd want the two system defaults at the top and then [data-theme=dark]/[data-theme=light] below that. Does that make sense? That way it always defaults to a system UNLESS the user has set something. You’ll also need to account for page transitions if you’re not using react or some other UI framework that does CSR.

[@bearbricknik]

@@CodinginPublic Thanks for answering. I have tried that but unfortunately its not working at all. Ive been checking the internet for some days but I have not found a solution for it and also cant send the code here. But thanks, then I keep searching!

[@bearbricknik]

@@CodinginPublic Forgot to mention that I am using nextJS and also the next-themes ThemeProvider

[@rfryanfavour4369]

Pretty nice actually. Ill try it on my coming project

[@CodinginPublic]

Let me know how it goes!

[@leonardoroic8978]

Thanks Chris, very useful!

[@CodinginPublic]

Glad it was helpful!

[@shawnxiong2011]

so far the best solution for custom theme

[@CodinginPublic]

It’s been such a big help to me!

[@juliscapucin]

Thanks a lot, it works like a charm! 🤩

[@CodinginPublic]

You're welcome!

[@yanishammaci8638]

i hate front end but i have to do it for one of my project thank you so much

[@manuelcordobagonzalez46]

Amazing tutorial, although I would like to know if it's possible to apply css variables using custom classes created in css and updating the variables the same way as you did instead of using tailwind custom colors, and if it's possible witch way is better?

[@returnZeroo]

css variable is dangerously awesome 🤩

[@CodinginPublic]

🙌

[@rawnato]

Thank dude! I'm learning Tailwind and I was thinking it very annoying to keep adding the prefix dark: to classes

[@CodinginPublic]

Yeah! I’m never going back!

[@avgvstvs96]

does this work with Tailwind Prose classes from the typography plugin?

[@CodinginPublic]

Yes, but you need to adjust it some and customize the prose classes.

[@vasiovasio]

Work Smart, Not Hard! Thank you for the video!

[@CodinginPublic]

You're welcome!

[@danielchukwu524]

This is a goated video. God bless man 🙏🙏

[@CodinginPublic]

So glad you found it helpful!

[@alexanderreyes1732]

Can you do this in Astro? It would be a great addition to your Astro Blog theme! Thanks again!

[@CodinginPublic]

Well that whole thing is written in standard CSS :) but I’ll likely do more tailwind stuff in the future. Astro makes tailwind easy on the setup!

[@Mitsunee_]

didn't know you could put multiple arguments into a single custom property like that. I once wrote a postcss plugin that'd create additional properties for each individual argument of color functions. I might go and turn that into one that adds -rgb, -hsl and -lch suffixed vars from a base color. I've had plenty of usecases where I wanted to add transparency to my theme colors :)

[@CodinginPublic]

Yeah, Tailwind has a lot of advanced customization options! Honestly, when I get that complex, I just prefer to use CSS :) But I can see why the advanced customization is so helpful for large teams that want to use tailwind.

[@Mitsunee_]

@@CodinginPublic ngl I've literally never used tailwind, but I did rewrite my old postcss plugin to do custom properties like in this video. I called it postcss-split-colors. Currently still got some issues with the color conversions causing rounding errors for non-RGB colors and the syntax is very strict right now, but the props splitting is working :)

[@stills2359]

my favorite way to do dark mode in tailwind, only caveat is conditional elements like active states

[@CodinginPublic]

Huh, I think mine works with that?

[@serialKillerReborn]

hey wassup homie? What was that tool you used to copy paste stuff in here 03:20 ?

[@CodinginPublic]

lol wassup my dude, Paste bot

[@serialKillerReborn]

all good dawg, it used to annoy me so much copy pasting multiple stuffs, going back and forth between windows, now problem has been solved it seems, thanks dude@@CodinginPublic

[@haidarezio]

amazing tutorial fam !

[@CodinginPublic]

Glad you enjoyed it!

[@ullaskunder]

awesome, will it (multi color theme) work if I have next.js 13 which uses app directory and I dont want to make it as a client component ?

[@ullaskunder]

Awesome done, I did the basic one worked, now I will add multi color theme style soon update, thank you so much

[@CodinginPublic]

Sure work!

[@ianengelbrecht4773]

This stuff is gold…

[@CodinginPublic]

Glad you enjoyed it, Ian!

[@jmjjmj1721]

My only works if i omit the hsl(0,0,0) in the css, to be only 0,0,0. i can also not use alpha value in the config. does any1 else have the same problem?

[@CodinginPublic]

Yes, you have to have it just be the numbers since you're wrapping it in the tailwind config in hsl. Also, I think the hsl wrapper I have uses the updated syntax without the commas. so 0 0% 0% works, but not 0%, 0%, 0%. Does that help?

[@maxkosh4839]

yeah, it's cool for react but what about Next js server component? How do I make switcher for a server rendered page?

[@CodinginPublic]

Should work the same. If you want an actual switcher (like user can change it), then I'd recommend storing it in cookies. Have a tutorial coming out soon with Astro showing this, so hopefully it'll give you the conceptual idea, even if it's with a different framework.

[@maxkosh4839]

@@CodinginPublic yeah. I already tried this with cookies BUT in order to read the new ( dynamically set ) cookies in our server component, that server component must be reloaded, which we can do, but it is not cool! The solution must be that we have to somehow change dynamically the value of "data-theme" attribute in server component! Preferably without reloading the app..

[@CodinginPublic]

​@@maxkosh4839Ah-okay. If I understand correctly, I'd make sure you save it to cookies. But as far as updating the UI, you should be able to use a useRef and a wrapper or something to actually update the UI live. I've got a video coming out tomorrow that shows how to do this with Astro, but the idea is very much the same (just use the useRef hook in React to give you access to the actual DOM node wrapper).

[@maxkosh4839]

@@CodinginPublic yeah, I tried this option, I managed to literally access the DOM, but I was told altering the is somehow a bad practice.. so I went with another solution: since I working win Next js I created a client side wrapper ThemeProvider poered by useContext and somehow it allows me to handle the state in it while everything inside the wrapper is still serverside rendered.. the only problem is that I had to put "data-theme" attributute inside the wrapper, cs it is impossible to use hooks on server side in Next js.. Although, some client side components in Next are still being rendered as they were server components.. weird.. but it works

[@IgnacioFigueroa-g5w]

Great video! How can I make a toggle button?

[@CodinginPublic]

What's your stack?

[@froggysan5203]

Hey dude, how did you make that linear gradient animation effect on the background, could you please do a video on that, it's super impressive.

[@CodinginPublic]

I may! In the meantime, feel free to check out the code in the description.

[@DanielPopeski]

@@CodinginPublic I had a look in the repo, wasn't able to identify the place responsible for the background. A pointer please?

[@shebishebii]

Amazing

[@CodinginPublic]

Glad you enjoyed it!

[@ryan_roga]

2:29 pretty sure HSA or RGBA renders Tailwind's opacity directives useless. I think RGB is the right way to do it. But... that's just my understanding based on a fuzzy memory of someone talking about this in the past.

[@CodinginPublic]

Yes, you’d need to use either HSL or RGB, it looks like. The "A" slot is filled by that Tailwind directive.

[@sergo10]

Why not just use nightwindcss instead and let it handle gradients and color mappings automatically instead of managing a config file?

[@CodinginPublic]

Yeah, I could see that for small projects. For anything of size, I’d want control though. But no problem if you prefer that.

[@oussamab-a7240]

can you make a tutorial on react three fiber ?

[@CodinginPublic]

Never used it. But if I do and feel like I can offer something, happy to consider it!

[@FunQuizzy88]

Thanks a lottt

[@CodinginPublic]

You’re welcome!

[@AlThePal78]

very good video :)

[@CodinginPublic]

Thank you! Cheers!

[@scommand9032]

Hello, did you forget to push the code in the github?😀

[@CodinginPublic]

Should be under a separate branch?

[@scommand9032]

@@CodinginPublic nice, I didn't look carefully before❤

[@dimpleshakrawar9910]

in my case, it cannot read the color.

[@CodinginPublic]

Can you give me more details? I don't understand. Thanks!

[@JuliusZlioba]

In the next project I need to use this, damm it's useful to know. I got tired using "dark:" prefix.

[@CodinginPublic]

Same! Glad you found it helpful!

[@bililancun8867]

what is the paste tool name?

[@CodinginPublic]

Pastebot!

[@jeanpierrejeri6425]

and how would you add color transition?

[@CodinginPublic]

Like between the modes?

[@jeanpierrejeri6425]

@@CodinginPublic yes, when you switch theme, how do you make the color transition so its smooth fade animation

[@CodinginPublic]

​@@jeanpierrejeri6425 You should be able to use the transition-colors class in Tailwind.

[@immortal_code]

good. is amzing

[@CodinginPublic]

Glad it was a help!

[@sad_man_no_talent]

what's your theme's name man?

[@CodinginPublic]

Palenight I think? Or community material Palenight?

[@googleaccount7252]

no toggle wtf

[@CodinginPublic]

You can add one :) I would for any project.

[@kelvinsmith4894]

Too much talking this could have taken less time

[@CodinginPublic]

Thanks for the feedback

[@CodinginPublic]

Thanks for the feedback

[@wentallout]

tailwind is an abomination. like... just look at your codes, it's unmaintainable, when you don't use Tailwind you can have unique names for each divs and you can use that to visualize your layout and content.

[@CodinginPublic]

lol…well, I've been pretty vocal here that my preference is my own CSS. That being said, I think Tailwind has a place. For me personally, when I only touch a project twice a year or something, I prefer tailwind. And I think it would also work well with a team of people. But it's not for everyone, and that's okay. I mostly write my own CSS and only those who know CSS can get true benefit out of a system like Tailwind.

[@wentallout]

@@CodinginPublic I want to know how to use it actually, cuz when I read a div like ".btn", I know it's a button. but then I read tailwind classes like ".p-4 grid m-6 etc" I'm like wtf am I looking at, the whole point of coding is to make it easy to understand. how is my team members going to find a buggy tiny piece of HTML inside that component if they can't understand the name? am I going to use chrome inspector and find it in my code? I'm pretty sure a short BEM CSS classname will beat this system any day.

[@CodinginPublic]

@@wentallout If it helps, each Tailwind class essentially corresponds to a single CSS property. So if you know CSS, it’s pretty easy to pick up on what tailwind classes effect styling on each element. As to it being confusing for a team, it depends on your build system. But most of the time, when using a component-based system, you know things are buttons because you’re pulling in a component called or something like that. Tailwind doesn't really make much sense if you’re just writing raw HTML, but if you’re using a modern templating system, you’re only writing those classes once for each component and then referencing that component throughout your codebase.