<div class=“toggleWrapper”>

<input type="checkbox" class="dn" id="theme-toggle" onclick="modeSwitcher()" checked />
<label for="theme-toggle" class="toggle">
<span class="toggle__handler">
  <span class="crater crater--1"></span>
  <span class="crater crater--2"></span>
  <span class="crater crater--3"></span>
</span>
    <span class="star star--1"></span>
    <span class="star star--2"></span>
    <span class="star star--3"></span>
    <span class="star star--4"></span>
    <span class="star star--5"></span>
    <span class="star star--6"></span>
</label>

</div> <script type=“text/javascript”> const theme = localStorage.getItem('theme');

if (theme === “light”) {

document.documentElement.setAttribute('data-theme', 'light');

} else {

document.documentElement.setAttribute('data-theme', 'dark');

} const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');

function activateDarkTheme() {

document.getElementById('theme-toggle').checked = true;
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.classList.add('theme--dark');
document.documentElement.classList.remove('theme--light');
    document.getElementById("theme-toggle").className = 'light';
    window.localStorage.setItem('theme', 'dark');

}

function activateLightTheme() {

document.getElementById('theme-toggle').checked = false;
document.documentElement.setAttribute('data-theme', 'light');
document.documentElement.classList.add('theme--light');
document.documentElement.classList.remove('theme--dark');
    document.getElementById("theme-toggle").className = 'dark';
    window.localStorage.setItem('theme', 'light');

}

if (theme === “dark”) {

activateDarkTheme();

} else if (theme === “light”) {

activateLightTheme();

} else if (userPrefers === “light”) {

activateDarkTheme();

} else {

activateDarkTheme();

}

function modeSwitcher() {

let currentMode = document.documentElement.getAttribute('data-theme');
if (currentMode === "dark") {
    activateLightTheme();
} else {
    activateDarkTheme();
}

} </script>