Coding in Public
подписчиков: 37 тыс.
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...
Комментарии: 108
@vit4884
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
21 день назад@treyjapan +6
CSS variables are indeed awesome! Thanks for your amazing tutorial ❤
@jacktrusler6506 +1
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!
@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 :)
@Gainmackain1 +2
I’m planning to integrate dark mode to my app soon. This video just popped up and it’s so incredibly helpful!
@codernerd7076
Oh wow, this is amazing, had no idea thank you so much for the tutorial! This gonna save me so much time!
@avidcoderr +1
Short, Sweet and 2DaPoint. Excellent ability to make impactful videos. Simply Awesome!
@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.
@Peace_For_Israel
It worked and now I'm using this in my project. Thank you! 🙏
@alimora442
:face-blue-smiling:
@UrbanaJoker
This was exactly what I was looking for, great video!
@DJN1K3
Great method, I might just revisit some light options for my dark themed mobile site. Thanks for the tip.
@juliscapucin
Thanks a lot, it works like a charm! 🤩
@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.
@jkbecker +1
That's awesome and something I'll be able to use right away!
@H-Root +3
Awesome tutorial keep going 🎉❤
@jakubholcman3668
Very nice reminder about css variables, thank you :D
@rfryanfavour4369
Pretty nice actually. Ill try it on my coming project
@leonardoroic8978
Thanks Chris, very useful!
@ryan_roga
2:29