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
2020-12-23 19:03:40 +01:00
parent df74fe5f19
commit 358e63e799
17 changed files with 209 additions and 20 deletions
@@ -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>