marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🚧 Add config parameters for dark appearance

pull/26/head
James Panther 2021-10-29 12:07:21 +11:00
parent 9d42b7be2b
commit 81824a1a00
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
5 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/_default/params.toml
View File

@ -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"]

2
exampleSite/content/docs/configuration.md
View File

@ -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.|

5
layouts/_default/baseof.html
View File

@ -1,5 +1,8 @@
<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
<html
lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}"
{{ if .Site.Params.darkMode | default false }}class="dark"{{ end }}
>
{{- partial "head.html" . -}}
<body
class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"

43
layouts/partials/footer.html
View File

@ -39,26 +39,29 @@
</p>
{{ end }}
</div>
<div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
<button
id="dark-toggle"
onclick="setPreferredScheme('dark');"
oncontextmenu="setPreferredScheme('default'); return false;"
class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
title="Switch to dark mode"
>
{{ partial "icon.html" "moon" }}
</button>
<button
id="light-toggle"
onclick="setPreferredScheme('light');"
oncontextmenu="setPreferredScheme('default'); return false;"
class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
title="Switch to light mode"
>
{{ partial "icon.html" "sun" }}
</button>
</div>
{{/* Dark mode toggle */}}
{{ if and (.Site.Params.darkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }}
<div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
<button
id="dark-toggle"
onclick="setPreferredAppearance('dark');"
oncontextmenu="setPreferredAppearance('default'); return false;"
class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
title="Switch to dark appearance"
>
{{ partial "icon.html" "moon" }}
</button>
<button
id="light-toggle"
onclick="setPreferredAppearance('light');"
oncontextmenu="setPreferredAppearance('default'); return false;"
class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
title="Switch to light appearance"
>
{{ partial "icon.html" "sun" }}
</button>
</div>
{{ end }}
</div>
{{/* Extend footer - eg. for extra scripts, etc. */}}
{{ if templates.Exists "partials/extend-footer.html" }}

39
layouts/partials/head.html
View File

@ -62,24 +62,31 @@
integrity="{{ $customStyles.Data.Integrity }}"
/>
{{ end }}
<script>
function loadPreferredScheme() {
if (localStorage.preferredScheme === 'dark' || (!('preferredScheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
{{ if eq (.Site.Params.darkMode | default "auto") "auto" }}
<script>
function loadPreferredAppearance() {
if (localStorage.preferredAppearance === "dark" || (!("preferredAppearance" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
}
function setPreferredScheme(scheme) {
if (scheme == "default") {
localStorage.removeItem("preferredScheme");
} else {
localStorage.preferredScheme = scheme;
function setPreferredAppearance(scheme) {
if (scheme == "default") {
localStorage.removeItem("preferredAppearance");
} else {
localStorage.preferredAppearance = scheme;
}
loadPreferredAppearance();
}
loadPreferredScheme();
}
loadPreferredScheme();
</script>
loadPreferredAppearance();
window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance);
</script>
{{ else }}
<script>
localStorage.removeItem("preferredAppearance");
</script>
{{ end }}
{{/* Icons */}}
{{ if templates.Exists "partials/favicons.html" }}
{{ partialCached "favicons.html" .Site }}