alpinedarkmodetoggle

alpinedarkmodetoggle.html

<script src="//unpkg.com/alpinejs" defer></script>

<style>
	.darkmode-switcher {
		width: 64px;
		height: 32px;
		border-radius: 80px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 2px;
		cursor: pointer;
		background-color: #191919;
		transition: 0.3s all ease-in-out;
	}
	
	.darkmode-switcher__circle {
		width: 28px;
		height: 28px;
		border-radius: 80px;
		background-color: white;
		transition: 0.3s all ease-in-out;
	}	
</style>

<div class="mode-switcher" x-data="{ darkMode: false, switchMode: function() { this.darkMode = !this.darkMode } }">
	<div class="darkmode-switcher" @click="switchMode()">
		<div class="darkmode-switcher__circle"></div>
	</div>
	<template x-if="darkMode">
		<style>
			.darkmode-switcher {
				background-color: white;
			}
			.darkmode-switcher__circle {
				background-color: black;
				transform: translateX(32px);
			}
			
			.content-wrapper {
				background-color: black;
			}
			
			.content {
				color: white;
				background-color: #191919;
			}
			body {
				background-color: black;
			}
		</style>
	</template>
</div>