vue-dark-mode-switch

VueJS Dark mode switch component

Install

npm install --save vue-dark-mode-switch

Usage

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>

Demo

Live : https://www.ismailnguyen.com

Switch Off

Switch On