Heller Modus-Blitz (im dunklen Modus) beim Neuladen der Seite ⇐ HTML

[Anonymous]

Immer wenn ich eine Seite neu lade, kommt es zu einem schnellen Blitz, der das gesamte System in den Dunkelmodus versetzt und wieder zurückkommt, aber sehr schnell.
Vorher passierte das auch im Dunkelmodus, aber ich konnte es beheben, indem ich die Funktion lädt, die die Themes im Kopf des HTML lädt. Daher funktioniert dies im Light-Modus nicht, und ich habe keine Ahnung, warum.
Wir verwenden Thymeleaf (aus Java), idk, falls sich dadurch etwas ändert, sowie HTML, tailwindCSS und JS. Ich werde hier den Dateicode einfügen, der die Vorlage für alle Seiten darstellt.

Code: Select all

(function() {
const docElement = document.documentElement;

const cookieMatch = document.cookie.match(/theme=(dark|light)/);
const savedTheme = cookieMatch ? cookieMatch[1] : null;

const themeToApply = savedTheme || 'light';

if (themeToApply === 'dark') {
docElement.classList.add('dark');
} else {
docElement.classList.remove('dark');
}

if (window.innerWidth >= 1024) {
const sidebarMatch = document.cookie.match(/sidebarState=(true|false)/);
const sidebarOpen = sidebarMatch ? sidebarMatch[1] === 'true' : true;

if (!sidebarOpen) {
docElement.classList.add('sidebar-closed');
} else {
docElement.classList.remove('sidebar-closed');
}
} else {
docElement.classList.add('sidebar-closed');
}
})();












SIGEN 2.0










@click="toggleSidebar()"
x-transition:enter="transition-opacity ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"
style="display: none;">

:class="{'pl-20': !isSidebarOpen}">




[url=#]

[/url]















tailwind.config = {
darkMode: 'class',
theme: {
extend: {
// extensões de tema
}
}
}



function layout() {
return {
isSidebarOpen: window.innerWidth >= 1024 ?
!document.documentElement.classList.contains('sidebar-closed') :
false,

theme: (document.cookie.match(/theme=(dark|light)/) || [null, 'light'])[1],

oneYearInSeconds: 365 * 24 * 60 * 60,

init() {
this.$watch('theme', (newTheme) => {
if (newTheme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}

document.cookie = `theme=${newTheme}; path=/; max-age=${this.oneYearInSeconds}`;
});

this.$watch('isSidebarOpen', (isOpen) => {
if (!isOpen) {
document.documentElement.classList.add('sidebar-closed');
} else {
document.documentElement.classList.remove('sidebar-closed');
}
});

window.addEventListener('resize', () => {
if (window.innerWidth < 1024) {
this.isSidebarOpen = false;
}
});
},

toggleSidebar() {
this.isSidebarOpen = !this.isSidebarOpen;

if (window.innerWidth >= 1024) {
document.cookie = `sidebarState=${this.isSidebarOpen}; path=/; max-age=${this.oneYearInSeconds}`;
}
},

closeSidebarOnMobile() {
if (window.innerWidth < 1024) {
this.isSidebarOpen = false;
}
},

toggleTheme() {
this.theme = (this.theme === 'light' ? 'dark' : 'light');
}
}
}