root/movies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme switcher fix

Browse Source
This commit is contained in:
Doar Mihai
2026-03-07 13:35:17 +02:00
parent 72c2cd9485
commit 11610d6644
2 changed files with 65 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/theme-switcher.js
+59 -25
View File
@@ -1,38 +1,72 @@
document.addEventListener('DOMContentLoaded', function() {
const themeSwitcher = document.getElementById('themeSwitcher');
const themeIcon = themeSwitcher.querySelector('.iconify');
const themeText = themeSwitcher.querySelector('.theme-text');
// Check for saved theme preference or use system preference
// Apply theme immediately on script load (before DOM is ready) to prevent flash
(function() {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Wait for body to be available
if (document.body) {
applyInitialTheme();
} else {
document.addEventListener('DOMContentLoaded', applyInitialTheme);
}
function applyInitialTheme() {
// Remove any existing theme classes first
document.body.classList.remove('dark-mode', 'light-mode');
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
document.body.classList.add('dark-mode');
themeIcon.setAttribute('data-icon', 'mdi-weather-night');
themeText.textContent = 'Dark Mode';
} else {
document.body.classList.add('light-mode');
themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
themeText.textContent = 'Light Mode';
}
}
})();
document.addEventListener('DOMContentLoaded', function() {
const themeSwitcher = document.getElementById('themeSwitcher');
if (!themeSwitcher) {
console.warn('Theme switcher button not found');
return;
}
const themeIcon = themeSwitcher.querySelector('.iconify');
const themeText = themeSwitcher.querySelector('.theme-text');
// Function to apply theme
function applyTheme(theme) {
// Remove both classes first
document.body.classList.remove('dark-mode', 'light-mode');
if (theme === 'dark') {
document.body.classList.add('dark-mode');
if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-night');
if (themeText) themeText.textContent = 'Dark Mode';
localStorage.setItem('theme', 'dark');
} else {
document.body.classList.add('light-mode');
if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
if (themeText) themeText.textContent = 'Light Mode';
localStorage.setItem('theme', 'light');
}
}
// Set initial theme UI based on current state
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
if (currentTheme === 'dark') {
if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-night');
if (themeText) themeText.textContent = 'Dark Mode';
} else {
if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
if (themeText) themeText.textContent = 'Light Mode';
}
// Theme switcher click handler
themeSwitcher.addEventListener('click', function() {
if (document.body.classList.contains('dark-mode')) {
// Switch to light mode
document.body.classList.remove('dark-mode');
document.body.classList.add('light-mode');
themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
themeText.textContent = 'Light Mode';
localStorage.setItem('theme', 'light');
} else {
// Switch to dark mode
document.body.classList.remove('light-mode');
document.body.classList.add('dark-mode');
themeIcon.setAttribute('data-icon', 'mdi-weather-night');
themeText.textContent = 'Dark Mode';
localStorage.setItem('theme', 'dark');
}
const isDarkMode = document.body.classList.contains('dark-mode');
applyTheme(isDarkMode ? 'light' : 'dark');
});
});
resources/views/layouts/app.blade.php
+1 -1
View File
@@ -24,7 +24,7 @@
@livewireStyles
@bukStyles
</head>
<body class="light-mode">
<body>
<div class="theme-switcher d-none">
1 | 2 | 3 | 4
</div>