vue-switch-theme

A simple, tiny vue component(or hook) to help you easily implement dark mode.

English | 简体中文

Installation

# npm
npm i @guolao/vue-switch-theme

# yarn
yarn add @guolao/vue-switch-theme

# pnpm
pnpm add @guolao/vue-switch-theme

Usage

<template>
  <SwitchTheme />
</template>

<script setup>
import SwitchTheme from '@guolao/vue-switch-theme'
</script>

Props & Events

Name	Type	Default	Description
mode	'auto' | 'dark' | 'light'	'auto'	appearance theme
onChange	(theme: 'auto' | 'dark' | 'light') => void	null	emit after theme mode change

hooks

Customize your own theme switch component by useTheme hook.

<template>
  <button 
    class="theme-button"
    @click="toggle">
    mode: {{ theme }}
  </button>
</template>

<script setup>
import { onMounted } from 'vue'
import { useTheme } from '@guolao/vue-switch-theme'

const { toggle, setTheme, theme } = useTheme('theme-button')
onMounted(() => setTheme('dark'))
</script>

License

MIT