@tohrusky/naive-dark-mode v0.1.4

Naïve Dark Mode

Dark Mode for Vue3 and Naive UI.

Online Demo

Installation

Use your favorite package manager to install:

yarn add @tohrusky/naive-dark-mode

Usage

Type

export type NaiveDarkModeType = undefined | 'light' | 'dark' | 'system'

Component API

Example

<script lang="ts" setup>
import { ref, Ref } from 'vue'
import { NConfigProvider, NGlobalStyle } from 'naive-ui'
import { NaiveDarkMode } from 'naive-dark-mode'
import type { NaiveDarkModeType } from 'naive-dark-mode'

const dmode = ref('system' as NaiveDarkModeType)
// v-model child component
const color = ref('')
const naiveTheme: Ref<any> = ref(undefined)

// // Change dark mode
// function handleDarkModeChange(mode: NaiveDarkModeType): void {
//   dmode.value = mode
// }
</script>

<template>
  <n-config-provider :theme="naiveTheme">
    <n-global-style />
    <naive-dark-mode
      v-model:color="color"
      v-model:naivetheme="naiveTheme"
      :dark-mode="dmode"
      :fade-layer="20"
      :design-light="'#fcf1f1'"
      :design-dark="'#051f1f'"
      class="naive-dark-mode"
    />
    <my-app />
  </n-config-provider>
</template>

<style lang="scss" scoped>
$global-color: v-bind(color);

.naive-dark-mode {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: $global-color;
  display: flex;
  flex-direction: column;
}
</style>

License

naive-dark-mode is licensed under the MIT License.