1.0.0 • Published 3 years ago
vue-perfect-dark-mode v1.0.0
vue-perfect-dark-mode
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-modeUsage
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>