vue-perfect-dark-mode
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.19 • Public • Published

    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> 

    Install

    npm i vue-perfect-dark-mode

    DownloadsWeekly Downloads

    5

    Version

    0.0.19

    License

    MIT

    Unpacked Size

    4.28 kB

    Total Files

    5

    Last publish

    Collaborators

    • dylanvann