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

65
src/components/ThemeToggle.astro
View File

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