Setup Dark and Light Mode in VueJS using Tailwind-CSS

Project Setup

Create or install the vue-js application and tailwind-css framework.

Install VueUse library

npm i @vueuse/core

Change in tailwind.config.js

Add the darkMode:"class" object

export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Vue Template

<template>
  <p>isDark: {{ isDark }}</p>
  <button @click="toggleBtn()" class="px-4 py-2 text-white bg-blue-700 rounded dark:bg-purple-500">
    Toggle Dark Mode
  </button>
</template>

Script Setup

<script setup>
  import {(useDark, useToggle)} from '@vueuse/core'; const isDark = useDark(); const toggleBtn =
  useToggle(isDark);
</script>