diff options
| author | OXDBXKXO <spam.yeeter+github@pm.me> | 2021-12-26 12:36:47 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-12-26 12:36:47 +0300 |
| commit | 4c10fbdc197202bd907ebeba8a25bceeac3f54ee (patch) | |
| tree | de086ae33803af24237cc2abfc7d4ffd34850aa6 | |
| parent | 99acf147092a853126c178ffdfaa481ae738d180 (diff) | |
colorScheme options support (#65)
* feat: colorScheme options from hugo-stack-theme
* fix: change default toggle mode to true
* chore: update example config
Co-authored-by: WingLim <643089849@qq.com>
| -rw-r--r-- | exampleSite/config.example.toml | 8 | ||||
| -rw-r--r-- | exampleSite/config.yaml | 7 | ||||
| -rw-r--r-- | layouts/partials/head/colorScheme.html | 23 | ||||
| -rw-r--r-- | layouts/partials/header.html | 12 |
4 files changed, 44 insertions, 6 deletions
diff --git a/exampleSite/config.example.toml b/exampleSite/config.example.toml index 21fdd9c..6c8ec79 100644 --- a/exampleSite/config.example.toml +++ b/exampleSite/config.example.toml @@ -21,6 +21,14 @@ disqusShortname = "https-hugo-tania-netlify-app" siteDesc = "Hugo is Absurdly Fast!" author = "Hugo Tania" + [params.colorScheme] + # Enable toggle colorScheme + # Default to true + toggle = true + # Default colorScheme + # Default to auto + default = auto + # Limit how many categories filter show above search input. # Default to 5 maxCategoryToShow = 10 diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 5416f43..b2c420a 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -21,6 +21,13 @@ params: siteDesc: "Hugo is Absurdly Fast!" author: "Hugo Tania" + colorScheme: + # Enable toggle colorScheme + # Default to true + toggle: true + # Default colorScheme + # Default to auto + default: auto # Limit how many categories filter show above search input. # Default to 5 diff --git a/layouts/partials/head/colorScheme.html b/layouts/partials/head/colorScheme.html index b47652b..756eb74 100644 --- a/layouts/partials/head/colorScheme.html +++ b/layouts/partials/head/colorScheme.html @@ -1,3 +1,24 @@ +{{- $defaultColorScheme := default "auto" .Site.Params.colorScheme.default -}} +{{- if not (default true .Site.Params.colorScheme.toggle) -}} + {{/* If toggle is disabled, force default scheme */}} + <script> + (function() { + const colorSchemeKey = 'ThemeColorScheme'; + localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}"); + })(); + </script> +{{- else -}} + {{/* Otherwise set to default scheme only if no preference is set by user */}} + <script> + (function() { + const colorSchemeKey = 'ThemeColorScheme'; + if(!localStorage.getItem(colorSchemeKey)){ + localStorage.setItem(colorSchemeKey, "{{ $defaultColorScheme }}"); + } + })(); + </script> +{{- end -}} + <script> (function() { const colorSchemeKey = 'ThemeColorScheme'; @@ -15,4 +36,4 @@ document.documentElement.dataset.userColorScheme = 'light'; } })(); -</script>
\ No newline at end of file +</script> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 0ff97e2..29deca4 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -18,11 +18,13 @@ {{ range .Site.Menus.header }} <a href="{{ .URL | relURL }}"{{ if eq .URL $.RelPermalink }} aria-current="page"{{ end }}>{{ .Pre }}{{ .Name }}{{ .Post }}</a> {{ end }} - <button id="dark-mode-button"> - {{ (resources.Get "icons/light.svg").Content | safeHTML }} - {{ (resources.Get "icons/dark.svg").Content | safeHTML }} - </button> + {{ if (default true .Site.Params.colorScheme.toggle) }} + <button id="dark-mode-button"> + {{ (resources.Get "icons/light.svg").Content | safeHTML }} + {{ (resources.Get "icons/dark.svg").Content | safeHTML }} + </button> + {{ end }} </div> </div> </div> -</nav>
\ No newline at end of file +</nav> |