From c4a6a8693b989a0adcd769f58e7e6c39e815c5c4 Mon Sep 17 00:00:00 2001 From: Dave Heineman Date: Wed, 10 Aug 2022 13:57:54 +0200 Subject: [PATCH 1/2] 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. --- gulpfile.js | 10 +++++++--- src/js/demo-theme.js | 25 +++++++++++++++++++++++++ src/js/demo.js | 17 ----------------- src/pages/_layouts/base.html | 1 + 4 files changed, 33 insertions(+), 20 deletions(-) create mode 100644 src/js/demo-theme.js diff --git a/gulpfile.js b/gulpfile.js index 07d0833f4..fc6cc1f09 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -287,6 +287,10 @@ gulp.task('js-demo', () => { return compileJs('demo') }) +gulp.task('js-demo-theme', () => { + return compileJs('demo-theme') +}) + /** * Compile JS module files to dist directory */ @@ -420,7 +424,7 @@ gulp.task('build-critical', (cb) => { */ gulp.task('watch', (cb) => { 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() }) @@ -520,8 +524,8 @@ gulp.task('add-banner', () => { 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', gulp.series('build-core', 'build-demo')) diff --git a/src/js/demo-theme.js b/src/js/demo-theme.js new file mode 100644 index 000000000..c6e83c219 --- /dev/null +++ b/src/js/demo-theme.js @@ -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}`); \ No newline at end of file diff --git a/src/js/demo.js b/src/js/demo.js index fb4012417..6aaaade6f 100644 --- a/src/js/demo.js +++ b/src/js/demo.js @@ -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') diff --git a/src/pages/_layouts/base.html b/src/pages/_layouts/base.html index 46f8e5251..3fcb8031c 100644 --- a/src/pages/_layouts/base.html +++ b/src/pages/_layouts/base.html @@ -47,6 +47,7 @@ {% assign layout-dark = page.layout-dark | default: site.layout-dark %} + {{ content }} From e738cc47bd79af1599fcc72fc06300c492d22ab5 Mon Sep 17 00:00:00 2001 From: Dave Heineman Date: Wed, 31 Aug 2022 12:59:24 +0200 Subject: [PATCH 2/2] Fix ApexChart heatmap initialization on the charts docs page (#1152) --- src/pages/_includes/ui/chart-heatmap.html | 139 ++++++++++++---------- 1 file changed, 73 insertions(+), 66 deletions(-) diff --git a/src/pages/_includes/ui/chart-heatmap.html b/src/pages/_includes/ui/chart-heatmap.html index 1db3c4ffb..011cd86dd 100644 --- a/src/pages/_includes/ui/chart-heatmap.html +++ b/src/pages/_includes/ui/chart-heatmap.html @@ -8,77 +8,84 @@ {% capture script %} {% assign colors = include.colors | default: 1 %} {% endcapture %}