I followed a tutorial and used Alpine js to place a dark mode switcher on my website. it works good, but every time a user refreshed the page they need to choose the dark mode option again. I searched online and found Persist Plugin seems like a solution, however, I don't have any professional background, and only have experience following tutorials online to build my website, so I can't really get it work. Can anyone help me with this? thank you so much :)
Below is the tutorial code I used, it's from a Oxygen Builder tutorial:
<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>
I used the following code to modify Oxygen youtube video.
Alpine JS with local storage - x-data showing old/wrong value after page refresh
And worked. As an added bonus, anything you put in style under template x-if, will be formatted as well. If you use variable for colors, this will help to change it easier on all your site.
Example:
In your color var(--clr-background)
In your stylesheet :root {--clr-background: hsl(0, 0%, 100%);}
In style under x-if :root {--clr-background: hsl(0, 0%, 0%);}
<script src="//unpkg.com/alpinejs" defer></script>
<body
x-data="{darkMode: JSON.parse(localStorage.getItem('dark'))}"
x-init="$watch('darkMode', val => localStorage.setItem('dark', JSON.stringify(val)))"
x-bind:class="{ 'dark': darkMode }"
>
</body>
<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: hsl(345, 6%, 13%);
transition: 0.3s all ease-in-out;
}
.darkmode-switcher__circle {
width: 28px;
height: 28px;
border-radius: 80px;
background-color: hsl(0, 0%, 85%);
transition: 0.3s all ease-in-out;
}
</style>
<div class="mode-switcher">
<div class="darkmode-switcher" @click="darkMode = !darkMode">
<div class="darkmode-switcher__circle"></div>
</div>
<template x-if="darkMode">
<style>
//* Add new variable colors here *//
.darkmode-switcher {
background-color: hsl(0, 0%, 85%);
}
.darkmode-switcher__circle {
background-color: hsl(345, 6%, 13%);
transform: translateX(32px);
}
.content-wrapper {
background-color: hsl(345, 6%, 13%);
}
.content {
color: hsl(0, 0%, 85%);
background-color: #191919;
}
</style>
</template>
</div>
Next bonus, if you would like to autodetect dark mode and activate. This code detects if it is dark mode, and saves that it is the first time. So it doesn't auto dark every time.
Add it as js.
if(!('hasThisRunBefore' in localStorage)) {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
localStorage.setItem('dark', true);
localStorage.setItem("hasThisRunBefore", true);
}