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: 1 day 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 (9 months ago)
• Last Synced: 2024-11-01T18:46:22.318Z (13 days ago)
• Topics: dark, nuxt, switch, theme, vue3
• Language: Vue
• Homepage: https://dishait.github.io/vue-dark-switch/
• Size: 1.71 MB
• Stars: 89
• 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).