MAY The FORCE be with you

How to code a dark mode toggle

PART 1

<!-- HTML toggle -->
<label class="switch">
<input class="switch__input" type="checkbox" id="themeSwitch">
<div aria-hidden="true" class="switch__marker">
</div>
</label>
Copy me


/* Target CSS classes example */

:root {
   --dark-color: #E80A89;
}

[data-theme="dark"],
[data-theme="dark"] .background-color-white {
background-color:#111827;
}
  
[data-theme="dark"],
[data-theme="dark"] .w-nav-brand,
[data-theme="dark"] .w-nav-link,
[data-theme="dark"] .button {
color:white;
}

.switch {
position: relative;
display: inline-flex;
width: 2.75rem;
height: 1.5rem;
border-width: 2px;
flex-shrink: 0;
}

.switch__input {
opacity: 0;
width: 0;
height: 0;
}

.switch__marker {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: .4s;
transition: .4s;
border-radius: 9999px;
border:1px solid white;
}

.switch__marker:before {
position: absolute;
content: "";
width: 1.25rem;
height: 1.25rem;
left: 1px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 9999px;
}

input:checked + .switch__marker {
border-color:var(--dark-color);
}

input:focus + .switch__marker {
box-shadow: 0 0 1px rgba(168, 193, 216, 0.2);
}

input:checked + .switch__marker:before {
-webkit-transform: translateX(1.25rem);
-ms-transform: translateX(1.25rem);
transform: translateX(1.25rem);
background-color: var(--dark-color);
}


Copy me
PART 2
PART 3

<script>

// Example Javascript using localstorage to persist in the browser

document.getElementById('themeSwitch').addEventListener('change', function(event){
(event.target.checked) ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme');
});

var themeSwitch = document.getElementById('themeSwitch');
var dark1 = document.getElementById("dark1");
var dark2 = document.getElementById("dark2");
var force1 = document.getElementById("force1");
var lightSaber = document.getElementById("lightsaber1");
var lightSaberObject = document.getElementById("lightsaberobject");
var lightBeam = document.getElementById("light");
var title = document.getElementById('title');
var subTitle = document.getElementById('sub-title');
var part1text = document.getElementById('part-1-text');
var part2text = document.getElementById('part-2-text');
var part3text = document.getElementById('part-3-text');
var darkTitle = document.getElementById('dark-title');
var darkSubTitle = document.getElementById('dark-sub-title');
var darkPart1 = document.getElementById('dark-part-1');
var darkPart2 = document.getElementById('dark-part-2');
var darkPart3 = document.getElementById('dark-part-3');

lightSaberObject.addEventListener("click", playLightSaber);

function playLightSaber() {
lightSaber.play();
lightBeam.classList.toggle("flex-1");
title.classList.toggle('color-white');
subTitle.classList.toggle('color-white');
part1text.classList.toggle('color-white');
part2text.classList.toggle('color-white');
part3text.classList.toggle('color-white');
darkTitle.classList.toggle('fill-dark');
darkSubTitle.classList.toggle('fill-dark');
darkPart1.classList.toggle('fill-dark');
darkPart2.classList.toggle('fill-dark');
darkPart3.classList.toggle('fill-dark');
}

darkSounds = [ 'dark1', 'dark2', 'dark3', 'dark4', 'dark5' ]
forceSounds = [ 'force1', 'force2', 'force3', 'force4' ]

if(themeSwitch) {

initTheme();

themeSwitch.addEventListener('change', function(event){
resetTheme();
});

function playAudio() {
dark1.play();
}

function randomDarkSound() {
var index = Math.floor(Math.random() * 1000) % darkSounds.length;
var id = darkSounds[index];
var audioElement = document.getElementById(id);
audioElement.volume = 0.1;
audioElement.play();
}

function randomForceSound() {
var index = Math.floor(Math.random() * 1000) % forceSounds.length;
var id = forceSounds[index];
var audioElement = document.getElementById(id);
audioElement.volume = 0.1;
audioElement.play();
}

function playForceAudio() {
force1.play();
}

function initTheme() {
var darkThemeSelected = (localStorage.getItem('themeSwitch') !== null && localStorage.getItem('themeSwitch') === 'dark');
themeSwitch.checked = darkThemeSelected;
darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme');
};

function resetTheme() {
if(themeSwitch.checked) {
document.body.setAttribute('data-theme', 'dark');
randomDarkSound();
title.innerText="Welcome to the dark side";
localStorage.setItem('themeSwitch', 'dark');
} else {
randomForceSound();
document.body.removeAttribute('data-theme');
title.innerText="May the force be with you";
localStorage.removeItem('themeSwitch'); 
} 
};
}

</script>

Copy me