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

24
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,9 +92,8 @@
} }
} }
// Initialize theme function addHandlers(){
applyTheme(savedThemeMode); const dropdownItems = document.querySelectorAll('.dropdown-item');
// Add click handlers to dropdown items // Add click handlers to dropdown items
dropdownItems.forEach(item => { dropdownItems.forEach(item => {
item.addEventListener('click', () => { item.addEventListener('click', () => {
@ -116,4 +109,15 @@
root.removeAttribute('data-theme'); root.removeAttribute('data-theme');
} }
}); });
}
// Initialize theme
applyTheme(savedThemeMode);
addHandlers();
// Reapply theme on page switch
document.addEventListener('astro:page-load', () => {
applyTheme(savedThemeMode || THEME_AUTO);
addHandlers();
});
</script> </script>