From 81824a1a00d014654fce44b1ffdc854c8307caab Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Fri, 29 Oct 2021 12:07:21 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Add=20config=20parameters=20for?= =?UTF-8?q?=20dark=20appearance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/_default/params.toml | 2 ++ exampleSite/content/docs/configuration.md | 2 ++ layouts/_default/baseof.html | 5 ++- layouts/partials/footer.html | 43 ++++++++++++----------- layouts/partials/head.html | 39 +++++++++++--------- 5 files changed, 54 insertions(+), 37 deletions(-) diff --git a/config/_default/params.toml b/config/_default/params.toml index e246751d..875dc423 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -6,6 +6,8 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" +# darkMode = "auto" +# darkToggle = false # logo = "img/logo.jpg" # description = "My awesome website" # mainSections = ["section1", "section2"] diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index 402092ad..4303d4e2 100644 --- a/exampleSite/content/docs/configuration.md +++ b/exampleSite/content/docs/configuration.md @@ -56,6 +56,8 @@ Many of the article defaults here can be overridden on a per article basis by sp |Name|Type|Default|Description| | --- | --- | --- | --- | |`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| +|`darkMode`|boolean or string|`"auto"`|The preferred theme appearance for dark mode. Set to `true` to force dark appearance or `false` to force light appearance. Using `"auto"` will defer to the user's operating system preference.| +|`darkToggle`|boolean|`false`|When `darkMode` is set to `"auto"`, this parameter determines whether or not to show the appearance toggle in the site footer. The browser's local storage is used to persist the user's preference.| |`logo`|string|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.| |`description`|string|_Not set_|The description of the website for metadata purposes.| |`mainSections`|array of strings|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.| diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 340e219f..a5b0efa9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,8 @@ - + {{- partial "head.html" . -}} {{ end }} -
- - -
+ {{/* Dark mode toggle */}} + {{ if and (.Site.Params.darkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }} +
+ + +
+ {{ end }} {{/* Extend footer - eg. for extra scripts, etc. */}} {{ if templates.Exists "partials/extend-footer.html" }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 3ab0bb23..3e057eca 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -62,24 +62,31 @@ integrity="{{ $customStyles.Data.Integrity }}" /> {{ end }} - + loadPreferredAppearance(); + window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance); + + {{ else }} + + {{ end }} {{/* Icons */}} {{ if templates.Exists "partials/favicons.html" }} {{ partialCached "favicons.html" .Site }}