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
@@ -5,7 +5,8 @@
        {{- block "head" . -}}{{ end }}
    </head>
    <body class="{{ block `body-class` . }}{{ end }}">
-        <div class="container flex on-phone--column align-items--flex-start {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
+        {{- partial "head/colorScheme" . -}}
+        <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">
                {{- block "main" . }}{{- end }}
@@ -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)">
@@ -1,4 +1,3 @@
 {{ partialCached "footer/components/script.html" . }}
 {{ partialCached "footer/components/custom-font.html" . }}
-{{ partialCached "footer/components/highlight.html" . }}
 {{ partial "footer/custom.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>
@@ -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>