Dark & Light Mode With Vue, VueUse & Tailwind CSS

preview_player
Показать описание
This video explains how to create a simple dark and light theme toggle using Vue 3, a library called vueUse & Tailwind CSS

-----------------------------------------------------------------------------------------------------
Join my channel to support me to continue doing what I love!
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
#vue #vue3 #vueuse #tailwindcss
  1. John Komarnicki
Рекомендации по теме
how dark mode 0:13:13

how dark mode killed good design

Why Dark Mode 0:05:00

Why Dark Mode Reduces Your Productivity

How To Make 0:10:05

How To Make Website DARK MODE | Dark Theme Website Design Using HTML, CSS & JS

Is Dark Mode 0:07:43

Is Dark Mode Actually Better For Your Eyes? - Cheddar Explains

Create a Dark 0:06:26

Create a Dark Mode Switch with HTML, CSS, JavaScript

Create a Dark/Light 0:15:44

Create a Dark/Light mode switcher in Power BI!

'Dark Mode' Is 0:02:28

'Dark Mode' Is Not What You Think...

Rise of the 0:04:39

Rise of the Dark Mode

Transform a WordPress 0:26:36

Transform a WordPress Block Theme with DARK MODE alongside a LEGEND!

The Best Way 0:03:49

The Best Way to Handle Dark Mode with TailwindCSS

Dark Mode is 0:02:12

Dark Mode is Hurting Your Eyes like this!

CSS & Javascript 0:08:40

CSS & Javascript Toggle Button | Dark and Light Mode

Animated Dark Mode 0:09:52

Animated Dark Mode Toggle | CSS Dark Mode Toggle Button

Why dark mode 0:02:45

Why dark mode isn't always better for eyesight

iPhone 13's: How 0:00:23

iPhone 13's: How to Change to Dark Mode or Light Mode

🪄✨ Dark mode 0:00:26

🪄✨ Dark mode on trend 🔪 #douyin #makeup #trend

Discord Light Mode 0:00:28

Discord Light Mode In a Nutshell

Turn on Dark 0:00:39

Turn on Dark Mode TradingView Desktop

Light Mode vs. 0:00:28

Light Mode vs. Dark Mode

Dark Mode vs. 0:04:48

Dark Mode vs. Light Mode Battery Test

Dark Mode Toggle 0:03:25

Dark Mode Toggle in WordPress for Any Theme (Frontend/Backend)

Light ON vs 0:00:08

Light ON vs Dark Mode - Which is BETTER for Inside Out 2? #shorts

How To Change 0:01:02

How To Change From Dark Mode To Light Mode

How to Add 0:00:54

How to Add Dark Light Mode Using Bootstrap in 2 Steps | Dark Theme Website | Bootstrap Tutorial

Комментарии
Автор

Really enjoying the fast paced videos. They are super informative and get the point across well. Great work, John!

randel_mcafee
Автор

Great video and explanation! But it raised some questions. 1) Why do you have to call toggleDark with parentheses @click="toggleDark()"? 2) when I call toggleDark() on button click, which runs "useToggle(isDark)", it adds a dark class to the html element (or to whatever selector you provide to useDark). But for some reason, when switching to dark mode, it completely ignores any transition property I might have added. I thought I had a problem with my setup, but when I decided to rewrite the toggleDark function to manually add the class of "dark" to the html element (document.documentElement.classList.toggle('dark')), then the transitions started working again. Weird. I can also see the <head> element flashing in the devtools whenever I use the "useToggle(isDark)" version, meaning it has been updated, but when I check, it is identical. This flashing of the <head> does not happen when I use my vanilla JS method. Very weiiird.

ArtySho
Автор

Awesome video. Please keep making videos like this. It helps me a lot.

riyad-appscode
Автор

This will be saved in router view while routing too?

a.human.
Автор

can you please make awesome video on server side rendering

badasscoder