watzon
/
watzon.tech
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add system theme to toggle

This commit is contained in:
Chris W 2023-12-08 20:37:42 -07:00
parent 4771df9a67
commit 0fe58387a3
1 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/ThemeToggle.astro
View File

@ -5,44 +5,51 @@ import { Icon } from 'astro-icon/components';
<button id="themeToggle">
<Icon name="mdi:weather-sunny" class="sun w-8 h-8 text-gray-800" />
<Icon name="mdi:weather-night" class="moon w-8 h-8 text-gray-100" />
<Icon name="mdi:weather-partly-cloudy" class="system w-8 h-8 text-gray-500" />
</button>
<style>
#themeToggle .sun {
@apply dark:hidden;
}
#themeToggle .moon {
@apply hidden dark:block;
.sun, .moon, .system {
display: none;
}
</style>
<script is:inline>
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
})();
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('themeToggle');
const currentTheme = localStorage.getItem('theme') || 'system';
if (theme === 'light') {
document.documentElement.classList.remove('dark');
} else {
// Apply the saved theme
setTheme(currentTheme);
themeToggle.addEventListener('click', toggleTheme);
});
function toggleTheme() {
const currentTheme = localStorage.getItem('theme');
const newTheme = currentTheme === 'dark' ? 'light' : currentTheme === 'light' ? 'system' : 'dark';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
}
function setTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else if (theme === 'light') {
document.documentElement.classList.remove('dark');
} else if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.classList.toggle('dark', systemTheme === 'dark');
}
window.localStorage.setItem('theme', theme);
// Adjusting icons visibility
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const systemIcon = document.querySelector('.system');
const handleToggleClick = () => {
const element = document.documentElement;
element.classList.toggle("dark");
const isDark = element.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
sunIcon.style.display = theme === 'light' ? 'block' : 'none';
moonIcon.style.display = theme === 'dark' ? 'block' : 'none';
systemIcon.style.display = theme === 'system' ? 'block' : 'none';
}
document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
</script>