Hugo-theme-stack/layouts/partials/head/colorScheme.html
Jimmy Cai 8a597a5c9c
Merge branch 'canary' into master (#711)
* refactor(i18n): simplify the structure of the translation file

* chore: prepare repository for v4.0.0-alpha

* chore: modify go.mod to v4

* refactor: migrate theme configuration to TOML

* fix: exampleSite not using correct theme

* feat: add favicon from assets folder

* refactor: drop linear grandient background feature

remove node-vibrant from dependencies

* feat: use Hugo's code block render hook to implement code copy button

Now it can have i18n support

* refactor: delete color.ts

* refactor: delete Emoji support post from example site

* refactor: drop support for `hidden` field in front matter

* feat: upgrade to PhotoSwipe v5

* chore: bump the required hugo version to 0.100.0

* refactor: remove PhotoSwipe from external.yaml

* fix: extra margin in search result

* fix: incorrect markdown heading level in example site

* refactor: remove some usages of `default` in template

No longer needed thanks to Hugo's configuration merge

* fix: one line codeblock style in firefox

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/564

* feat: add style to new codeblock

* feat: i18n support for codeblock copy text

* fix(menu): jitter when closing menu

It's caused by flexbox gap property, which can't animate

* fix(search): long text overflows under the Search icon

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/515
2022-10-29 17:02:24 +02:00

40 lines
1.4 KiB
HTML

{{- $defaultColorScheme := .Site.Params.colorScheme.default -}}
{{- if not .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.documentElement.dataset.scheme = 'dark';
} else {
document.documentElement.dataset.scheme = 'light';
}
})();
</script>