show the power-off switch in manager

global-dark.css

@@ -23,6 +23,7 @@
     --accent-1: hsl(180, 100%, 95%);
     --accent-3: hsl(180, 30%, 18%);
     --input-bg: var(--c95);
+    --red1: hsl(0, 85%, 65%);
   }
   textarea,
   input[type=url],

global.css

@@ -33,6 +33,7 @@
   --accent-1: hsl(180, 100%, 15%);
   --accent-2: hsl(180, 50%, 40%);
   --accent-3: hsl(180, 40%, 69%);
+  --red1: hsl(0, 70%, 45%);
 }
 body {
   font: normal 12px var(--family);
@@ -307,6 +308,17 @@ summary {
   position: absolute;
 }
 
+.all-disabled #disableAll {
+  border-color: var(--red1);
+}
+.all-disabled #disableAll-label {
+  font-weight: bold;
+  color: var(--red1);
+}
+.all-disabled #disableAll-label .svg-icon {
+  fill: currentColor;
+}
+
 :focus,
 .CodeMirror-focused,
 /* Allowing click outline on text/search inputs and textareas */

js/dom.js

@@ -412,6 +412,10 @@ function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
 
 const dom = {};
 
+prefs.subscribe('disableAll', (_, val) => {
+  $.rootCL.toggle('all-disabled', val);
+}, {runNow: true});
+
 prefs.ready.then(() => {
   waitForSelector('details[data-pref]', {
     recur(elems) {

manage.html

@@ -154,6 +154,11 @@
 <div id="header">
   <h1 id="manage-heading" i18n="manageHeading"></h1>
 
+  <label id="disableAll-label" i18n="disableAllStyles">
+    <input id="disableAll" type="checkbox">
+    <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+  </label>
+
   <div id="manage-settings">
     <div class="settings-column">
       <details id="filters" data-pref="manage.filters.expanded">

popup/popup.css

@@ -2,10 +2,6 @@
   --inner-padding: 18px; /* checkbox + gap */
   --outer-padding: 9px;
   --hotkey-margin: 16px;
-  --red1: hsl(0, 70%, 45%);
-}
-[data-ui-theme="dark"] {
-  --red1: hsl(0, 85%, 65%);
 }
 
 html, body {
@@ -49,16 +45,6 @@ body:not(.blocked) .if-blocked,
   width: fit-content;
   position: relative;
 }
-.all-disabled #disableAll {
-  border-color: var(--red1);
-}
-.all-disabled #disableAll-label {
-  font-weight: bold;
-  color: var(--red1);
-}
-.all-disabled #disableAll-label .svg-icon {
-  fill: currentColor;
-}
 .all-disabled #installed:hover + #main-actions #disableAll-label {
   animation: .5s blink-red infinite;
 }

popup/popup.js

@@ -83,11 +83,6 @@ function toggleSideBorders(_key, state) {
 /** @param {chrome.webNavigation.GetAllFrameResultDetails[]} frames */
 async function initPopup(frames) {
   prefs.subscribe('popupWidth', setPopupWidth, {runNow: true});
-
-  // action buttons
-  $('#disableAll').onchange = function () {
-    $.rootCL.toggle('all-disabled', this.checked);
-  };
   setupLivePrefs();
 
   const elFind = $('#find-styles-btn');