Add default dark theme for modern browsers (#56)

* Add default dark theme for modern browsers

This version is based on the DOM specification used by Firefox, Chrome,
and the new Edge. Since it is standards compliant it should work on
modern browsers, but dark mode won't be available on IE11 and maybe the
old Edge.
I have avoided the screen flash on loading the page, and toggling from
dark to light (or vice versa) both when dark
is default and when light is default.

Signed-off-by: Daniel F. Dickinson <20735818+danielfdickinson@users.noreply.github.com>

* Edit/improve as suggested by maintainer

* Improves documentation (README.md)
* Improves Go template logic for setting the default theme type
* Improves coding (and markdown) style
* Adds the new param to exampleSite/config.yaml for documentation

Signed-off-by: Daniel F. Dickinson <20735818+danielfdickinson@users.noreply.github.com>

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

assets/js/template-dom-scripts.js

@@ -104,23 +104,31 @@
   }
 
   function applyDarkTheme() {
-    var rules = [
+    var darkTheme = document.getElementById('darkTheme');
-      '.intro-and-nav, .main-and-footer { filter: invert(100%); }',
+    darkTheme.disabled = false;
-      '* { background-color: inherit; }',
-      'img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%); }'
-    ];
-    rules.forEach(function(rule) {
-      document.styleSheets[0].insertRule(rule);
-    })
   }
 
   function clearDarkTheme() {
-    for (let i = 0; i < document.styleSheets[0].cssRules.length; i++) {
+    var darkTheme = document.getElementById('darkTheme');
-      document.styleSheets[0].deleteRule(i);
+    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();
   });

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:

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