Posts Learn Components Snippets Categories Tags Tools About
/

How to add Dark Mode Toggle in VueJS

Get to know How to add Dark Mode Toggle in VueJS the easy and straight forward way

Created on Jul 25, 2022

303 views

Step 1: Getting Project Ready


To get started you will need to have your VueJs project ready. You can make use of Vite to scaffold a new VueJS project or in my case, it will be a new Laravel Project. If you do have an existing VueJs project then you can go ahead and continue to step 2.
# npm 7+, extra double-dash is needed:
npm create [email protected] my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

For a new Laravel project, you can make use of the "laravel new" command. Do note that you can use Breeze for the pre-configured VueJs setup provided by Laravel.
laravel new my-laravel-app

Step 2: Install VueUse Libaray


The 2nd step is to install VueUse library which is "Collection of Essential Vue Composition Utilities" and this library has many utilities that we can make use of. But in this case, we'll be using "useToggle" and "useDark".
 
import { useToggle, useDark } from '@vueuse/core';

const isDark = useDark()
const toggleDark = useToggle(isDark)

VueUse Homepage



Step 3: Tailwind CSS Toggle Component


The next step is to have the Toggle Component and in this case, we'll be using Tailwind CSS as the front-end styling library. This component is quite simple and straightforward, do visit PostSrc Components to see more.
<div class="inline-flex bg-white p-8 shadow-lg shadow-slate-200 rounded-lg w-auto">
  <label for="toggle" class="inline-flex relative items-center cursor-pointer">
	<input type="checkbox" id="toggle" class="sr-only peer">
	  <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-slate-300 dark:peer-focus:ring-indigo-300 rounded-full peer dark:bg-slate-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white dark:bg-slate-500 after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-slate-400 peer-checked:bg-indigo-600"></div>
  </label>
</div>



Tailwind CSS Toggle Component


Step 4: VueJS Binding


For this example, we'll make use of the VueJS Single File Component (SFC). We'll directly make use of the utilities that we have import previously and then bind them with our HTML toggle element.
<script>
  import { useToggle, useDark } from '@vueuse/core';

  const isDark = useDark()
  const toggleDark = useToggle(isDark)
</script>

<template>
  <label for="toggle" class="inline-flex relative items-center cursor-pointer ml-4">
    <input type="checkbox" id="toggle" class="sr-only peer" :checked="isDark" @click="toggleDark()">
    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-slate-600 peer-checked:bg-indigo-600"></div>
  </label>
</template>
I hope you learned something and happy coding!

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to add Dark Mode Toggle in VueJS

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Sponsors 👑

+ Add Yours
)