DEV Community

Cover image for Easy Way to Dark Mode
Abanoub George
Abanoub George

Posted on

Easy Way to Dark Mode

#javascript #vue #tutorial #webdev

We will use the VueUse

you can Read the Docs here VueUse

What's the VueUse ?

VueUse is a collection of hundreds of essential Vue Composition Utilities for interacting with various browser, sensor, animation, and state apis, plus more!

In this Topic, we’ll sample some hand picked functions from each category to give you an idea of what’s possible with VueUse and hopefully wet your appetite to utilize VueUse in your own projects.

let Start install the VueUse 

npm i @vueuse/core
Enter fullscreen mode Exit fullscreen mode

then will use one of the Utilities named useDark

we will import the Utilities into our component

import { useDark, useToggle } from '@vueuse/core'
Enter fullscreen mode Exit fullscreen mode

And will Define them as Variables

const isDark = useDark() // True of False
const toggleDark = useToggle(isDark)
Enter fullscreen mode Exit fullscreen mode

the isDark will give us the Boolean result True or False but by defualt will be False

<template>
  <div>{{isDark}}</div>
</template>
Enter fullscreen mode Exit fullscreen mode

we will see the output

Image description

Then we will use the toggleDark Button to switch between true or false

  <button @click="toggleDark()">
    Is Dark: {{ isDark }}
  </button>
Enter fullscreen mode Exit fullscreen mode
when we toggle between the Dark mode the useDark add variable in LocalStorage named vueuse-color-scheme the value by default (false) is Auto and when toggle (true) will be dark

Image description

also useDark add class to HTML tag 

<html lang="en" class="dark">
Enter fullscreen mode Exit fullscreen mode

Now we can add Style for Dark Mode 

.dark {
  background: #252525;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

you can see how the Dark mode is applied

Image description

🤩 🥳 WOW now you have an Easy Dark Mode Applied in less Than one Minute💪

  • You can Find the Repo Here

  • Or you can see the live code Here

  • Read More about UseDark Here

Follow Me in Linkedin ☺️ 😊 😇

Thanks For Reading My Topic waiting for More topic in VueUse☺️ 😊 😇

Top comments (0)

Read next

burtds profile image

Laravel Reverb: Getting started

Bert De Swaef -

jamescroissant profile image

What React beginners should know about React 19 first.

Yu Hamada -

balastrong profile image

What I DON'T like about shadcn/ui

Leonardo Montini -

zag profile image

Podlite v1.0 released: A lightweight block-oriented markup language for organizing knowledge

Alexandr Zahatski -