hugopoi
/
cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

prevent white flash on page load when dark theme is persisted

This commit is contained in:
zwbetz-gh 2020-11-23 22:39:04 -06:00
parent 9824fe3e2e
commit 27dbcc6dd9
6 changed files with 70 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
assets/js/template-dom-scripts.js
View File

@ -97,41 +97,64 @@
/* Switch and persist theme */ /* Switch and persist theme */
(function () { (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 checkbox = document.getElementById('themer');
var inverter = document.getElementById('inverter');
if (!CSSSupported('filter', 'invert(100%)')) { function persistTheme(val) {
checkbox.parentNode.hidden = true; localStorage.setItem('darkTheme', val);
return;
} }
function darkTheme(media) { function applyDarkTheme() {
inverter.setAttribute('media', media); var rules = [
inverter.textContent = inverter.textContent.trim(); '.intro-and-nav, .main-and-footer { filter: invert(100%); }',
localStorage.setItem('darkTheme', media); '* { 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 () { checkbox.addEventListener('change', function () {
darkTheme(this.checked ? 'screen' : 'none'); if (this.checked) {
applyDarkTheme();
persistTheme('true');
} else {
clearDarkTheme();
persistTheme('false');
}
}); });
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 () { window.addEventListener('DOMContentLoaded', function () {
if ('filter' in document.body.style) { handleDarkThemeAsDefault();
if (localStorage.getItem('darkTheme') === 'screen') {
checkbox.click(); showTheme();
}
} showContent();
}); });
{{ if .Site.Params.darkThemeAsDefault }}
darkTheme('screen');
{{ end }}
}()); }());

1
layouts/_default/baseof.html
View File

@ -3,6 +3,7 @@
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
<a href="#main">{{ T "skip_to_content" }}</a> <a href="#main">{{ T "skip_to_content" }}</a>
{{ partial "noscript.html" . }}
{{ partial "svg.html" . }} {{ partial "svg.html" . }}
<div class="wrapper"> <div class="wrapper">
{{ partial "header.html" . }} {{ partial "header.html" . }}

1
layouts/partials/footer.html
View File

@ -2,6 +2,7 @@
<div> <div>
<label for="themer"> <label for="themer">
{{ T "dark_theme" }} <input type="checkbox" id="themer" class="vh"> {{ T "dark_theme" }} <input type="checkbox" id="themer" class="vh">
<!-- Shows "on" or "off" -->
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</label> </label>
</div> </div>

13
layouts/partials/head.html
View File

@ -20,6 +20,13 @@
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" 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';"> <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" media="none" onload="this.media='all';">
{{ $templateStyles := resources.Get "css/template-styles.css" }} {{ $templateStyles := resources.Get "css/template-styles.css" }}
@ -30,12 +37,6 @@
<link rel="stylesheet" href="{{ . | absURL }}"> <link rel="stylesheet" href="{{ . | absURL }}">
{{ end }} {{ 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 }} {{ $title := print .Title " | " .Site.Title }}
{{ if .IsHome }} {{ if .IsHome }}
{{ $title = .Site.Title }} {{ $title = .Site.Title }}

8
layouts/partials/noscript.html Normal file
View File

@ -0,0 +1,8 @@
<noscript>
<style>
body {
visibility: visible;
opacity: 1;
}
</style>
</noscript>

4
layouts/partials/script.html
View File

@ -1,9 +1,9 @@
<script src="{{ "js/prism.js" | absURL }}"></script>
{{ $templateDomScripts := resources.Get "js/template-dom-scripts.js" }} {{ $templateDomScripts := resources.Get "js/template-dom-scripts.js" }}
{{ $domScripts := $templateDomScripts | resources.ExecuteAsTemplate "js/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 }} {{ if site.Params.search }}
{{ $searchJs := resources.Get "js/search.js" | fingerprint }} {{ $searchJs := resources.Get "js/search.js" | fingerprint }}
<script src="{{ $searchJs.RelPermalink }}"></script> <script src="{{ $searchJs.RelPermalink }}"></script>