Adding a Dark Mode to Vue in 5 Minutes

Save your spot in Vue.js Forge and get hands-on experience building Vue projects: vuejsforge.com/
---
RESOURCES
Setting up Vue and Tailwind - • How to Setup Tailwind ...
Tailwind Docs - tailwindcss.co...
VueUse Docs - vueuse.org/cor...
✅ Join the LearnVue+ Waiting List - learnvue.co
Get early access to videos, exclusive content, interactive code challenges, and more.
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
MUSIC
Lukrembo - Apricity • (no copyright music) l...
Lukrembo - Bake a Pie • lukrembo - bake a pie ...
Lukrembo - Bored • lukrembo - bored (roya...
Lukrembo - Branch • (no copyright music) c...
Lukrembo - Bread • (no copyright music) j...
Lukrembo - Castle • lukrembo - castle (roy...
Lukrembo - Daily • (no copyright music) c...
Lukrembo - Forest • (no copyright music) l...
Lukrembo - Home • lukrembo - home (royal...
Lukrembo - I Always Love You • (no copyright music) l...
Lukrembo - Imagine • (no copyright music) c...
Lukrembo - Lamp • lukrembo - lamp (royal...
Lukrembo - Marshmallow • lukrembo - marshmallow...
Lukrembo - Night • lukrembo - night (roya...
Lukrembo - Pancake • lukrembo - pancake (ro...
Lukrembo - Picnic • lukrembo - picnic (roy...
Lukrembo - Storybook • lukrembo - storybook (...
Lukrembo - Together • lukrembo - together (r...
Lukrembo - Wine • lukrembo - wine (royal...
#vuejs #vue #javascript #webdev

[@ColinRichardson]

I'l pass this to my manager, he hates Dark Mode... (evil laugh)

[@LearnVue]

he would get wrecked by tech twitter lol

[@ColinRichardson]

@@LearnVue I think he is more "lets actually get all the P1 features in first, before doing dark mode" but then product team added more and more and more P1 MUST DO features, and then just randomly ask "What happened to dark mode" and almost made it a higher priority because they announced it would be coming soon.. AGES ago..
And the argument boiled down to "Is Dark Mode more important than P1" at which point Product didn't want to say yes, but you know they almost did..
And now it's just became a running joke of how important an unimportant feature almost became.

[@bergus541]

I found this channel today and i wanted only say thank you 🔥🤜🤛🙂

[@AngelHdzMultimedia]

Watched the video just for fun and for support of the channel, because already knew how to make dark/light mode with Vanilla JS and with VueUse.
Ended learning something new. I always had the question about using parentheses or not when passing a function to an event attribute in the template, and never bothered reading about it, so I assumend Vue added the parentheses if the value was a function name, and evaluated the value if it was a function call. Now I learned that if we don't add parentheses, Vue appends the Event Object as argument. Mind blown. Thank you!

[@mauriciorodriguez534]

I have a question, how could you add a delay between changes so that the transition is not abrupt?

[@lightning9552]

Is pure CSS viable in real world business? IDK why i am like this, but i feel like pure CSS can be enough by itself... is it?

[@LearnVue]

I feel (like most things), it's doable when organized and maintained well - in theory at least lol.
For me, the biggest pro of Tailwind and utility classes is that they make it easier to see where styles are controlled. When I have tons of custom CSS styles, I find myself wasting time cross referencing BEM named classes since it's harder for me to visualize the inheritance and overrides.
Would love to hear your thoughts

[@noqtuh]

hey, how can i enable the darkmode by default?

[@TheCrowdel]

just learn Vue about 1 month, should i jump to nuxt ?
btw just found your chanel, i subscribe

[@LearnVue]

I feel like by learning Nuxt, you'll still spend a decent amount of time learning Vue itself. You need to learn Vue to use Nuxt, but nothing says you can't do both at the same time.
So it really depends on the kind of projects you want to build and how you prefer learning

[@hilolahonmirzakulova1828]

Your videos are top level, so straight forward and easy to follow. Most importantly very informative

[@Ma1ne2]

Cool event, but why during the week, impossible to join for working people :/

[@cricadev]

Fr bro

[@wireinet]

AWESOME!! THANKS!
I new in Vue. Please, let me know, how to add class in body or html if "isDark" toggles (like in tile wind, maybe but i dont need tilewind)

[@wireinet]

Sorry! Find this in the the end of the video ))

[@wireinet]

but! if i use this- html class 'dark' toggled, but if i reload page i get error 'Cannot read properties of undefined (reading 'documentElement')'

[@kaungmyat4438]

bro, you save me from 2 hr burning

[@OldenDays]

please do a video on data fetching in Nuxt3, its a complete nightmare

[@WBSummerlin]

Does this work in combination with Capacitor for building hybrid apps

[@aham_sammich]

Awesome, thank you! I was able to implement dark mode on my site, but this would've probably made it easier.

[@reblin8692]

Hi!
I'm just beginning to use UI frameworks with Vue 3 which ones do you recommend?

[@drfcozapata]

Cool!!!
Thanks. Blessings from Venezuela

[@kendinesponsor]

yess very easy, thank you captan

[@DevduttaBain]

how do we change class of the html tag in vue?

[@Hotatoes]

Ya I have a request , do more videos

[@neliobila]

any video for bootstrap?

[@Lucas-mu5no]

Thank you! Awesome video.

[@abderahmanvt7986]

Great ❤️💚

[@janmaverick]

if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}