Всегда, когда я перезагружаю любую страницу, происходит быстрая вспышка, которая переводит всю систему в темный режим и возвращается снова, но очень быстро.
Раньше это происходило и в темном режиме, но я мог это исправить, загрузив функцию, которая загружает темы в заголовке HTML. Поэтому это не работает в облегченном режиме, и я понятия не имею, почему.
Мы используем Thymeleaf (из Java), не знаю, изменится ли что-нибудь, а также HTML, TailwindCSS и 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');
}
})();
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}">
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');
}
}
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... eload-page
