From bf90da9e29bbe3d291ce6e7266b4eb519a00fbc5 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 16 Feb 2022 21:03:48 +0300
Subject: [PATCH] simplify iconsetAuto

---
 background/icon-manager.js | 13 ++++---------
 js/prefs.js                |  3 +--
 options.html               |  8 ++++----
 options/options.css        | 15 +++++++++++++--
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/background/icon-manager.js b/background/icon-manager.js
index 99234dfd..97490d43 100644
--- a/background/icon-manager.js
+++ b/background/icon-manager.js
@@ -45,7 +45,7 @@ const iconMan = (() => {
   });
   colorScheme.onChange(val => {
     isDark = val;
-    if (prefs.get('iconsetAuto')) {
+    if (prefs.get('iconset') === -1) {
       debounce(refreshAllIcons);
     }
   });
@@ -60,7 +60,6 @@ const iconMan = (() => {
     ], () => debounce(refreshAllIconsBadgeText), {runNow: true});
     prefs.subscribe([
       'disableAll',
-      'iconsetAuto',
       'iconset',
     ], () => debounce(refreshAllIcons), {runNow: true});
   });
@@ -101,14 +100,10 @@ const iconMan = (() => {
   }
 
   function getIconName(hasStyles = false) {
-    const iconset = (
-      prefs.get('iconsetAuto') && isDark != null
-        ? !isDark
-        : prefs.get('iconset')
-    ) ? 'light/'
-      : '';
+    const i = prefs.get('iconset');
+    const prefix = i === 0 || i === -1 && isDark ? '' : 'light/';
     const postfix = prefs.get('disableAll') ? 'x' : !hasStyles ? 'w' : '';
-    return `${iconset}$SIZE$${postfix}`;
+    return `${prefix}$SIZE$${postfix}`;
   }
 
   function refreshIcon(tabId, force = false) {
diff --git a/js/prefs.js b/js/prefs.js
index 9c593715..e456896f 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -120,10 +120,9 @@
 
     'sync.enabled': 'none',
 
-    'iconsetAuto': true,
     'iconset': 0,                   // 0 = dark-themed icon
                                     // 1 = light-themed icon
-
+                                    // -1 = match dark/light mode
     'badgeDisabled': '#8B0000',     // badge background color when disabled
     'badgeNormal': '#006666',       // badge background color
 
diff --git a/options.html b/options.html
index 647a691c..57520ed5 100644
--- a/options.html
+++ b/options.html
@@ -98,10 +98,10 @@
           </label>
           <label>
             <span i18n-text="optionsIconAuto"></span>
-            <span class="onoffswitch">
-              <input type="checkbox" id="iconsetAuto" class="slider">
-              <span></span>
-            </span>
+            <div class="iconset">
+              <input type="radio" name="iconset" value="-1" data-value-type="number">
+              <div class="iconset-auto"></div>
+            </div>
           </label>
         </div>
       </div>
diff --git a/options/options.css b/options/options.css
index 90770058..1d7c4571 100644
--- a/options/options.css
+++ b/options/options.css
@@ -196,15 +196,26 @@ input[type="color"] {
 
 .iconset {
   display: flex;
+  align-items: center;
 }
-
 .iconset input {
   display: block;
 }
-
 .iconset input[type="radio"] {
   margin: 2px 4px 0 0;
 }
+.iconset-auto {
+  width: 48px;
+}
+.iconset-auto::after {
+  content: '?';
+  background: var(--accent-1);
+  color: var(--bg);
+  padding: 1px 4px;
+  border-radius: 50%;
+  line-height: 1;
+  font-weight: bold;
+}
 
 #actions {
   justify-content: space-around;