✨ Add dark mode toggle

CHANGELOG.md

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

README.md

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

assets/icons/moon.svg

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

assets/icons/sun.svg

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

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

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

i18n/en.yaml

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

i18n/fr.yaml

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

i18n/zh.yaml

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

layouts/_default/baseof.html

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

layouts/partials/footer.html

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

layouts/partials/head.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 }}

tailwind.config.js

@@ -10,7 +10,7 @@ module.exports = {
       "./themes/congo/content/**/*.{html,md}",
     ],
   },
-  darkMode: "media",
+  darkMode: "class",
   theme: {
     colors: {
       transparent: "transparent",