Dark mode with TailwindCSS in under 7 minutes

  • Опубликовано: День назад

    Built With CodeBuilt With Code
    подписчиков: 1,9 тыс.

    In this video, we are going to walkthrough how to add dark mode support using TailwindCSS.
    Starter source code: github.com/Built-With-Code/ta...
    Thanks for watching!
    TIMESTAMPS:
    0:00 - Intro
    0:12 - Starter code
    0:27 - Method #1: System preference
    2:11 - Method #2: Custom class name
    5:48 - Simple animation for mode switching
    6:38 - Outro
    -------------------------------
    Welcome to Built With Code! On this channel, you'll find coding tutorials on how to create and build your next awesome coding project, including websites and web apps. We'll use advanced frameworks such as Next.js, GSAP, and Framer Motion, and a whole lot more. If that sounds like fun, SUBSCRIBE to the channel - it'd be much appreciated!

@sybrespect3161 +1
@sybrespect3161

you just got a new subscriber 👍🏾

2 дня назад
@hawkdawg443 +2
@hawkdawg443

Thanks man, that transition part is a cherry on top

28 дней назад
@ethan.creates
@ethan.creates

Dope video man! Loved the transition tip and everything else was very clear!

4 месяца назад
@the.mackuha +1
@the.mackuha

Straight to the point! Thanks man🔥

Месяц назад
@builtwithcode
@builtwithcode

Thanks for watching, glad it was helpful!

Месяц назад
@vladanisov1689
@vladanisov1689

This was incredibly helpful, thank you my man!

Месяц назад
@builtwithcode
@builtwithcode

Glad to hear it!

Месяц назад
@DEBUGENTITY
@DEBUGENTITY

Loved this video.. Thanks for making this🎉

22 дня назад
@maeel
@maeel

can i have a list of every vs code extension do you have for react?

6 часов назад
@QuantumCodeStudio
@QuantumCodeStudio

Top notch content❤

9 дней назад
@nisargjaiswal4264 +2
@nisargjaiswal4264

Suggestion for video: Keep mobile users in mind, so zoom in the code for better readability. Nice video, keep it up buddy ✌️

4 месяца назад
@builtwithcode +1
@builtwithcode

Thanks for the callout, will try to zoom in more in the future.

3 месяца назад
@deylerdeyler6401
@deylerdeyler6401

does this work on next 13?

2 часа назад
@adityarajawat3185
@adityarajawat3185

Nice explanation

3 месяца назад
@builtwithcode
@builtwithcode

Thanks!

3 месяца назад
@davonnev696
@davonnev696

Definitely doing this .,.!!

23 дня назад
@MyGeorge1964
@MyGeorge1964

Is there is way to abstract all of the dark mode css to the tailwind config and maybe the stylesheet so that you only need to specify one variable in the html or jsx that will change depending on whether it's dark or light?

4 месяца назад
@builtwithcode
@builtwithcode

Yes you can definitely do this. One way is to use reusable components so you add the light and dark mode classes once in the component definition and have multiple instances. The other is in the stylesheet you can use the @apply declaration and directly use the appropriate tailwind classes in CSS.

3 месяца назад
@anonymoussloth6687
@anonymoussloth6687

Could u do a video with dark mode using css variables - which could be extended to multiple themes

4 месяца назад
@builtwithcode
@builtwithcode

Thanks for the suggestion, I'll consider it for a future video.

3 месяца назад
@cabaucom376
@cabaucom376

What if you wanted a dropdown menu for “system”, “dark”, “light”? I would like system to be the default but if someone specifies then update accordingly.

Месяц назад
@builtwithcode +2
@builtwithcode

The system value is stored in the `prefers-color-scheme` CSS property. In TS/JS you can check if it's dark using `window.matchMedia('(prefers-color-scheme: dark)').matches`

Месяц назад
@daniali4619
@daniali4619

Can its change multiple pages mood, i means if we set toggle btn in nav bar then how to change multiple pages dark mood i think then its not work, I'm right or not ?

