🐛 Fix appearance pref not loading early enough

Fixes #102

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
 

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");

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" }}
+  <script type="text/javascript" src="{{ $jsAppearance.RelPermalink }}" integrity="{{ $jsAppearance.Data.Integrity }}"></script>
   {{ if .Site.Params.enableSearch | default false }}
     {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }}
     {{ $jsSearch := resources.Get "js/search.js" }}