Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dishait/vue-dark-switch
多合一的开箱即用 vue3 暗黑模式开关组件 | A versatile vue3 dark mode switch component
https://github.com/dishait/vue-dark-switch
dark nuxt switch theme vue3
Last synced: about 2 months ago
JSON representation
多合一的开箱即用 vue3 暗黑模式开关组件 | A versatile vue3 dark mode switch component
- Host: GitHub
- URL: https://github.com/dishait/vue-dark-switch
- Owner: dishait
- License: mit
- Created: 2022-04-25T05:35:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T07:57:54.000Z (7 months ago)
- Last Synced: 2024-07-30T05:22:45.560Z (about 2 months ago)
- Topics: dark, nuxt, switch, theme, vue3
- Language: Vue
- Homepage: https://dishait.github.io/vue-dark-switch/
- Size: 1.71 MB
- Stars: 87
- Watchers: 1
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
vue-dark-switch
多合一的开箱即用 vue3 暗黑模式开关组件
## README 🦉
[English](./README_EN.md) | Chinese
## 动机
暗黑模式开关是一个项目中常用的功能，为了减少后续新项目的工作量，所以封装了这个组件。
## 特性
- 美观的
- 开箱即用的
- 支持手动操作
- `naive-ui` 支持
## 使用
### 安装
```shell
npm i vue-dark-switch
```
### 基础
```html
import { Switch } from "vue-dark-switch"
```
支持自定义 `Switch` 背景色
```html
```
```html
import { Switch } from "vue-dark-switch"
import WorkspacePremiumTwotone from "@vicons/material/es/WorkspacePremiumTwotone"
import WorkspacePremiumOutlined from "@vicons/material/es/WorkspacePremiumOutlined"
```
#### 纯图标
```html
import { SwitchIcon } from "vue-dark-switch"
```
自定义图标
```html
import { SwitchIcon } from "vue-dark-switch"
import WorkspacePremiumOutlined from "@vicons/material/es/WorkspacePremiumOutlined"
import WorkspacePremiumTwotone from "@vicons/material/es/WorkspacePremiumTwotone"
```
### nuxt
```ts
// nuxt.config.ts
export default defineNuxtConfig({
build: {
transpile: ["vue-dark-switch"],
},
})
```
```html
import { Switch } from "vue-dark-switch"
```
### 手动
```ts
import { isDark, toggleDark } from "vue-dark-switch"
isDark.value // 是否是暗黑模式
toggleDark(false) // 取消暗黑模式
toggleDark(true) // 开启暗黑模式
toggleDark() // 切换模式
```
### `naive-ui` 支持
```html
import { NConfigProvider } from "naive-ui"
import { naiveTheme } from "vue-dark-switch"
```
# Refs
该组件由以下库搭建而成
- [vite](https://cn.vitejs.dev/)
- [naive-ui](https://www.naiveui.com/zh-CN)
- [vueuse](https://vueuse.org/)
- [unocss](https://github.com/unocss/unocss)
# Support
该组件由 [vue3-exports](https://github.com/dishait/vue3-exports) 和
[vite-layers](https://github.com/markthree/vite-layers) 提供支持
## License
Made with [markthree](https://github.com/markthree)
Published under [MIT License](./LICENSE).