Skip to content

Latest commit

 

History

History
207 lines (152 loc) · 3.21 KB

README_EN.md

File metadata and controls

207 lines (152 loc) · 3.21 KB
Raw

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:



Support

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



License

Made with markthree

Published under MIT License.