nextcloud/all-in-one
1
1
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2025-10-02 03:24:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): split theme & icon load to prevent flicker, errors

Browse source 
Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>
This commit is contained in:
ernolf 2024-10-25 20:30:30 +02:00
parent a0ce2c1bec
commit 3f3ae167e9
No known key found for this signature in database
GPG key ID: 0B145139A170715C
2 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
php/public/toggle-dark-mode.js
View file

@ -10,17 +10,28 @@ function toggleTheme() {
themeIcon.textContent = newTheme === 'dark' ? '☀️' : '🌙'; // Switch between moon and sun icons
}
// Function to apply saved theme from localStorage
function applySavedTheme() {
// Function to immediately apply saved theme without icon update
function applySavedThemeImmediately() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.removeAttribute('data-theme'); // Default to light theme
}
}
// Function to apply theme-icon update
function setThemeIcon() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.getElementById('theme-icon').textContent = '☀️'; // Sun icon for dark mode
} else {
document.documentElement.removeAttribute('data-theme'); // Default to light theme (no data-theme)
document.getElementById('theme-icon').textContent = '🌙'; // Moon icon for light mode
}
}
// Immediately apply the saved theme to avoid flickering
applySavedThemeImmediately();
// Apply theme when the page loads
document.addEventListener('DOMContentLoaded', applySavedTheme);
document.addEventListener('DOMContentLoaded', setThemeIcon);

2
php/templates/layout.twig
View file

@ -15,7 +15,7 @@
<div class="loader"></div>
</div>
<button id="theme-toggle" onclick="toggleTheme()">
<span id="theme-icon">🌙</span>
<span id="theme-icon"></span>
</button>
</body>
</html>