diff --git a/README.md b/README.md
index 3365563..f7053df 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,7 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https://
 - [Disable toc for a blog post](#disable-toc-for-a-blog-post)
 - [Localization](#localization)
 - [Custom CSS and JS](#custom-css-and-js)
+- [Default to Dark Theme](#default-to-dark-theme)
 - [Getting help](#getting-help)
 - [Credits](#credits)
 
@@ -105,6 +106,22 @@ You can provide an optional list of custom JS files, which must be placed inside
 
 See the [example site config file](https://github.com/zwbetz-gh/cupper-hugo-theme/blob/master/exampleSite/config.yaml) for sample usage.
 
+## Default to Dark Theme
+
+In the site config file set the param `defaultDarkTheme` to true.
+
+E.g. for `config.yaml`
+```yaml
+params:
+  defaultDarkTheme: true
+```
+
+Note that the default of light or dark theme only applies to the first visit to a site using this theme. Once the site is visited the choice of dark or light theme is stored in 'local storage' in the browser.
+
+To reset to a 'first visit' scenario (e.g. for testing), one needs to either browse in private mode (aka Incognito/InPrivate/etc) or delete 'local storage' for this site. The easiest way to do that, but which affects other sites as well, is to use the 'Clear History' feature of the browser.
+
+Check your browser's help or documentation for details.
+
 ## Getting help
 
 If you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/zwbetz-gh/cupper-hugo-theme/tree/master/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132).
diff --git a/assets/js/template-dom-scripts.js b/assets/js/template-dom-scripts.js
index 368ddfb..75b2af5 100644
--- a/assets/js/template-dom-scripts.js
+++ b/assets/js/template-dom-scripts.js
@@ -104,23 +104,31 @@
   }
 
   function applyDarkTheme() {
-    var rules = [
-      '.intro-and-nav, .main-and-footer { filter: invert(100%); }',
-      '* { background-color: inherit; }',
-      'img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%); }'
-    ];
-    rules.forEach(function(rule) {
-      document.styleSheets[0].insertRule(rule);
-    })
+    var darkTheme = document.getElementById('darkTheme');
+    darkTheme.disabled = false;
   }
 
   function clearDarkTheme() {
-    for (let i = 0; i < document.styleSheets[0].cssRules.length; i++) {
-      document.styleSheets[0].deleteRule(i);
+    var darkTheme = document.getElementById('darkTheme');
+    darkTheme.disabled = true;
+  }
+
+  function defaultDarkTheme() {
+{{- with .Site.Params.defaultDarkTheme }}
+    if (localStorage.getItem('darkTheme') == null) {
+      persistTheme('true');
+      checkbox.checked = true;
     }
+{{- else }}
+    if (localStorage.getItem('darkTheme') == null) {
+      persistTheme('false');
+      checkbox.checked = false;
+    }
+{{ end }}
   }
 
   checkbox.addEventListener('change', function () {
+    defaultDarkTheme();
     if (this.checked) {
       applyDarkTheme();
       persistTheme('true');
@@ -134,6 +142,9 @@
     if (localStorage.getItem('darkTheme') === 'true') {
       applyDarkTheme();
       checkbox.checked = true;
+    } else {
+      clearDarkTheme();
+      checkbox.checked = false;
     }
   }
 
@@ -143,6 +154,7 @@
   }
 
   window.addEventListener('DOMContentLoaded', function () {
+    defaultDarkTheme();
     showTheme();
     showContent();
   });
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 6949c55..3a218e0 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -27,6 +27,7 @@ params:
   hideHeaderLinks: false
   search: true
   showThemeSwitcher: true
+  defaultDarkTheme: false
   moveFooterToHeader: false
   logoAlt: "An alternative text description of the logo"
   customCss:
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4832d1b..0fdc8fe 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -31,6 +31,24 @@
     }
   </style>
 
+  <style id="darkTheme">
+    .intro-and-nav,
+    .main-and-footer {
+      filter: invert(100%);
+    }
+
+    * {
+      background-color: inherit
+    }
+
+    img:not([src*=".svg"]),
+    .colors,
+    iframe,
+    .demo-container {
+      filter: invert(100%);
+    }
+  </style>
+
   <link rel="stylesheet" href="{{ "css/prism.css" | relURL }}" media="none" onload="this.media='all';">
 
   {{ $templateStyles := resources.Get "css/template-styles.css" }}