Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 12:03:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(darkmode): simplify code

Browse Source
This commit is contained in:
Jimmy Cai 2020-12-23 18:34:06 +01:00
parent e77e433cd1
commit 5f9efe49bd
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
1 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
layouts/partials/head/colorScheme.html
View File

@ -1,27 +1,35 @@
{{- with .Site.Params.colorScheme -}} {{- $defaultColorScheme := default "auto" .Site.Params.colorScheme.default -}}
{{/* If toggle is disabled, set color to default */}} {{- if not (default false .Site.Params.colorScheme.toggle) -}}
{{- $defaultColorScheme := default "default" .default -}} {{/* If toggle is disabled, force default scheme */}}
{{- if not .toggle -}} <script>
<script> (function() {
(function() { const colorSchemeKey = 'StackColorScheme';
const colorSchemeKey = 'StackColorScheme'; localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}");
localStorage.setItem(colorSchemeKey, {{ $defaultColorScheme }}); })();
})(); </script>
</script> {{- else -}}
{{- end -}} {{/* 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 -}} {{- end -}}
<script> <script>
(function() { (function() {
const colorSchemeKey = 'StackColorScheme'; const colorSchemeKey = 'StackColorScheme';
const colorSchemeItem = localStorage.getItem(colorSchemeKey); const colorSchemeItem = localStorage.getItem(colorSchemeKey);
const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true; const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
if (colorSchemeItem == 'dark' || !colorSchemeItem && supportDarkMode || colorSchemeItem === 'auto' && supportDarkMode) { if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {
/** /**
* Enable dark mode if: * Enable dark mode if:
* 1. If dark mode is set already (in local storage) * 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 * 2. Auto mode & prefere color scheme is dark
* 3. Auto mode & prefere color scheme is dark
*/ */
document.body.dataset.scheme = 'dark'; document.body.dataset.scheme = 'dark';
} else { } else {