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 @@
 <!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"
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f0122e77..018efad0 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -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" }}
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 }}
-  <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 }}
