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>

1 files changed, 22 insertions, 10 deletions

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();
   });