From e49d77ec9141b0ae0ed10f335345ec804788a9f9 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Wed, 23 Dec 2020 17:31:56 +0100
Subject: [PATCH] add head/darkmode

---
 layouts/_default/baseof.html        | 22 ++--------------------
 layouts/partials/head/darkmode.html | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 layouts/partials/head/darkmode.html
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 68f1974..5abc1df 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,26 +5,8 @@
         {{- block "head" . -}}{{ end }}
     </head>
     <body class="{{ block `body-class` . }}{{ end }}">
-        <script>
-            (function() {
-                const colorSchemeKey = 'StackColorScheme';
-                const colorSchemeItem = localStorage.getItem(colorSchemeKey);
-                const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
-
-                if (colorSchemeItem == 'dark' || !colorSchemeItem && supportDarkMode || colorSchemeItem === 'auto' && supportDarkMode) {
-                    /**
-                     * Enable dark mode if:
-                     * 1. If dark mode is set already (in local storage)
-                     * 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
-                     * 3. Auto mode & prefere color scheme is dark
-                     */
-                    document.body.dataset.scheme = 'dark';
-                } else {
-                    document.body.dataset.scheme = 'light';
-                }
-            })();
-        </script>
-
+        {{- partial "head/darkmode" . -}}
+        
         <div class="container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
             {{ partial "sidebar/left.html" . }}
             <main class="main full-width">
diff --git a/layouts/partials/head/darkmode.html b/layouts/partials/head/darkmode.html
new file mode 100644
index 0000000..823079c
--- /dev/null
+++ b/layouts/partials/head/darkmode.html
@@ -0,0 +1,19 @@
+<script>
+    (function() {
+        const colorSchemeKey = 'StackColorScheme';
+        const colorSchemeItem = localStorage.getItem(colorSchemeKey);
+        const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+
+        if (colorSchemeItem == 'dark' || !colorSchemeItem && supportDarkMode || colorSchemeItem === 'auto' && supportDarkMode) {
+            /**
+             * Enable dark mode if:
+             * 1. If dark mode is set already (in local storage)
+             * 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
+             * 3. Auto mode & prefere color scheme is dark
+             */
+            document.body.dataset.scheme = 'dark';
+        } else {
+            document.body.dataset.scheme = 'light';
+        }
+    })();
+</script>
\ No newline at end of file
