[matrix] Set theme to system preferred by default

docs/_static/custom.js

@@ -31,12 +31,27 @@ function changeDocumentation(element) {
 }
 
 function updateSetting(element) {
-  localStorage.setItem(element.name, element.checked);
+  let value;
+  switch (element.type) {
+    case "checkbox":
+      localStorage.setItem(element.name, element.checked);
+      value = element.checked;
+      break;
+    case "radio":
+      localStorage.setItem(element.name, `"${element.value}"`);
+      value = element.value;
+      break;
+  }
   if (element.name in settings) {
-    settings[element.name](element.checked);
+    settings[element.name]["setter"](value);
   }
 }
 
+function LoadSetting(name, defaultValue) {
+  let value = JSON.parse(localStorage.getItem(name));
+  return value === null ? defaultValue : value;
+}
+
 function getRootAttributeToggle(attributeName, valueName) {
   function toggleRootAttribute(set) {
     if (set) {
@@ -48,13 +63,35 @@ function getRootAttributeToggle(attributeName, valueName) {
   return toggleRootAttribute;
 }
 
+function setTheme(value) {
+  if (value === "automatic") {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute(`data-theme`, "dark");
+    } else{
+      document.documentElement.setAttribute(`data-theme`, "light");
+    }
+  }
+  else {
+    document.documentElement.setAttribute(`data-theme`, value);
+  }
+}
+
 const settings = {
-  useSerifFont: getRootAttributeToggle('font', 'serif'),
-  useDarkTheme: getRootAttributeToggle('theme', 'dark')
+  useSerifFont: {
+    settingType: "checkbox",
+    defaultValue: false,
+    setter: getRootAttributeToggle('font', 'serif')
+  },
+  setTheme: {
+    settingType: "radio",
+    defaultValue: "automatic",
+    setter: setTheme
+  }
 };
 
-Object.entries(settings).forEach(([name, setter]) => {
-  let value = JSON.parse(localStorage.getItem(name));
+Object.entries(settings).forEach(([name, setting]) => {
+  let { defaultValue, setter, ..._ } = setting;
+  let value = LoadSetting(name, defaultValue);
   try {
     setter(value);
   } catch (error) {
@@ -109,11 +146,15 @@ document.addEventListener('DOMContentLoaded', () => {
     parent.insertBefore(table, element.nextSibling);
   });
 
-  Object.keys(settings).forEach(name => {
-    let value = JSON.parse(localStorage.getItem(name));
-    let element = document.querySelector(`input[name=${name}]`);
-    if (element) {
-      element.checked = value === true;
+  Object.entries(settings).forEach(([name, setting]) => {
+    let { settingType, defaultValue, ..._ } = setting;
+    let value = LoadSetting(name, defaultValue);
+    if (settingType === "checkbox") {
+      let element = document.querySelector(`input[name=${name}]`);
+      element.checked = value;
+    } else {
+      let element = document.querySelector(`input[name=${name}][value=${value}]`);
+      element.checked = true;
     }
   });
 });
@@ -144,7 +185,7 @@ window.addEventListener('scroll', () => {
     if (activeLink) {
       let headingChildren = activeLink.parentElement.parentElement;
       let heading = headingChildren.previousElementSibling.previousElementSibling;
-      
+
       if (heading && headingChildren.style.display === "none") {
         activeLink = heading;
       }

docs/_static/style.css

@@ -289,6 +289,11 @@ header > nav > a:hover {
   margin-right: 0.5em;
 }
 
+.setting h3 {
+  display: inline-block;
+  margin-left: 2em;
+}
+
 .sub-header > .settings:hover {
   color: var(--settings-hover);
 }

docs/_templates/layout.html

@@ -141,6 +141,7 @@
       </span>
       <h1>Settings</h1>
 
+      <h2>Font</h2>
       <div class='setting'>
         <h3>Use a serif font:
           <label class="toggle"
@@ -151,12 +152,25 @@
         </h3>
       </div>
 
+      <h2>Theme</h2>
       <div class='setting'>
-        <h3>Enable dark theme:
-          <label class="toggle" title="Enable the dark theme.">
-            <input type="checkbox" name="useDarkTheme" onclick="updateSetting(this);">
-            <span class="toggle-slider"></span>
+        <h3>
+          <label class="toggle" title="Set your theme">
+            <input type="radio" name="setTheme" onclick="updateSetting(this);" value="automatic" checked>
+          </label>
+          Automatic
+        </h3>
+        <h3>
+          <label class="toggle" title="Use a serif font? Your system font will be used, falling back to serif.">
+            <input type="radio" name="setTheme" onclick="updateSetting(this);" value="light">
+          </label>
+          Light
+        </h3>
+        <h3>
+          <label class="toggle" title="Use a serif font? Your system font will be used, falling back to serif.">
+            <input type="radio" name="setTheme" onclick="updateSetting(this);" value="dark">
           </label>
+          Dark
         </h3>
       </div>