From 468cc14d4b0d1f573d1660466ae1802a684753d4 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Fri, 28 May 2021 11:11:09 -0400
Subject: [PATCH] move dark mode script inline to avoid blinding flash of white
 background

---
 config.toml                             | 2 ++
 layouts/_default/baseof.html            | 3 ++-
 layouts/partials/scripts/_bundle.html   | 5 ++---
 layouts/partials/scripts/set_theme.html | 1 +
 netlify.toml                            | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 layouts/partials/scripts/set_theme.html

diff --git a/config.toml b/config.toml
index dc08ca23..2175397a 100644
--- a/config.toml
+++ b/config.toml
@@ -195,3 +195,5 @@ disableAliases = true
     for = "/**"
     [server.headers.values]
       Access-Control-Allow-Origin = "*"
+      # uncomment to get hashes of inline scripts via console errors:
+      # content-security-policy = "script-src 'self';"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 69ccee61..68e599c1 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -12,7 +12,8 @@
 {{ block "main" . }}{{ end }}
 </main>
 {{ partial "page/footer" . }}
-{{ partial "scripts/_bundle" . -}}
+{{ partialCached "scripts/set_theme" . -}}
+{{ partialCached "scripts/_bundle" . -}}
 {{ partial "scripts/shortcodes" . -}}
   </body>
 </html>
diff --git a/layouts/partials/scripts/_bundle.html b/layouts/partials/scripts/_bundle.html
index 186d20c9..36024c72 100644
--- a/layouts/partials/scripts/_bundle.html
+++ b/layouts/partials/scripts/_bundle.html
@@ -1,14 +1,13 @@
 {{/* only parse and append analytics script on production site */}}
 {{- $includeProdScripts := eq hugo.Environment "production" -}}
 
-{{- $darkmode := resources.Get "js/dark-mode.js" | resources.ExecuteAsTemplate "js/dark-mode.js" . -}}
 {{- $twemoji := resources.Get "js/vendor/twemoji.js" | resources.ExecuteAsTemplate "js/vendor/twemoji.js" . -}}
 
-{{- $bundle := slice $darkmode $twemoji -}}
+{{- $bundle := slice $twemoji -}}
 
 {{- if $includeProdScripts }}
   {{- $fathom := resources.Get "js/fathom.js" | resources.ExecuteAsTemplate "js/fathom.js" . }}
-  {{- $bundle = slice $darkmode $twemoji $fathom }}
+  {{- $bundle = $bundle | append $fathom }}
 {{- end }}
 
 {{- $js := $bundle | resources.Concat "/js/app.js" -}}
diff --git a/layouts/partials/scripts/set_theme.html b/layouts/partials/scripts/set_theme.html
new file mode 100644
index 00000000..d3c7e6b4
--- /dev/null
+++ b/layouts/partials/scripts/set_theme.html
@@ -0,0 +1 @@
+<script>(function(d){var u=d.document,f=u.body.classList,e=localStorage,c="dark_mode_pref",t=e.getItem(c),a="dark",n="light",r="{{ .Site.Params.Theme.defaultTheme | safeJS }}",o=u.querySelector(".dark-mode-toggle"),i=r===a,b=function(d){f.remove(a,n);f.add(d);i=d===a};t===a&&b(a);t===n&&b(n);if(!t){var s=function(d){return"(prefers-color-scheme: "+d+")"};d.matchMedia(s(a)).matches?b(a):d.matchMedia(s(n)).matches?b(n):b(r);d.matchMedia(s(a)).addListener((function(d){d.matches&&b(a)}));d.matchMedia(s(n)).addListener((function(d){d.matches&&b(n)}))}if(o){o.style.display="block";o.addEventListener("click",(function(){if(i){b(n);e.setItem(c,n)}else{b(a);e.setItem(c,a)}}),!0)}})(window)</script>
diff --git a/netlify.toml b/netlify.toml
index 1a44187c..5fd50923 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -78,7 +78,7 @@
     manifest-src 'self';
     media-src 'self' data: https:;
     object-src 'none';
-    script-src 'self' cdn.ampproject.org/lts/v0.js cdn.ampproject.org/lts/v0/ cdn.ampproject.org/viewer/ cdn.ampproject.org/rtv/ 3p.ampproject.net buttons.github.io gist.github.com syndication.twitter.com platform.twitter.com player.vimeo.com 'sha256-y3Xr/40/KQnUvqk/kZO5us6t3i/I49BsbYjsH8ELhVg=' 'sha256-JGG0npUp+0ABq/NY1azjpQ0WBtm+m5gU58mzF+2DCXY=';
+    script-src 'self' cdn.ampproject.org/lts/v0.js cdn.ampproject.org/lts/v0/ cdn.ampproject.org/viewer/ cdn.ampproject.org/rtv/ 3p.ampproject.net buttons.github.io gist.github.com syndication.twitter.com platform.twitter.com player.vimeo.com 'sha256-1j1MKfE70TTCp5KmiC2YImxw2RMS52uCH5yXl1heG9U=' 'sha256-y3Xr/40/KQnUvqk/kZO5us6t3i/I49BsbYjsH8ELhVg=' 'sha256-JGG0npUp+0ABq/NY1azjpQ0WBtm+m5gU58mzF+2DCXY=';
     style-src 'self' 'unsafe-inline' cdn.ampproject.org/rtv/ fonts.googleapis.com assets-cdn.github.com github.githubassets.com;
     worker-src 'self';
     block-all-mixed-content;