gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

fix: color theme switch when spa mode is on

Browse source
This commit is contained in:
草师傅 2025-07-22 12:49:16 +08:00
parent 3401ad19a4
commit 7700e0aaf5
Signed by: gb
GPG key ID: 43330A030E2D6478
1 changed files with 25 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/ThemeSwitcher.astro
View file

@ -50,25 +50,19 @@
<script> <script>
// Constants for theme options // Constants for theme options
const THEME_AUTO = 'auto'; const THEME_AUTO = 'auto';
const THEME_DARK = 'dark';
const THEME_LIGHT = 'light';
// DOM elements // DOM elements
const themeDropdown = document.getElementById('theme-dropdown');
const menuBody = document.getElementById('menu-body');
const dropdownItems = document.querySelectorAll('.dropdown-item');
const root = document.documentElement; const root = document.documentElement;
// Get system preference // Get system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const systemTheme = prefersDark ? THEME_DARK : THEME_LIGHT;
// Get saved theme from localStorage or default to auto // Get saved theme from localStorage or default to auto
const savedThemeMode = localStorage.getItem('themeMode') || THEME_AUTO; const savedThemeMode = localStorage.getItem('themeMode') || THEME_AUTO;
const savedTheme = localStorage.getItem('theme');
// Function to update active state in dropdown menu // Function to update active state in dropdown menu
function updateActiveState(activeTheme) { function updateActiveState(activeTheme) {
const dropdownItems = document.querySelectorAll('.dropdown-item');
dropdownItems.forEach(item => { dropdownItems.forEach(item => {
if (item.getAttribute('data-theme') === activeTheme) { if (item.getAttribute('data-theme') === activeTheme) {
item.classList.add('active'); item.classList.add('active');
@ -98,22 +92,32 @@
} }
} }
function addHandlers(){
const dropdownItems = document.querySelectorAll('.dropdown-item');
// Add click handlers to dropdown items
dropdownItems.forEach(item => {
item.addEventListener('click', () => {
const selectedTheme = item.getAttribute('data-theme');
applyTheme(selectedTheme);
});
});
// Listen for system preference changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (savedThemeMode === THEME_AUTO) {
// Only update if we're in auto mode
root.removeAttribute('data-theme');
}
});
}
// Initialize theme // Initialize theme
applyTheme(savedThemeMode); applyTheme(savedThemeMode);
addHandlers();
// Add click handlers to dropdown items // Reapply theme on page switch
dropdownItems.forEach(item => { document.addEventListener('astro:page-load', () => {
item.addEventListener('click', () => { applyTheme(savedThemeMode || THEME_AUTO);
const selectedTheme = item.getAttribute('data-theme'); addHandlers();
applyTheme(selectedTheme);
}); });
});
// Listen for system preference changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (savedThemeMode === THEME_AUTO) {
// Only update if we're in auto mode
root.removeAttribute('data-theme');
}
});
</script> </script>