【开源自荐】多合一的开箱即用 vue3 暗黑模式开关组件

[markthree]

vue-dark-switch

多合一的开箱即用 vue3 暗黑模式开关组件

仓库

Github 👉 vue-dark-switch

动机

暗黑模式开关是一个项目中常用的功能，为了减少后续新项目的工作量，所以封装了这个组件。

特性

• 美观的
• 开箱即用的
• 支持手动操作
• naive-ui 支持

使用

安装

npm i vue-dark-switch -D

基础

<script>
	import { Switch } from 'vue-dark-switch'
</script>

<template>
	<Switch />
</template>

手动

import { isDark, toggleDark } from 'vue-dark-theme'

isDark.value // 是否是暗黑模式

toggleDark(false) // 取消暗黑模式

toggleDark(true) // 开启暗黑模式

toggleDark() // 切换模式

naive-ui 支持

<!-- App.vue -->
<script setup>
	import { NConfigProvider } from 'naive-ui'

	import { naiveTheme } from 'vue-dark-switch'
</script>

<template>
	<n-config-provider :theme="naiveTheme">
		<router-view />
	</n-config-provider>
</template>

Refs

该组件由以下库搭建而成

• vite
• naive-ui
• vueuse
• unocss