Светлый режим Вспышка (в темном режиме) При перезагрузке страницы ⇐ Html

[Anonymous]

Всегда, когда я перезагружаю любую страницу, происходит быстрая вспышка, которая переводит всю систему в темный режим и возвращается снова, но очень быстро.
Раньше это происходило и в темном режиме, но я мог это исправить, загрузив функцию, которая загружает темы в заголовке HTML. Поэтому это не работает в облегченном режиме, и я понятия не имею, почему.
Мы используем Thymeleaf (из Java), не знаю, изменится ли что-нибудь, а также HTML, Tailwind CSS и JS. Я собираюсь поместить сюда код файла, который является шаблоном всех страниц.

Код: Выделить всё

(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');
}
})();

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');
}
}
}

Код: Выделить всё

[url=#]

[/url]

Подробнее здесь: https://stackoverflow.com/questions/798 ... eload-page