From 87c4c8dfbda7e2ebb172f045f3fbc064fb59cfc8 Mon Sep 17 00:00:00 2001
From: "Daniel F. Dickinson"
 <20735818+danielfdickinson@users.noreply.github.com>
Date: Mon, 16 Aug 2021 22:35:09 -0400
Subject: 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                         | 17 +++++++++++++++++
 assets/js/template-dom-scripts.js | 32 ++++++++++++++++++++++----------
 exampleSite/config.yaml           |  1 +
 layouts/partials/head.html        | 18 ++++++++++++++++++
 4 files changed, 58 insertions(+), 10 deletions(-)

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" }}
-- 
cgit v1.2.3