Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
alpinedarkmodetoggle
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment