From 27dbcc6dd9354208c8a8eed963fb1b6bff32cbc3 Mon Sep 17 00:00:00 2001 From: zwbetz-gh Date: Mon, 23 Nov 2020 22:39:04 -0600 Subject: prevent white flash on page load when dark theme is persisted --- assets/js/template-dom-scripts.js | 73 +++++++++++++++++++++++++-------------- layouts/_default/baseof.html | 1 + layouts/partials/footer.html | 1 + layouts/partials/head.html | 13 +++---- layouts/partials/noscript.html | 8 +++++ layouts/partials/script.html | 6 ++-- 6 files changed, 68 insertions(+), 34 deletions(-) create mode 100644 layouts/partials/noscript.html diff --git a/assets/js/template-dom-scripts.js b/assets/js/template-dom-scripts.js index c0b97ea..70197e5 100644 --- a/assets/js/template-dom-scripts.js +++ b/assets/js/template-dom-scripts.js @@ -97,41 +97,64 @@ /* Switch and persist theme */ (function () { - function CSSSupported (property, value) { - var prop = property + ':', - el = document.createElement('test'), - mStyle = el.style; - el.style.cssText = prop + value; - return mStyle[property]; - } - var checkbox = document.getElementById('themer'); - var inverter = document.getElementById('inverter'); - if (!CSSSupported('filter', 'invert(100%)')) { - checkbox.parentNode.hidden = true; - return; + function persistTheme(val) { + localStorage.setItem('darkTheme', val); } - function darkTheme(media) { - inverter.setAttribute('media', media); - inverter.textContent = inverter.textContent.trim(); - localStorage.setItem('darkTheme', media); + function applyDarkTheme() { + var rules = [ + '.intro-and-nav, .main-and-footer { filter: invert(100%); }', + '* { background-color: inherit; }', + 'img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%); }' + ]; + rules.forEach(function(rule) { + document.styleSheets[0].insertRule(rule); + }) + } + + function clearDarkTheme() { + for (let i = 0; i < document.styleSheets[0].cssRules.length; i++) { + document.styleSheets[0].deleteRule(i); + } } checkbox.addEventListener('change', function () { - darkTheme(this.checked ? 'screen' : 'none'); + if (this.checked) { + applyDarkTheme(); + persistTheme('true'); + } else { + clearDarkTheme(); + persistTheme('false'); + } }); - window.addEventListener('DOMContentLoaded', function () { - if ('filter' in document.body.style) { - if (localStorage.getItem('darkTheme') === 'screen') { - checkbox.click(); - } + function handleDarkThemeAsDefault() { + {{ if .Site.Params.darkThemeAsDefault }} + persistTheme('true'); + handleDarkThemeAsDefault = function() {}; + {{ end }} + } + + function showTheme() { + if (localStorage.getItem('darkTheme') === 'true') { + applyDarkTheme(); + checkbox.checked = true; } + } + + function showContent() { + document.body.style.visibility = 'visible'; + document.body.style.opacity = 1; + } + + window.addEventListener('DOMContentLoaded', function () { + handleDarkThemeAsDefault(); + + showTheme(); + + showContent(); }); - {{ if .Site.Params.darkThemeAsDefault }} - darkTheme('screen'); - {{ end }} }()); diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index f2c41c3..d7fcd24 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,6 +3,7 @@ {{ partial "head.html" . }} {{ T "skip_to_content" }} + {{ partial "noscript.html" . }} {{ partial "svg.html" . }}

{{ partial "header.html" . }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 9334920..492ba39 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,6 +2,7 @@

{{ T "dark_theme" }} +

diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 490f21d..1569c8b 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -20,6 +20,13 @@ + + {{ $templateStyles := resources.Get "css/template-styles.css" }} @@ -30,12 +37,6 @@ {{ end }} - - {{ $title := print .Title " | " .Site.Title }} {{ if .IsHome }} {{ $title = .Site.Title }} diff --git a/layouts/partials/noscript.html b/layouts/partials/noscript.html new file mode 100644 index 0000000..40ae776 --- /dev/null +++ b/layouts/partials/noscript.html @@ -0,0 +1,8 @@ + diff --git a/layouts/partials/script.html b/layouts/partials/script.html index 2946b25..0c1dd93 100644 --- a/layouts/partials/script.html +++ b/layouts/partials/script.html @@ -1,8 +1,8 @@ - - {{ $templateDomScripts := resources.Get "js/template-dom-scripts.js" }} {{ $domScripts := $templateDomScripts | resources.ExecuteAsTemplate "js/dom-scripts.js" . }} - + + + {{ if site.Params.search }} {{ $searchJs := resources.Get "js/search.js" | fingerprint }} -- cgit v1.2.3