From 39c1b7d04a6aba2dfc908a48bce74c5f01045b50 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Sun, 6 Feb 2022 15:10:59 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20appearance=20pref=20not=20?=
 =?UTF-8?q?loading=20early=20enough?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #102
---
 CHANGELOG.md               | 1 +
 assets/js/appearance.js    | 2 +-
 layouts/partials/head.html | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

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" }}
+  <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" }}