vue-perfect-dark-mode

Perfect dark mode.

Usage no npm install needed!

<script type="module">
  import vuePerfectDarkMode from 'https://cdn.skypack.dev/vue-perfect-dark-mode';
</script>

README

vue-perfect-dark-mode

Version Size

This integration is for Vue 3.

Installation

You must first install perfect-dark-mode into the <head> of your document.

yarn add vue-perfect-dark-mode

Usage

In a component you can use the hook:

<script>
  import { usePerfectDarkMode } from 'vue-perfect-dark-mode'

  export default {
    name: 'App',
    setup(props) {
      const { mode, updateMode } = usePerfectDarkMode()
      return {
        mode,
        onClick() {
          updateMode(
            (mode, modes, modeIndex) => modes[(modeIndex + 1) % modes.length],
          )
        },
      }
    },
  }
</script>

<template>
  <button :class="{ visible: mode !== undefined }" @click="onClick">
    {{ mode }}
  </button>
</template>

<style>
  button {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }
</style>