Beautiful Customizable Dark Mode Switch Component – vue-dark-switch

vue-dark-switch is a customizable, nice-looking dark mode switch component for Vue 3 applications.

How to use it:

1. Add a basic dark mode switch to the app.

import { Switch } from "vue-dark-switch"
<template>
  <Switch />
</template>
// props
round?: boolean
darkBackground?: string
lightBackground?: string

2. Add a dark mode switch icon to the app.

import { SwitchIcon } from "vue-dark-switch"
<template>
  <SwitchIcon />
</template>
// props
size?: string

3. Toggle between dark mode and light mode manually.

import { isDark, toggleDark } from "vue-dark-switch"
// true or false
isDark.value

// toggle between dark/light modes
toggleDark(false)
toggleDark(true)
toggleDark()

Preview:

vue-dark-switch

Download Details:

Author: dishait/

Live Demo: https://dishait.github.io/vue-dark-switch/

Download Link: https://github.com/dishait/vue-dark-switch/archive/refs/heads/main.zip

Official Website: https://github.com/dishait/vue-dark-switch

Install & Download:

# NPM
$ npm install vue-dark-switch

Add Comment