diff options
| author | zwbetz-gh <zwbetz@gmail.com> | 2020-11-24 07:39:04 +0300 |
|---|---|---|
| committer | zwbetz-gh <zwbetz@gmail.com> | 2020-11-24 07:39:04 +0300 |
| commit | 27dbcc6dd9354208c8a8eed963fb1b6bff32cbc3 (patch) | |
| tree | 69c6ae05e043dd32769a7e821c0f0e6cf4678e42 | |
| parent | 9824fe3e2e0b54c7320df87effcfed1455989119 (diff) | |
prevent white flash on page load when dark theme is persisted
| -rw-r--r-- | assets/js/template-dom-scripts.js | 73 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 1 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 1 | ||||
| -rw-r--r-- | layouts/partials/head.html | 13 | ||||
| -rw-r--r-- | layouts/partials/noscript.html | 8 | ||||
| -rw-r--r-- | layouts/partials/script.html | 6 |
6 files changed, 68 insertions, 34 deletions
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" . }} <body> <a href="#main">{{ T "skip_to_content" }}</a> + {{ partial "noscript.html" . }} {{ partial "svg.html" . }} <div class="wrapper"> {{ 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 @@ <div> <label for="themer"> {{ T "dark_theme" }} <input type="checkbox" id="themer" class="vh"> + <!-- Shows "on" or "off" --> <span aria-hidden="true"></span> </label> </div> 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 @@ <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> + <style> + body { + visibility: hidden; + opacity: 0; + } + </style> + <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" media="none" onload="this.media='all';"> {{ $templateStyles := resources.Get "css/template-styles.css" }} @@ -30,12 +37,6 @@ <link rel="stylesheet" href="{{ . | absURL }}"> {{ end }} - <style id="inverter" media="none"> - .intro-and-nav, .main-and-footer { filter: invert(100%) } - * { background-color: inherit } - img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) } - </style> - {{ $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 @@ +<noscript> + <style> + body { + visibility: visible; + opacity: 1; + } + </style> +</noscript> 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 @@ -<script src="{{ "js/prism.js" | absURL }}"></script> - {{ $templateDomScripts := resources.Get "js/template-dom-scripts.js" }} {{ $domScripts := $templateDomScripts | resources.ExecuteAsTemplate "js/dom-scripts.js" . }} -<script src="{{ $domScripts.Permalink }}"></script> +<script src="{{ $domScripts.Permalink }}"></script> + +<script src="{{ "js/prism.js" | absURL }}"></script> {{ if site.Params.search }} {{ $searchJs := resources.Get "js/search.js" | fingerprint }} |