Night Mode Toggle with Vue LocalStorage

index.html

<div id="page" :class="['hoge', nightMode ? 'theme-dark': '']">
	<label for="theme-toggle"><span>Toggle</span></label>
	<input type="checkbox" id="theme-toggle" v-model="nightMode">
</div>

night-mode-toggle-with-vue-localstorage.markdown

Night Mode Toggle with Vue LocalStorage

A Pen by Pistol on CodePen.

License.

script.babel

new Vue({
	el: "#page",
	data() {
		return {
			// nightMode: localStorage.getItem("nightMode", JSON.stringify) || false
			nightMode: []
		};
	},
	mounted() {
		if (localStorage.nightMode) {
			// this.nightMode = localStorage.nightMode;
			this.nightMode = JSON.parse(localStorage.getItem('nightMode'))
		}
	},
	watch: {
		nightMode() {
			localStorage.setItem("nightMode", JSON.stringify(this.nightMode));
			console.log("Night Mode: " + JSON.stringify(this.nightMode));
		}
	}
	// methods: {
	// 	nightMode() {
	// 		localStorage.nightMode = this.nightMode;
	// 		console.log("Night Mode: " + JSON.stringify(this.nightMode));
	// 	}
	// }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

style.scss

/*
:root {
	--toggle-size: 10rem;
	--switch-w: 4em;
	--switch-h: 2em;
	--switch-handle-scale: 0.65;
	--switch-off-handle-x: -0.125em;
	--switch-on-handle-x: calc(100% - 0.125em);
	--switch-transition-duration: 0.2s;
}
*/

#page {
	background: hsl(207, 30%, 90%);

	&.theme-dark {
		// background: hsl(207, 10%, 50%);
		background-color: #333;
		color: white;
	}

	label {
		display: inline-flex;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
}

// #theme-toggle {
// 	display: none;

// 	& + label {
// 		font-size: var(--toggle-size);
// 		display: flex;
// 		height: var(--switch-h);
// 		width: var(--switch-w);
// 		border-radius: calc(var(--switch-h) / 2);
// 		background-size: auto 8em;
//     	background-position: bottom;
// 		background-image: linear-gradient(180deg, #021037 0%, #20206A 19%, #4184B1 66%, #62E7F7 100%);
//         transition: var(--switch-transition-duration);
// 		border: .125em solid hsl(207, 30%, 95%);
// 		overflow: hidden;

// 		span {
// 			background: #fffad8;
// 			border-radius: 50%;
// 			height: var(--switch-h);
// 			width: var(--switch-h);
// 			transform: translateX(var(--switch-off-handle-x)) scale(var(--switch-handle-scale));
// 			transition: var(--switch-transition-duration);
//             cursor: pointer;
//             box-shadow: 0 0 .25em .0625em #fbee8d, 0 0 2em 0 #FFEB3B, inset -.25em -.25em 0 0 #fbee8e, inset -.3125em -.3125em 0 .625em #fff5b2;
//             margin-top: var(--switch-off-handle-x);
// 		}
// 	}

// 	&:checked {
// 		font-size: var(--switch-font-size);

// 		& + label {
// 			background-position: top;
//             border-color: hsl(207, 30%, 50%);

// 			span {
// 				background: transparent;
//                 transform: translateX(var(--switch-on-handle-x)) scale(var(--switch-handle-scale));
//                 box-shadow: inset -.1875em -.1875em 0 0 #fbe7ef, inset -.5625em -.5625em 0 0 #fffff7;
// 			}
// 		}
// 	}
// }

// /*-- Housekeeping --*/

// html {
// 	box-sizing: border-box;
// }

// *, *:before, *:after {
// 	box-sizing: inherit;

// }

// body {
// 	margin: 0;
// }

// #page {
// 	min-height: 100vh;
// 	display: flex;
// 	flex-direction: column;
// 	justify-content: center;
// 	align-items: center;
// 	transition: .2s ease;
// }