mirror of https://github.com/jpanther/congo.git
✨ Add dark mode toggle
James Panther
commit
bda38cb8f9
|
|
@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
|
||||
### Added
|
||||
|
||||
- Dark mode toggle with new theme parameters for managing light/dark appearance
|
||||
- French translation ([#18](https://github.com/jpanther/congo/pull/18))
|
||||
- Grouping by year can now be specificed in front matter on list pages
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io
|
|||
- Built with Tailwind CSS JIT for minified stylesheets without any excess code
|
||||
- Fully responsive layout
|
||||
- Multiple colour schemes (or fully customise your own)
|
||||
- Dark mode (auto-switching based upon browser)
|
||||
- Dark mode (forced on/off or auto-switching with user toggle)
|
||||
- Highly customisable configuration
|
||||
- Multiple homepage layouts
|
||||
- Flexible with any content types, taxonomies and menus
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
|
||||
|
After Width: | Height: | Size: 531 B |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>
|
||||
|
After Width: | Height: | Size: 813 B |
|
|
@ -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"]
|
||||
|
|
|
|||
|
|
@ -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.|
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ error:
|
|||
404_description: "It seems that the page you've requested does not exist."
|
||||
|
||||
footer:
|
||||
dark_appearance: "Switch to dark appearance"
|
||||
light_appearance: "Switch to light appearance"
|
||||
powered_by: "Powered by {{ .Hugo }} & {{ .Congo }}"
|
||||
|
||||
list:
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ error:
|
|||
404_description: "Il semble que la page que vous cherchiez n'existe pas."
|
||||
|
||||
footer:
|
||||
# dark_appearance: "Switch to dark appearance"
|
||||
# light_appearance: "Switch to light appearance"
|
||||
powered_by: "Propulsé par {{ .Hugo }} & {{ .Congo }}"
|
||||
|
||||
list:
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ error:
|
|||
404_description: "您请求的页面似乎不存在。"
|
||||
|
||||
footer:
|
||||
# dark_appearance: "Switch to dark appearance"
|
||||
# light_appearance: "Switch to light appearance"
|
||||
powered_by: "由 {{ .Hugo }} & {{ .Congo }} 强力驱动"
|
||||
|
||||
list:
|
||||
|
|
@ -25,6 +27,7 @@ sharing:
|
|||
email: "通过电子邮件发送"
|
||||
facebook: "分享到 Facebook"
|
||||
linkedin: "分享到 LinkedIn"
|
||||
# pinterest: "Pin on Pinterest"
|
||||
reddit: "提交到 Reddit"
|
||||
twitter: "分享到 Twitter"
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
</ul>
|
||||
</nav>
|
||||
{{ end }}
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
{{/* Copyright */}}
|
||||
<p class="text-sm text-neutral-400 dark:text-neutral-500">
|
||||
{{- with .Site.Copyright }}
|
||||
|
|
@ -36,6 +38,31 @@
|
|||
{{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</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="{{ i18n "footer.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="{{ i18n "footer.light_appearance" }}"
|
||||
>
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{/* Extend footer - eg. for extra scripts, etc. */}}
|
||||
{{ if templates.Exists "partials/extend-footer.html" }}
|
||||
{{ partialCached "extend-footer.html" . }}
|
||||
|
|
|
|||
|
|
@ -62,6 +62,31 @@
|
|||
integrity="{{ $customStyles.Data.Integrity }}"
|
||||
/>
|
||||
{{ end }}
|
||||
{{ 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 setPreferredAppearance(scheme) {
|
||||
if (scheme == "default") {
|
||||
localStorage.removeItem("preferredAppearance");
|
||||
} else {
|
||||
localStorage.preferredAppearance = scheme;
|
||||
}
|
||||
loadPreferredAppearance();
|
||||
}
|
||||
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 }}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ module.exports = {
|
|||
"./themes/congo/content/**/*.{html,md}",
|
||||
],
|
||||
},
|
||||
darkMode: "media",
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
|
|
|
|||
Loading…
Reference in New Issue