v3.36.1 patch:

- make theme selection as 3 values switch (see #96 & #103)

Author: aureliendavid

manifest.json

@@ -2,7 +2,7 @@
 
   "manifest_version": 2,
   "name": "RSSPreview",
-  "version": "3.36",
+  "version": "3.36.1",
   "author": "Aurelien David",
   "homepage_url": "https://github.com/aureliendavid/rsspreview",
 

rsspreview.js

@@ -11,10 +11,9 @@
 
   window.hasRun = true;
 
-  // Detect system theme for the initial default
-  const systemDarkDefault = window.matchMedia(
-    "(prefers-color-scheme: dark)",
-  ).matches;
+  function isDarkTheme(theme) {
+    return ( (theme==="dark") || ( (theme==="auto") && (window.matchMedia('(prefers-color-scheme: dark)').matches) ) );
+  }
 
   // defaults
   var options = {
@@ -25,7 +24,7 @@
     preventPreview: false,
     fullPreview: false,
     doAuthor: false,
-    darkTheme: systemDarkDefault,
+    theme: "auto",
     enableCss: false,
     bypassCSP: false,
     customCss: null,
@@ -238,7 +237,7 @@
     let doc = document.implementation.createHTMLDocument('');
     doc.body.id = "rsspreviewBody";
 
-    if (options.darkTheme) {
+    if (isDarkTheme(options.theme)) {
       doc.documentElement.classList.add("dark");
     }
 

settings/options.html

@@ -11,7 +11,7 @@
         padding: 10px;
       }
 
-      .setting input[type="checkbox"] {
+      .setting input[type="checkbox"], .setting input[type="radio"] {
           vertical-align: middle;
           position: relative;
           top: -1px; /* Sometimes needed for manual optical correction */
@@ -68,7 +68,21 @@
     <label class="setting browser-style"><input type="checkbox" id="localeDate" class="validate" > Use locale format for dates (will use ISO format otherwise)</label>
     <hr />
 
-    <label class="setting browser-style"><input type="checkbox" id="darkTheme" class="validate"> Enable dark theme</label>
+    <div>
+      <span class="setting browser-style"> Theme preference: </span>
+
+      <label class="setting browser-style">
+        &nbsp;<input type="radio" name="theme" value="light" class="validate" checked>light
+      </label>
+
+      <label class="setting browser-style">
+        &nbsp;<input type="radio" name="theme" value="dark" class="validate">dark
+      </label>
+
+      <label class="setting browser-style">
+        &nbsp;<input type="radio" name="theme" value="auto" class="validate">auto (system)
+      </label>
+    </div>
     <hr />
 
     <label class="setting browser-style"><input type="checkbox" id="enableCss" class="validate" > Enable custom CSS:</label><br />

settings/options.js

@@ -19,7 +19,7 @@ function saveOptions(e) {
     orangeIcon: document.querySelector("#orangeIcon").checked,
     enableCss: document.querySelector("#enableCss").checked,
     bypassCSP: document.querySelector("#bypassCSP").checked,
-    darkTheme: document.querySelector("#darkTheme").checked,
+    theme: document.querySelector('input[name="theme"]:checked').value,
     customCss: document.querySelector("#customCss").value,
     newTab: document.querySelector("#newTab").checked,
     localeDate: document.querySelector("#localeDate").checked
@@ -51,7 +51,7 @@ function restoreOptions() {
     document.querySelector("#fullPreview").checked = result.fullPreview;
     document.querySelector("#doAuthor").checked = result.doAuthor;
     document.querySelector("#orangeIcon").checked = result.orangeIcon;
-    document.querySelector("#darkTheme").checked = result.darkTheme;
+    document.querySelector(`input[name="theme"][value="${result.theme}"]`).checked = true;
     document.querySelector("#enableCss").checked = result.enableCss;
     document.querySelector("#bypassCSP").checked = result.bypassCSP;
     document.querySelector("#customCss").value = result.customCss;
@@ -74,7 +74,7 @@ function restoreOptions() {
     fullPreview: false,
     doAuthor: false,
     orangeIcon: android,
-    darkTheme: systemDarkDefault,
+    theme: "auto",
     enableCss: false,
     bypassCSP: false,
     customCss: null,