feat(darkmode): dark mode toggle (#82)

* feat(darkmode): initial support for dark mode toggle

* fix(darkmode): add svg icons

* feat(darkmode): dispatch onColorSchemeChange event

* add head/darkmode

* feat(darkmode); add colorScheme config

* style: remove empty line

* refactor(darkmode): simplify code

* style: add comment for darkmode config

* i18n support for dark mode toggle

* Some renaming

layouts/partials/footer/components/highlight.html

@@ -1,4 +0,0 @@
-{{- $light := resources.Get "css/highlight/light.css" | minify -}}
-{{- $dark := resources.Get "css/highlight/dark.css" | minify -}}
-<link rel="stylesheet" href="{{ $light.RelPermalink }}" media="(prefers-color-scheme: light)">
-<link rel="stylesheet" href="{{ $dark.RelPermalink }}" media="(prefers-color-scheme: dark)">

layouts/partials/footer/include.html

@@ -1,4 +1,3 @@
 {{ partialCached "footer/components/script.html" . }}
 {{ partialCached "footer/components/custom-font.html" . }}
-{{ partialCached "footer/components/highlight.html" . }}
 {{ partial "footer/custom.html" . }}

layouts/partials/head/colorScheme.html

@@ -0,0 +1,39 @@
+{{- $defaultColorScheme := default "auto" .Site.Params.colorScheme.default -}}
+{{- if not (default false .Site.Params.colorScheme.toggle) -}}
+    {{/* If toggle is disabled, force default scheme */}}
+    <script>
+        (function() {
+            const colorSchemeKey = 'StackColorScheme';
+            localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}");
+        })();
+    </script>
+{{- else -}}
+    {{/* Otherwise set to default scheme only if no preference is set by user */}}
+    <script>
+        (function() {
+            const colorSchemeKey = 'StackColorScheme';
+            if(!localStorage.getItem(colorSchemeKey)){
+                localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}");
+            }
+        })();
+    </script>
+{{- 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 === 'auto' && supportDarkMode) {
+            /**
+             * Enable dark mode if:
+             * 1. If dark mode is set already (in local storage)
+             * 2. Auto mode & prefere color scheme is dark
+             */
+            document.body.dataset.scheme = 'dark';
+        } else {
+            document.body.dataset.scheme = 'light';
+        }
+    })();
+</script>

layouts/partials/sidebar/left.html

@@ -45,5 +45,13 @@
             </a>
         </li>
         {{ end }}
+
+        {{ if (default false .Site.Params.colorScheme.toggle) }}
+            <li id="dark-mode-toggle">
+                {{ partial "helper/icon" "toggle-left" }}
+                {{ partial "helper/icon" "toggle-right" }}
+                <span>{{ T "darkMode" }}</span>
+            </li>
+        {{ end }}
     </ol>
 </aside>