diff options
author | Jimmy Cai <jimmehcai@gmail.com> | 2020-12-23 21:03:40 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-23 21:03:40 +0300 |
commit | 358e63e799d35e4338d6f1461ec61127f24675b2 (patch) | |
tree | 479e85324105979b979fb773670473bc5ebc64f7 /layouts/partials/head/colorScheme.html | |
parent | df74fe5f19ff0e59a4ca24bb7b33a78b15eff5f1 (diff) |
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
Diffstat (limited to 'layouts/partials/head/colorScheme.html')
-rw-r--r-- | layouts/partials/head/colorScheme.html | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/layouts/partials/head/colorScheme.html b/layouts/partials/head/colorScheme.html new file mode 100644 index 0000000..560d6c0 --- /dev/null +++ b/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>
\ No newline at end of file |