VueJS Dark mode switch component
npm install --save vue-dark-mode-switch
Import the DarkModeSwitch
component, and it will emit its state through @switched
event method.
initalState
props allow to initialize the switch value (optional, default value is false).
<template>
<DarkModeSwitch @switched="onSwitched" :initialState="isDarkModeEnabled" />
</template>
<script>
import DarkModeSwitch from 'vue-dark-mode-switch'
import 'vue-dark-mode-switch/dist/vue-dark-mode-switch.css'
export default {
data () {
return {
isDarkModeEnabled: true
}
},
components: {
DarkModeSwitch
},
methods: {
onSwitched: function (isSwitched) {
console.log('dark mode is enabled :', isSwitched);
}
}
}
</script>
Live : https://www.ismailnguyen.com