Smart Light-Dark mode detection (#40)

* Smart Light-Dark mode detection

Use case is where user has already chosen a Dark Mode preference (ie macOS/iOS) and site start in white mode killing your eyes. This will make the site smart enough to detect that preference and switch the Dark Mode on.

Nothing critical changed.

Could be improved to let site author chose if they want to turn this feature on/off (based on style preferences).

* Fixed typos

Fixing typo in comment at #256 (basded) and fixing function invoking at #265 (toggl())

Co-authored-by: Pablo Armentano <pablo@simpat.io>

worker.js

@@ -252,7 +252,18 @@ class BodyRewriter {
         el.className = 'toggle-mode';
         el.addEventListener('click', toggle);
         nav.appendChild(el);
-        onLight();
+
+        // enable smart dark mode based on user-preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            onDark();
+        } else {
+            onLight();
+        }
+
+        // try to detect if user-preference change
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+            toggle();
+        });
       }
       const observer = new MutationObserver(function() {
         if (redirected) return;