You’re doing dark mode wrong!
ฝัง
- เผยแพร่เมื่อ 16 พ.ค. 2023
- 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/coding-in-public/t...
- Tailwind Docs on Color: tailwindcss.com/docs/customiz...
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen... - แนวปฏิบัติและการใช้ชีวิต
Oh wow, this is amazing, had no idea thank you so much for the tutorial! This gonna save me so much time!
Seriously. I’m never writing dark: again lol
CSS variables are indeed awesome! Thanks for your amazing tutorial ❤
Totally agree! Thanks for saying something!
I’m planning to integrate dark mode to my app soon. This video just popped up and it’s so incredibly helpful!
Awesome! Let me know how you get on. I'm never writing another dark: directive :)
This was exactly what I was looking for, great video!
Glad it was helpful!
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.
So glad it was a help!
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!
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.
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
It worked and now I'm using this in my project. Thank you! 🙏
Glad it helped!
Short, Sweet and 2DaPoint. Excellent ability to make impactful videos. Simply Awesome!
Glad you liked it!
That's awesome and something I'll be able to use right away!
Great! Yeah, I’ll never write another dark: directive if I can help it :)
Very nice reminder about css variables, thank you :D
So glad it was a help!
Great method, I might just revisit some light options for my dark themed mobile site. Thanks for the tip.
Sure thing! Sure beats all the annoyance of dark: everywhere :)
Thanks, it saved me a lot of trouble with switching dark mode which I'm planning to use in my project.
Great!
Thanks for sharing these handy tips
Glad it was helpful!
Thanks for this, I’ve been struggling with the flash of unstyled content
You’re welcome!
Awesome tutorial keep going 🎉❤
So glad you liked it!
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
Tailwind is amazing Man u gotta try this thing it saves a lot work
lol no worries; yeah, ain't gonna type dark: every 3 words haha
I was searching for this, thank you
Glad I could help
I most definitely have been doing it inline/wrong. Thank you, Chris
Technically just a preference, but I can't imagine going back to "dark" everywhere.
Thanks Chris, very useful!
Glad it was helpful!
Thanks a lot, it works like a charm! 🤩
You're welcome!
this is the one of the most coolest video related to tailwind
So glad you enjoyed it!
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
So glad it was a help!
Pretty nice actually. Ill try it on my coming project
Let me know how it goes!
This is a goated video. God bless man 🙏🙏
So glad you found it helpful!
I got problems later in components… will have another try
amazing tutorial fam !
Glad you enjoyed it!
so far the best solution for custom theme
It’s been such a big help to me!
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 :)
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.
@@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 :)
Work Smart, Not Hard! Thank you for the video!
You're welcome!
css variable is dangerously awesome 🤩
🙌
i hate front end but i have to do it for one of my project thank you so much
This stuff is gold…
Glad you enjoyed it, Ian!
Can you do this in Astro? It would be a great addition to your Astro Blog theme! Thanks again!
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!
Thank dude! I'm learning Tailwind and I was thinking it very annoying to keep adding the prefix dark: to classes
Yeah! I’m never going back!
Underrated channel. Let's go for the 100k in 2023 🎉
Thanks! It’s looking like 35k is more realistic lol
fam you meant underrated, overrated is the exact opposite xD
@@haidarezio you are correct :)
@@CodinginPublicgas yuk ❤ pasti bisa
@@antonio_cl Didn't want to correct you; easy mistake. Knew what you meant :)
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.
I may! In the meantime, feel free to check out the code in the description.
my favorite way to do dark mode in tailwind, only caveat is conditional elements like active states
Huh, I think mine works with that?
Thanks a lottt
You’re welcome!
Amazing
Glad you enjoyed it!
very good video :)
Thank you! Cheers!
Great video! How can I make a toggle button?
What's your stack?
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 ?
Awesome done, I did the basic one worked, now I will add multi color theme style soon update, thank you so much
Sure work!
does this work with Tailwind Prose classes from the typography plugin?
Yes, but you need to adjust it some and customize the prose classes.
can you make a tutorial on react three fiber ?
Never used it. But if I do and feel like I can offer something, happy to consider it!
hey wassup homie? What was that tool you used to copy paste stuff in here 03:20 ?
lol wassup my dude, Paste bot
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
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.
Yes, you’d need to use either HSL or RGB, it looks like. The "A" slot is filled by that Tailwind directive.
good. is amzing
Glad it was a help!
yeah, it's cool for react but what about Next js server component? How do I make switcher for a server rendered page?
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.
@@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..
@@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).
@@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
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?
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.
@@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!
@@CodinginPublic Forgot to mention that I am using nextJS and also the next-themes ThemeProvider
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?
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?
Why not just use nightwindcss instead and let it handle gradients and color mappings automatically instead of managing a config file?
Yeah, I could see that for small projects. For anything of size, I’d want control though. But no problem if you prefer that.
Hello, did you forget to push the code in the github?😀
Should be under a separate branch?
@@CodinginPublic nice, I didn't look carefully before❤
and how would you add color transition?
Like between the modes?
@@CodinginPublic yes, when you switch theme, how do you make the color transition so its smooth fade animation
@@jeanpierrejeri6425 You should be able to use the transition-colors class in Tailwind.
what is the paste tool name?
Pastebot!
what's your theme's name man?
Palenight I think? Or community material Palenight?
no toggle wtf
You can add one :) I would for any project.
in my case, it cannot read the color.
Can you give me more details? I don't understand. Thanks!
Too much talking this could have taken less time
Thanks for the feedback
Thanks for the feedback
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.
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.
@@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.
@@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.
In the next project I need to use this, damm it's useful to know. I got tired using "dark:" prefix.
Same! Glad you found it helpful!