1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00

Fix flashing white when dark theme is enabled (#1176)

Load the theme code as fast as possible to prevent flashing the light theme
before fetching and applying the dark theme from the URL or localstorage.
This commit is contained in:
Dave Heineman
2022-08-10 13:57:54 +02:00
committed by GitHub
parent baa9912b50
commit c4a6a8693b
4 changed files with 33 additions and 20 deletions

View File

@@ -1,6 +1,5 @@
// Setting items
const items = {
'theme': { localStorage: 'tablerTheme', default: 'light' },
'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' }
@@ -44,16 +43,6 @@ const toggleFormControls = (form) => {
}
}
// Update body classes
const updateBodyClasses = () => {
document.body.classList.remove('theme-dark', 'theme-light');
document.body.classList.add(`theme-${config.theme}`);
// for (const [key, params] of Object.entries(items)) {
// document.body.setAttribute(`data-${key}`, config[key]);
// }
}
// Submit form
const submitForm = (form) => {
// Save data to localStorage
@@ -66,9 +55,6 @@ const submitForm = (form) => {
config[key] = value
}
// Update body classes
updateBodyClasses();
window.dispatchEvent(new Event('resize'));
(new bootstrap.Offcanvas(form)).hide()
@@ -78,9 +64,6 @@ const submitForm = (form) => {
// Parse url
parseUrl()
// Update body classes
updateBodyClasses();
// Elements
const form = document.querySelector('#offcanvasSettings')