Change: use radio instead of select for dark/light mode

edit.html

@@ -453,15 +453,22 @@
             <span class="form-label" i18n-text="styleUpdateUrlLabel"></span>
             <input type="text">
           </label>
-          <label class="form-group style-prefer-scheme">
+          <div class="form-group style-prefer-scheme radio-group">
             <!-- FIXME: should we use a different message from install page? -->
             <span class="form-label" i18n-text="installPreferSchemeLabel"></span>
-            <select>
-              <option value="none" i18n-text="installPreferSchemeNone"></option>
-              <option value="dark" i18n-text="installPreferSchemeDark"></option>
-              <option value="light" i18n-text="installPreferSchemeLight"></option>
-            </select>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="none">
+              <span class="radio-label" i18n-text="installPreferSchemeNone"></span>
             </label>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="dark">
+              <span class="radio-label" i18n-text="installPreferSchemeDark"></span>
+            </label>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="light">
+              <span class="radio-label" i18n-text="installPreferSchemeLight"></span>
+            </label>
+          </div>
           <div class="form-group style-include">
             <div class="form-label" i18n-text="styleIncludeLabel"></div>
             <div class="rule-table"></div>

edit/settings.css

@@ -28,4 +28,19 @@
   grid-gap: .3em;
   margin: .3em 0;
 }
-
+.radio-group .form-label {
+  display: block;
+}
+.radio-item {
+  display: flex;
+  margin: 0.3em 0 .3em;
+  padding: 0;
+  align-items: center;
+  width: max-content;
+}
+.radio-item input {
+  margin: 0 0.6em 0 0;
+}
+[disabled] .radio-label {
+  opacity: 0.4;
+}

edit/settings.js

@@ -8,7 +8,7 @@ function StyleSettings(editor) {
   const inputs = [
     createInput('.style-update-url input', () => style.updateUrl || '',
       e => API.styles.config(style.id, 'updateUrl', e.target.value)),
-    createInput('.style-prefer-scheme select', () => style.preferScheme || 'none',
+    createRadio('.style-prefer-scheme input', () => style.preferScheme || 'none',
       e => API.styles.config(style.id, 'preferScheme', e.target.value)),
     createInput('.style-priority input', () => style.priority || 0,
       e => API.styles.config(style.id, 'priority', e.target.valueAsNumber)),
@@ -28,6 +28,26 @@ function StyleSettings(editor) {
     inputs.forEach(i => i.update());
   }
 
+  function createRadio(selector, getter, setter) {
+    const els = document.querySelectorAll(selector);
+    for (const el of els) {
+      el.addEventListener('change', e => {
+        if (el.checked) {
+          setter(e);
+        }
+      });
+    }
+    return {
+      update() {
+        for (const el of els) {
+          if (el.value === getter()) {
+            el.checked = true;
+          }
+        }
+      },
+    };
+  }
+
   function createInput(selector, getter, setter) {
     const el = document.querySelector(selector);
     el.addEventListener('change', setter);