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