mirror of
https://github.com/peter-tanner/code.git
synced 2024-11-30 10:50:16 +08:00
63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
<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> |