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

jackdavid profile image

🚀 Introducing SuperPowerGenerator.com! 💥

Jack David -

kevinluo201 profile image

Use vite_rails to use Vue SFC(single file component, .vue) in >= Rails7

Kevin Luo -

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -

leandroveiga profile image

Master Advanced LINQ in C#: Writing Ultra-Efficient Queries for Massive Datasets

Leandro Veiga -