Add: prefer-scheme select in installation page

_locales/en/messages.json

@@ -513,6 +513,18 @@
     "message": "Update style",
     "description": "Label for update button"
   },
+  "installPreferSchemeLabel": {
+    "message": "The style should be applied:"
+  },
+  "installPreferSchemeNone": {
+    "message": "Always"
+  },
+  "installPreferSchemeDark": {
+    "message": "In Dark Mode"
+  },
+  "installPreferSchemeLight": {
+    "message": "In Light Mode"
+  },
   "installUpdate": {
     "message": "Install update",
     "description": "Label for the button to install an update for a single style"

install-usercss.html

@@ -72,6 +72,14 @@
             <span class="available-message" i18n-text="liveReloadLabel"></span>
             <span class="unavailable-message" i18n-text="liveReloadUnavailable"></span>
           </label>
+          <label class="set-prefer-scheme">
+            <span 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>
         </div>
         <p class="meta-description"></p>
         <div>

install-usercss/install-usercss.css

@@ -261,7 +261,6 @@ h2.installed.active {
 .set-update-url {
   flex-wrap: wrap;
 }
-
 .set-update-url p {
   word-break: break-all;
   opacity: .5;
@@ -269,6 +268,10 @@ h2.installed.active {
   margin: .25em 0 .25em;
 }
 
+label.set-prefer-scheme:not(.unavailable) {
+  padding-left: 0;
+}
+
 .external {
   text-align: center;
 }
@@ -317,6 +320,7 @@ li {
   user-select: auto;
 }
 
+/* FIXME: why do we want to give all labels a padding? */
 label:not(.unavailable) {
   padding-left: 16px;
   position: relative;

install-usercss/install-usercss.js

@@ -116,6 +116,11 @@
       versionTest > 0 ? 'update' :
       'reinstall');
     $('.set-update-url').title = dup && dup.updateUrl && t('installUpdateFrom', dup.updateUrl) || '';
+
+    $('.set-prefer-scheme select').value =
+      style.preferScheme === 'dark' ? 'dark' :
+      style.preferScheme === 'light' ? 'light' : 'none';
+
     $('.meta-name').textContent = data.name;
     $('.meta-version').textContent = data.version;
     $('.meta-description').textContent = data.description;
@@ -329,6 +334,12 @@
     $('.set-update-url p').textContent = updateUrl.href.length < 300 ? updateUrl.href :
       updateUrl.href.slice(0, 300) + '...';
 
+    const preferScheme = $('.set-prefer-scheme select');
+    preferScheme.onchange = () => {
+      style.preferScheme = preferScheme.value;
+    };
+    preferScheme.onchange();
+
     if (!port) {
       return;
     }