Open
Description
It's relatively simple to add a toggle between light and dark mode, and javascript can be used to toggle a dark class to the body
Here's an example of one (styles are in sass):
<style>
.toggle {
$toggle-width: 50px;
$toggle-height: $toggle-width / 2 - 2;
$toggle-border: white;
$toggle-background: $secondary;
$toggle-transition: 0.25s;
position: relative;
display: inline-flex;
width: $toggle-width;
height: $toggle-height;
.toggle-input {
display: none;
&:checked + .toggle-ui:before {
transform: translateX($toggle-height);
}
}
.toggle-icon {
position: relative;
width: 18px;
height: 18px;
top: -3px;
}
.toggle-ui {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all $toggle-transition ease-in-out;
background: $toggle-background;
border: 2px solid darken($toggle-border, 10%);
border-radius: 25px;
&:before {
position: absolute;
content: '';
height: $toggle-height - 10px;
width: $toggle-height - 10px;
left: 4px;
bottom: 2.75px;
background-color: darken($toggle-border, 10%);
transition: all $toggle-transition ease-in-out;
border-radius: 50%;
}
}
}
</style>
<div class="toggle-wrapper">
<label class="toggle" for="theme">
<input class="toggle-input" type="checkbox" id="theme">
<span class="toggle-ui"></span>
<span class="sr-only">Toggle between light and dark theme</span>
</label>
</div>