Skip to content

多合一的开箱即用 vue3 暗黑模式开关组件 | A versatile vue3 dark mode switch component

License

Notifications You must be signed in to change notification settings

dishait/vue-dark-switch

Repository files navigation

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

该组件由以下库搭建而成



Support

该组件由 vue3-exportsvite-layers 提供支持



License

Made with markthree

Published under MIT License.