Месяц назад
@builtwithcode +1
@builtwithcode

For using across an entire website, you'll want to setup a React Context that stores the theme value, and then wrap the entire app in that context's provider. You then connect the toggle button to update the value in the context, which will propagate to other pages.

Месяц назад
@qotibamhamed6467
@qotibamhamed6467

I'm experiencing an issue where, when I switch to light mode in my system, dark mode functions perfectly. However, when I enable dark mode in my system, the toggle between dark mode and light mode doesn't work. Can someone please assist me with this problem? (I replicated your steps exactly for importing dark mode in Tailwind.)

14 дней назад
@builtwithcode
@builtwithcode

Hmm that's odd. Did you update the Tailwind config file to use "class" for dark mode functionality?

14 дней назад
@rishabhagrawal8938
@rishabhagrawal8938

How to add one condition inside an another condition like inside dark want to add another condition . Please help it is urgent or please share Where I can talk to yo

Месяц назад
@builtwithcode
@builtwithcode

What type of other condition? If it's something stored in a component variable, then in the styling class names you can use a ternary operator with the variable and use the "dark" prefixing to limit the styling to dark mode.

Месяц назад
@arupde6320
@arupde6320

be regular

3 месяца назад
@haha-eg8fj
@haha-eg8fj

In my case I don’t need to give my document a dark class name and it just works after I confige tailwind.config.ts. I don’t know why.

13 дней назад

Далее

10 Tailwind Tricks You NEED To Know!

10:45

10 Tailwind Tricks You NEED To Know!

Ravi - Perfect Base

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

You’re doing dark mode wrong!

7:54

You’re doing dark mode wrong!

Coding in Public

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

ВСЕ МЕНЮ КФС ЗА 24 ЧАСА ЧЕЛЛЕНДЖ + ЯЯНА

28:52

What will they come up with?

00:48

What will they come up with?

Filaretiki

Просмотров 1,1 млн

The Best Way to Handle Dark Mode with TailwindCSS

3:49

The Best Way to Handle Dark Mode with TailwindCSS

Tom Is Loading

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

React Dark Mode Toggle/Theme - Complete Guide

12:29

React Dark Mode Toggle/Theme - Complete Guide

Code Complete

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

Animated gradient text with TailwindCSS

7:44

Animated gradient text with TailwindCSS

Built With Code

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

Next.js Dark Mode with No Flicker + Tailwind CSS

9:43

Next.js Dark Mode with No Flicker + Tailwind CSS

Dave Gray

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

Add Dark Mode to YOUR website with a single line of code

4:51

Add Dark Mode to YOUR website with a single line of code

Bufferhead

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

Light / Dark Mode Toggle In React Tutorial

16:02

Light / Dark Mode Toggle In React Tutorial

PedroTech

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

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ää

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

Toggle Button In HTML CSS JavaScript | Dark and Light Mode

5:26

Toggle Button In HTML CSS JavaScript | Dark and Light Mode

Coding Techniques

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

10 Tailwind Classes I Wish I Knew Earlier

13:31

10 Tailwind Classes I Wish I Knew Earlier

Web Dev Simplified

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

Translating a Custom Design System to Tailwind CSS

10:10

Translating a Custom Design System to Tailwind CSS

Tailwind Labs

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

3D принтер нужен не всем)

0:52

3D принтер нужен не всем)

Внутренний инженер

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

Блок питания с дырочкой

0:55

Блок питания с дырочкой

Купи дёшево

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

Китайская дичь с ALIEXPRESS за 5000 рублей! 🥵

26:56

Китайская дичь с ALIEXPRESS за 5000 рублей! 🥵

Daniil Gerasimov

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

iPhone 14 Pro Max проблемная крышка

0:57

iPhone 14 Pro Max проблемная крышка

Sergey Delaisy

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

Такой телефон хуже всех!

0:23

Такой телефон хуже всех!

Багз Банни

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