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

Install & Download:

# NPM
$ npm install vue-dark-switch

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

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()