diff --git a/CHANGELOG.md b/CHANGELOG.md index 766efe36..ac13a63d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Markdown images and `figure` shortcode fail to load resource when providing an external URL source - HTML `figcaption` tags are output for Markdown images even when a caption is not provided +- Light appearance would briefly appear on page load before switching to dark appearance ([#102](https://github.com/jpanther/congo/issues/102)) ## [2.0.2] - 2022-02-05 diff --git a/assets/js/appearance.js b/assets/js/appearance.js index 686a13ea..f69b1f0c 100644 --- a/assets/js/appearance.js +++ b/assets/js/appearance.js @@ -2,7 +2,6 @@ const browserIsDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; const sitePreference = document.documentElement.getAttribute("data-default-appearance"); const userPreference = localStorage.getItem("appearance"); -const switcher = document.getElementById("appearance-switcher"); if ( (browserIsDark && userPreference === null) || @@ -25,6 +24,7 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") { } window.addEventListener("DOMContentLoaded", (event) => { + const switcher = document.getElementById("appearance-switcher"); if (switcher) { switcher.addEventListener("click", () => { document.documentElement.classList.toggle("dark"); diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 7ef02a9a..e59f8efd 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -51,7 +51,8 @@ integrity="{{ $bundleCSS.Data.Integrity }}" /> {{ $jsAppearance := resources.Get "js/appearance.js" }} - {{ $assets.Add "js" (slice $jsAppearance) }} + {{ $jsAppearance = $jsAppearance | resources.Minify | resources.Fingerprint "sha512" }} + {{ if .Site.Params.enableSearch | default false }} {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }} {{ $jsSearch := resources.Get "js/search.js" }}