Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

10
gulpfile.js
View File

@@ -287,6 +287,10 @@ gulp.task('js-demo', () => {
return compileJs('demo') return compileJs('demo')
}) })
gulp.task('js-demo-theme', () => {
return compileJs('demo-theme')
})
/** /**
* Compile JS module files to dist directory * Compile JS module files to dist directory
*/ */
@@ -420,7 +424,7 @@ gulp.task('build-critical', (cb) => {
*/ */
gulp.task('watch', (cb) => { gulp.task('watch', (cb) => {
gulp.watch('./src/scss/**/*.scss', gulp.series('sass')) gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', 'js-demo')) gulp.watch('./src/js/**/*.js', gulp.parallel('js', 'mjs', gulp.parallel('js-demo', 'js-demo-theme')))
cb() cb()
}) })
@@ -520,8 +524,8 @@ gulp.task('add-banner', () => {
gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll')) gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
gulp.task('start', gulp.series('clean', 'sass', 'js', 'js-demo', 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync'))) gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', 'js-demo', 'mjs', 'copy-images', 'copy-libs', 'add-banner')) gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/)) gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'/*, 'build-critical'*/))
gulp.task('build', gulp.series('build-core', 'build-demo')) gulp.task('build', gulp.series('build-core', 'build-demo'))

25
src/js/demo-theme.js Normal file
View File

@@ -0,0 +1,25 @@
/**
* demo-theme is specifically loaded right after the body and not deferred
* to ensure we switch to the chosen dark/light theme as fast as possible.
* This will prevent any flashes of the light theme (default) before switching.
*/
const themeStorageKey = 'tablerTheme'
const defaultTheme = 'light'
let selectedTheme
// https://stackoverflow.com/a/901144
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (!!params.theme) {
localStorage.setItem(themeStorageKey, params.theme)
selectedTheme = params.theme
} else {
const storedTheme = localStorage.getItem(themeStorageKey)
selectedTheme = storedTheme ? storedTheme : defaultTheme
}
document.body.classList.remove('theme-dark', 'theme-light');
document.body.classList.add(`theme-${selectedTheme}`);

17
src/js/demo.js
View File

@@ -1,6 +1,5 @@
// Setting items // Setting items
const items = { const items = {
'theme': { localStorage: 'tablerTheme', default: 'light' },
'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' }, 'menu-position': { localStorage: 'tablerMenuPosition', default: 'top' },
'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' }, 'menu-behavior': { localStorage: 'tablerMenuBehavior', default: 'sticky' },
'container-layout': { localStorage: 'tablerContainerLayout', default: 'boxed' } '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 // Submit form
const submitForm = (form) => { const submitForm = (form) => {
// Save data to localStorage // Save data to localStorage
@@ -66,9 +55,6 @@ const submitForm = (form) => {
config[key] = value config[key] = value
} }
// Update body classes
updateBodyClasses();
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
(new bootstrap.Offcanvas(form)).hide() (new bootstrap.Offcanvas(form)).hide()
@@ -78,9 +64,6 @@ const submitForm = (form) => {
// Parse url // Parse url
parseUrl() parseUrl()
// Update body classes
updateBodyClasses();
// Elements // Elements
const form = document.querySelector('#offcanvasSettings') const form = document.querySelector('#offcanvasSettings')

1
src/pages/_layouts/base.html
View File

@@ -47,6 +47,7 @@
{% assign layout-dark = page.layout-dark | default: site.layout-dark %} {% assign layout-dark = page.layout-dark | default: site.layout-dark %}
<body {% if layout.body-class or page.body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}"{% endif %}> <body {% if layout.body-class or page.body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}"{% endif %}>
<script src="{{ site.base }}/dist/js/demo-theme{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment == 'preview' %}?{{ site.time | date: '%s' }}{% endif %}"></script>
{{ content }} {{ content }}