<div class="dark-toggle">
<div class="moon">
<span class="sr-only">Dark mode toggle on and off switch</span>
</div>
</div>
<div class="dark-toggle">
<div class="moon">
<span class="sr-only">Dark mode toggle on and off switch</span>
</div>
</div>
/* No context defined. */
var Drupal = Drupal || {};
(function () {
// Check if the light mode is set in local storage
var isLightMode = localStorage.getItem('isLightMode');
// If the light mode is set in local storage, apply the saved state
if (isLightMode === 'true') {
document.body.classList.add('color-scheme-light');
document.body.classList.remove('color-scheme-dark');
document.querySelector('.moon').classList.add('sun');
document.querySelector('.dark-toggle').classList.add('day');
} else if (isLightMode === 'false') {
document.body.classList.remove('color-scheme-light');
document.body.classList.add('color-scheme-dark');
document.querySelector('.moon').classList.remove('sun');
document.querySelector('.dark-toggle').classList.remove('day');
}
// Handle click event on toggle button
document.querySelector('.dark-toggle').addEventListener('click', function () {
document.body.classList.toggle('color-scheme-light');
document.body.classList.toggle('color-scheme-dark');
document.querySelector('.moon').classList.toggle('sun');
document.querySelector('.dark-toggle').classList.toggle('day');
// Save the state of the light mode to local storage
var isLightMode = document.body.classList.contains('color-scheme-light');
localStorage.setItem('isLightMode', isLightMode);
});
})(Drupal);
:root {
--toggleHeight: 16em;
--toggleWidth: 30em;
--toggleBtnRadius: 10em;
--bgColor--night: #423966;
--toggleBtn-bgColor--night: var(--bgColor--night);
--mooncolor: #D9FBFF;
--bgColor--day: #9ee3fb;
--toggleBtn-bgColor--day: var(--bgColor--day);
}
body {
transition: background-color .2s ease-in-out;
}
.dark-toggle {
/*change size of toggle with font-size*/
font-size: 2px;
margin: $space_two 0 0 0;
position: relative;
height: var(--toggleHeight);
width: var(--toggleWidth);
border-radius: var(--toggleHeight);
transition: all 500ms ease-in-out;
background: var(--bgColor--night);
&.day {
background: #FFBF71;
}
.moon {
position: absolute;
display: block;
border-radius: 50%;
transition: all 400ms ease-in-out;
top: 3em;
left: 3em;
transform: rotate(-75deg);
width: var(--toggleBtnRadius);
height: var(--toggleBtnRadius);
background: var(--bgColor--night);
box-shadow:
3em 2.5em 0 0em var(--mooncolor) inset,
rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
}
.sun {
top: 4.5em;
left: 18em;
transform: rotate(0deg);
width: 7em;
height: 7em;
background: #fff;
box-shadow: 3em 3em 0 5em #fff inset,
0 -5em 0 -2.7em #fff,
3.5em -3.5em 0 -3em #fff,
5em 0 0 -2.7em #fff,
3.5em 3.5em 0 -3em #fff,
0 5em 0 -2.7em #fff,
-3.5em 3.5em 0 -3em #fff,
-5em 0 0 -2.7em #fff,
-3.5em -3.5em 0 -3em #fff;
}
}
Toggle the dark mode on and off.