simplify iconsetAuto

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) {

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
 

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>

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;