From b2683420d9942a85f3123fab7e9432e43339f0d9 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Wed, 23 Dec 2020 18:16:32 +0100 Subject: [PATCH] feat(darkmode); add colorScheme config --- assets/ts/darkmode.ts | 11 ++++++----- exampleSite/config.yaml | 4 ++++ layouts/_default/baseof.html | 2 +- .../head/{darkmode.html => colorScheme.html} | 12 ++++++++++++ layouts/partials/sidebar/left.html | 12 +++++++----- 5 files changed, 30 insertions(+), 11 deletions(-) rename layouts/partials/head/{darkmode.html => colorScheme.html} (66%) diff --git a/assets/ts/darkmode.ts b/assets/ts/darkmode.ts index 3d23ade..54ee34a 100644 --- a/assets/ts/darkmode.ts +++ b/assets/ts/darkmode.ts @@ -8,8 +8,12 @@ class StackDarkMode { constructor(toggleEl: HTMLElement) { this.bindMatchMedia(); 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() { @@ -49,9 +53,6 @@ class StackDarkMode { } private setBodyClass() { - if (document.body.style.transition == '') - document.body.style.setProperty('transition', 'background-color .3s ease'); - if (this.isDark()) { document.body.dataset.scheme = 'dark'; } diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 20dcda6..0d29d3a 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -79,6 +79,10 @@ params: local: false src: + colorScheme: + toggle: true + default: auto + menu: main: - identifier: home diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5abc1df..8688b91 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,7 +5,7 @@ {{- block "head" . -}}{{ end }} - {{- partial "head/darkmode" . -}} + {{- partial "head/colorScheme" . -}}
{{ partial "sidebar/left.html" . }} diff --git a/layouts/partials/head/darkmode.html b/layouts/partials/head/colorScheme.html similarity index 66% rename from layouts/partials/head/darkmode.html rename to layouts/partials/head/colorScheme.html index 823079c..40d765f 100644 --- a/layouts/partials/head/darkmode.html +++ b/layouts/partials/head/colorScheme.html @@ -1,3 +1,15 @@ +{{- with .Site.Params.colorScheme -}} + {{/* If toggle is disabled, set color to default */}} + {{- $defaultColorScheme := default "default" .default -}} + {{- if not .toggle -}} + + {{- end -}} +{{- end -}}