You’re doing dark mode wrong!

  • Опубликовано: 6 месяцев назад

    Coding in PublicCoding 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...

@vit4884
@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
@treyjapan

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

@jacktrusler6506 +1
@jacktrusler6506

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_
@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
@Gainmackain1

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

@codernerd7076
@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
@avidcoderr

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

@tarekalkhatib5619
@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
@Peace_For_Israel

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

@alimora442
@alimora442

:face-blue-smiling:

@UrbanaJoker
@UrbanaJoker

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

@DJN1K3
@DJN1K3

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

@juliscapucin
@juliscapucin

Thanks a lot, it works like a charm! 🤩

@froggysan5203
@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
@jkbecker

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

@H-Root +3
@H-Root

Awesome tutorial keep going 🎉❤

@jakubholcman3668
@jakubholcman3668

Very nice reminder about css variables, thank you :D

@rfryanfavour4369
@rfryanfavour4369

Pretty nice actually. Ill try it on my coming project

@leonardoroic8978
@leonardoroic8978

Thanks Chris, very useful!

@ryan_roga
@ryan_roga

2:29

Далее

Build a Dark Mode without a White Mode Flash!

23:17

Build a Dark Mode without a White Mode Flash!

Coding in Public

Просмотров 2,6 тыс.

Dark mode with TailwindCSS in under 7 minutes

6:58

Dark mode with TailwindCSS in under 7 minutes

Built With Code

Просмотров 1,4 тыс.

МАСКА ИЗ ПЕРЦА! Я ПОДЛОЖИЛ ЕЁ НАСТЕ! #нонале

00:44

МАСКА ИЗ ПЕРЦА! Я ПОДЛОЖИЛ ЕЁ НАСТЕ! #нонале

марик ноналик

Просмотров 844 тыс.

Don’t Use Your BRAIN Too Much 🍩😱🤣 #shorts

00:27

Don’t Use Your BRAIN Too Much 🍩😱🤣 #shorts

BROTHERS VLOG

Просмотров 10 млн

Лера бомжиха?😂

00:39

Лера бомжиха?😂

МЯТНАЯ ФАНТА

Просмотров 836 тыс.

These 2 UI Libraries Are The Perfect Combo

5:03

These 2 UI Libraries Are The Perfect Combo

Josh tried coding

Просмотров 59 тыс.

Dark Theme in NextJs 13 - Using React Context in Server Components

19:56

How to Create Themes with Tailwind CSS

19:57

How to Create Themes with Tailwind CSS

Skies Dev

Просмотров 5 тыс.

Tailwind CSS | Dark & Light Theme Switcher

8:54

Tailwind CSS | Dark & Light Theme Switcher

John Komarnicki

Просмотров 47 тыс.

Effortless typography, even in dark mode - Tailwind CSS Typography v0.5

7:13

How to make a DarkMode switch in React Tailwind CSS?

14:04

How to make a DarkMode switch in React Tailwind CSS?

AyyazTech

Просмотров 2,7 тыс.

Dark Mode in Next JS 13 App Directory with TailwindCSS (for beginners)

23:02

Dark Mode in Next JS 13 App Directory with TailwindCSS (for beginners)

Tuomo Kankaanpää

Просмотров 21 тыс.

Build An Easy Light/Dark Mode Toggle With CSS & JavaScript

15:25

Build An Easy Light/Dark Mode Toggle With CSS & JavaScript

Slaying The Dragon

Просмотров 16 тыс.

Tailwind CSS Dark Mode | React App Theme Switcher

6:33

Tailwind CSS Dark Mode | React App Theme Switcher

Over Clocked

Просмотров 26 тыс.

МАСКА ИЗ ПЕРЦА! Я ПОДЛОЖИЛ ЕЁ НАСТЕ! #нонале

00:44

МАСКА ИЗ ПЕРЦА! Я ПОДЛОЖИЛ ЕЁ НАСТЕ! #нонале

марик ноналик

Просмотров 844 тыс.