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

feat(darkmode); add colorScheme config

Browse Source
This commit is contained in:
Jimmy Cai 2020-12-23 18:16:32 +01:00
parent e49d77ec91
commit b2683420d9
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
5 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/ts/darkmode.ts
View File

@ -8,8 +8,12 @@ class StackDarkMode {
constructor(toggleEl: HTMLElement) { constructor(toggleEl: HTMLElement) {
this.bindMatchMedia(); this.bindMatchMedia();
this.currentScheme = this.getSavedScheme(); this.currentScheme = this.getSavedScheme();
this.setBodyClass();
this.bindClick(toggleEl); if (toggleEl)
this.bindClick(toggleEl);
if (document.body.style.transition == '')
document.body.style.setProperty('transition', 'background-color .3s ease');
} }
private saveScheme() { private saveScheme() {
@ -49,9 +53,6 @@ class StackDarkMode {
} }
private setBodyClass() { private setBodyClass() {
if (document.body.style.transition == '')
document.body.style.setProperty('transition', 'background-color .3s ease');
if (this.isDark()) { if (this.isDark()) {
document.body.dataset.scheme = 'dark'; document.body.dataset.scheme = 'dark';
} }

4
exampleSite/config.yaml
View File

@ -79,6 +79,10 @@ params:
local: false local: false
src: src:
colorScheme:
toggle: true
default: auto
menu: menu:
main: main:
- identifier: home - identifier: home

2
layouts/_default/baseof.html
View File

@ -5,7 +5,7 @@
{{- block "head" . -}}{{ end }} {{- block "head" . -}}{{ end }}
</head> </head>
<body class="{{ block `body-class` . }}{{ end }}"> <body class="{{ block `body-class` . }}{{ end }}">
{{- partial "head/darkmode" . -}} {{- partial "head/colorScheme" . -}}
<div class="container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}"> <div class="container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
{{ partial "sidebar/left.html" . }} {{ partial "sidebar/left.html" . }}

12
layouts/partials/head/darkmode.html → layouts/partials/head/colorScheme.html
View File

@ -1,3 +1,15 @@
{{- with .Site.Params.colorScheme -}}
{{/* If toggle is disabled, set color to default */}}
{{- $defaultColorScheme := default "default" .default -}}
{{- if not .toggle -}}
<script>
(function() {
const colorSchemeKey = 'StackColorScheme';
localStorage.setItem(colorSchemeKey, {{ $defaultColorScheme }});
})();
</script>
{{- end -}}
{{- end -}}
<script> <script>
(function() { (function() {
const colorSchemeKey = 'StackColorScheme'; const colorSchemeKey = 'StackColorScheme';

12
layouts/partials/sidebar/left.html
View File

@ -46,10 +46,12 @@
</li> </li>
{{ end }} {{ end }}
<li id="dark-mode-toggle"> {{ if (default false .Site.Params.colorScheme.toggle) }}
{{ partial "helper/icon" "toggle-left" }} <li id="dark-mode-toggle">
{{ partial "helper/icon" "toggle-right" }} {{ partial "helper/icon" "toggle-left" }}
<span>Dark Mode</span> {{ partial "helper/icon" "toggle-right" }}
</li> <span>Dark Mode</span>
</li>
{{ end }}
</ol> </ol>
</aside> </aside>