4 files changed, 7 insertions, 68 deletions
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 2482859..3a76af4 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -63,5 +63,7 @@
     {{ else }}
       {{ template "_internal/google_analytics.html" . }}
     {{ end }}
+
+    {{ partial "theme.html" }}
     {{ partial "head_end.html" . }}
   </head>
diff --git a/layouts/partials/head_end.html b/layouts/partials/head_end.html
index 6a28614..e69de29 100644
--- a/layouts/partials/head_end.html
+++ b/layouts/partials/head_end.html
@@ -1,68 +0,0 @@
-<script>
-  function setTheme(themeName) {
-    if (themeName === 'dark') {
-      document.documentElement.classList.remove('theme--light');
-      document.documentElement.classList.add('theme--dark');
-    }
-    else {
-      document.documentElement.classList.remove('theme--dark');
-      document.documentElement.classList.add('theme--light');
-    }
-
-    localStorage.setItem('theme', themeName);
-    document.documentElement.setAttribute('data-theme', themeName);
-  }
-
-  var currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
-
-  // A theme has been chosen by the user on this site, we apply it
-  if (currentTheme) {
-    if (currentTheme === 'dark') {
-      setTheme('dark');
-    }
-    else {
-      setTheme('light');
-    }
-  }
-  else {
-      // No choice yet, we look at the preferences of the OS / browser
-      if (window.matchMedia("(prefers-color-scheme: dark)")) {
-        setTheme('dark');
-      }
-      else if (window.matchMedia("(prefers-color-scheme: light)")) {
-        setTheme('light');
-      }
-      else {
-        // By default, we apply the dark theme
-        setTheme('dark');
-      }
-  }
-
-  var mqDark = window.matchMedia('(prefers-color-scheme: dark)');
-  var mqLight = window.matchMedia('(prefers-color-scheme: light)');
-
-  function checkTheme(event) {
-    if (event.matches) {
-      if (event.media.includes('dark')) {
-        setTheme('dark');
-        document.getElementById('slider').checked = false;
-      }
-      if (event.media.includes('light')) {
-        setTheme('light');
-        document.getElementById('slider').checked = true;
-      }
-    }
-  }
-
-  try {
-    mqDark.addEventListener('change', checkTheme);
-    mqLight.addEventListener('change', checkTheme);
-  } catch (maybeSafari) {
-    try {
-      mqDark.addListener(checkTheme);
-      mqLight.addListener(checkTheme);
-    } catch (dontknow) {
-      // not supported…
-    }
-  }
-</script>
diff --git a/layouts/partials/theme.html b/layouts/partials/theme.html
new file mode 100644
index 0000000..0b8468f
--- /dev/null
+++ b/layouts/partials/theme.html
@@ -0,0 +1,5 @@
+<script type="text/javascript">
+{{ $js := resources.Get "js/theme-loader.js" }}
+{{ $mini := $js | resources.ExecuteAsTemplate . $.Context | resources.Minify }}
+{{ $mini.Content | safeJS }}
+</script>
diff --git a/src/js/theme.js b/src/js/theme.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/js/theme.js