vue-dark-switch

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

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

该组件由以下库搭建而成

• vite
• naive-ui
• vueuse
• unocss

Support

该组件由 vue3-exports 和 vite-layers 提供支持

License

Made with markthree

Published under MIT License.