🐛 Fix appearance pref not loading early enough

Fixes #102
pull/110/head
James Panther 2022-02-06 15:10:59 +11:00
parent 88946105fd
commit 39c1b7d04a
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
3 changed files with 4 additions and 2 deletions

View File

@ -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 - 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 - 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 ## [2.0.2] - 2022-02-05

View File

@ -2,7 +2,6 @@ const browserIsDark =
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
const sitePreference = document.documentElement.getAttribute("data-default-appearance"); const sitePreference = document.documentElement.getAttribute("data-default-appearance");
const userPreference = localStorage.getItem("appearance"); const userPreference = localStorage.getItem("appearance");
const switcher = document.getElementById("appearance-switcher");
if ( if (
(browserIsDark && userPreference === null) || (browserIsDark && userPreference === null) ||
@ -25,6 +24,7 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
} }
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
const switcher = document.getElementById("appearance-switcher");
if (switcher) { if (switcher) {
switcher.addEventListener("click", () => { switcher.addEventListener("click", () => {
document.documentElement.classList.toggle("dark"); document.documentElement.classList.toggle("dark");

View File

@ -51,7 +51,8 @@
integrity="{{ $bundleCSS.Data.Integrity }}" integrity="{{ $bundleCSS.Data.Integrity }}"
/> />
{{ $jsAppearance := resources.Get "js/appearance.js" }} {{ $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 }} {{ if .Site.Params.enableSearch | default false }}
{{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }} {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }}
{{ $jsSearch := resources.Get "js/search.js" }} {{ $jsSearch := resources.Get "js/search.js" }}