ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed theme button

Browse Source
This commit is contained in:
ben7sys
2024-11-17 08:13:43 +01:00
parent ad73402297
commit 317cc79234
1 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/js/theme.js
View File

@@ -11,12 +11,11 @@
// Initialize theme immediately to prevent flash of wrong theme // Initialize theme immediately to prevent flash of wrong theme
initThemeEarly(); initThemeEarly();
// Then initialize everything else when DOM is ready // Wait for components to be loaded before initializing the theme system
if (document.readyState === 'loading') { document.addEventListener('componentsLoaded', function() {
document.addEventListener('DOMContentLoaded', initializeThemeSystem); console.log('Components loaded, initializing theme system...');
} else {
initializeThemeSystem(); initializeThemeSystem();
} });
// Functions // Functions
function initThemeEarly() { function initThemeEarly() {
@@ -35,12 +34,16 @@
} }
function initializeThemeSystem() { function initializeThemeSystem() {
console.log('Theme system initializing...');
try { try {
// Set up theme toggle button // Set up theme toggle button
const themeToggle = document.querySelector('.theme-toggle'); const themeToggle = document.querySelector('.theme-toggle');
console.log('Theme toggle button found:', themeToggle);
if (themeToggle) { if (themeToggle) {
themeToggle.addEventListener('click', toggleTheme); themeToggle.addEventListener('click', toggleTheme);
updateThemeIcon(getCurrentTheme()); updateThemeIcon(getCurrentTheme());
console.log('Theme toggle event listener added');
} }
// Set up system theme change listener // Set up system theme change listener
@@ -68,6 +71,10 @@
const currentTheme = getCurrentTheme(); const currentTheme = getCurrentTheme();
const newTheme = currentTheme === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK; const newTheme = currentTheme === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
console.log('Theme Toggle clicked!');
console.log('Current theme:', currentTheme);
console.log('New theme:', newTheme);
setTheme(newTheme); setTheme(newTheme);
localStorage.setItem(THEME_STORAGE_KEY, newTheme); localStorage.setItem(THEME_STORAGE_KEY, newTheme);
updateThemeIcon(newTheme); updateThemeIcon(newTheme);
@@ -78,11 +85,15 @@
function updateThemeIcon(theme) { function updateThemeIcon(theme) {
try { try {
const themeIcon = document.querySelector('.theme-toggle i'); const themeToggle = document.querySelector('.theme-toggle');
if (themeIcon) { if (themeToggle) {
themeIcon.className = theme === THEMES.DARK // Ensure both icons exist
? 'fas fa-sun' if (!themeToggle.querySelector('.fa-sun')) {
: 'fas fa-moon'; themeToggle.innerHTML = `
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
`;
}
} }
} catch (error) { } catch (error) {
console.warn('Theme icon update error:', error); console.warn('Theme icon update error:', error);