add system theme to toggle
This commit is contained in:
parent
4771df9a67
commit
0fe58387a3
|
@ -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");
|
||||
}
|
||||
|
||||
document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
|
||||
sunIcon.style.display = theme === 'light' ? 'block' : 'none';
|
||||
moonIcon.style.display = theme === 'dark' ? 'block' : 'none';
|
||||
systemIcon.style.display = theme === 'system' ? 'block' : 'none';
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue