vue-dark-switch
v1.0.6
Published
多合一的开箱即用 vue3 暗黑模式开关组件 | A versatile vue3 dark mode switch component
Downloads
304
Readme
README 🦉
English | Chinese
动机
暗黑模式开关是一个项目中常用的功能,为了减少后续新项目的工作量,所以封装了这个组件。
特性
- 美观的
- 开箱即用的
- 支持手动操作
naive-ui
支持
使用
安装
npm i vue-dark-switch
基础
<script setup>
import { Switch } from "vue-dark-switch"
</script>
<template>
<Switch />
</template>
支持自定义 Switch
背景色
<template>
<Switch darkBackground="#fff" lightBackground="#2D2D2D" />
</template>
<script setup>
import { Switch } from "vue-dark-switch"
import WorkspacePremiumTwotone from "@vicons/material/es/WorkspacePremiumTwotone"
import WorkspacePremiumOutlined from "@vicons/material/es/WorkspacePremiumOutlined"
</script>
<template>
<Switch>
<template #dark>
<WorkspacePremiumOutlined />
</template>
<template #light>
<WorkspacePremiumTwotone />
</template>
</Switch>
</template>
纯图标
<script setup>
import { SwitchIcon } from "vue-dark-switch"
</script>
<template>
<SwitchIcon />
</template>
自定义图标
<script setup>
import { SwitchIcon } from "vue-dark-switch"
import WorkspacePremiumOutlined from "@vicons/material/es/WorkspacePremiumOutlined"
import WorkspacePremiumTwotone from "@vicons/material/es/WorkspacePremiumTwotone"
</script>
<template>
<SwitchIcon>
<template #dark>
<WorkspacePremiumOutlined />
</template>
<template #light>
<WorkspacePremiumTwotone />
</template>
</SwitchIcon>
</template>
nuxt
// nuxt.config.ts
export default defineNuxtConfig({
build: {
transpile: ["vue-dark-switch"],
},
})
<script setup lang="ts">
import { Switch } from "vue-dark-switch"
</script>
<template>
<div>
<ClientOnly>
<Switch />
</ClientOnly>
</div>
</template>
手动
import { isDark, toggleDark } from "vue-dark-switch"
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
该组件由以下库搭建而成
Support
该组件由 vue3-exports 和 vite-layers 提供支持
License
Made with markthree
Published under MIT License.