README_EN.md

vue-dark-switch

A versatile vue3 dark mode switch component

README 🦉

English | Chinese

Motivation

Dark mode switch is a commonly used feature in projects. To reduce the workload for future projects, this component is encapsulated.

Features

• Beautiful
• Ready to use
• Supports manual operation
• naive-ui support

Usage

Installation

npm i vue-dark-switch

Basic

<script setup>
  import { Switch } from "vue-dark-switch"
</script>

<template>
  <Switch />
</template>

Customize Switch background color

<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>

Icon-only

<script setup>
  import { SwitchIcon } from "vue-dark-switch"
</script>

<template>
  <SwitchIcon />
</template>

Customize icon

<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>

Manual

import { isDark, toggleDark } from "vue-dark-switch"

isDark.value // Whether in dark mode

toggleDark(false) // Turn off dark mode

toggleDark(true) // Turn on dark mode

toggleDark() // Switch mode

naive-ui support

<!-- 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

This component is built using the following libraries:

• vite
• naive-ui
• vueuse
• unocss

Support

This component is supported by vue3-exports and vite-layers.

License

Made with markthree

Published under MIT License.