From e917213e81d40b00cefd7f493fcbabb450ccb10d Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Mon, 13 Apr 2020 09:19:58 -0400
Subject: [PATCH] Sixth pass to re-design the dashboard

Related commits:
- https://github.com/gorhill/uBlock/commit/0662767dd62731320473e9c96a17077145a00610
- https://github.com/gorhill/uBlock/commit/99b2a0a761eec860132bc08680710c3c785f90b6
- https://github.com/gorhill/uBlock/commit/a8e3118feafd5c2d7c3e3d03727beff17f9928b4
- https://github.com/gorhill/uBlock/commit/453f5450b6e6550618bf97b5b0541f5f46c35d8e
- https://github.com/gorhill/uBlock/commit/a45a21f337216d7d4aaddb5a454ed4842eca3806

This commit focuses on implementing the use of
CSS `var(...)` throughout so as to make it easy
to create themes -- a requirement for uBO to
support a dark theme.

There is still work to do regarding converting
uBO's CSS to completely support `var(...)` but
being able to start using theming will help
complete and fine tune CSS `var(...)` support.

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/401
---
 src/3p-filters.html          |   2 +-
 src/cloud-ui.html            |   7 +-
 src/css/3p-filters.css       |  10 +-
 src/css/cloud-ui.css         |  65 +++++------
 src/css/common.css           |  20 ++--
 src/css/dashboard-common.css |  10 +-
 src/css/dashboard.css        |   8 +-
 src/css/document-blocked.css |  23 ++--
 src/css/dyna-rules.css       |  38 ++++---
 src/css/popup-fenix.css      | 175 +++++++++++++----------------
 src/css/popup.css            | 207 ++++++++++++++++-------------------
 src/css/settings.css         |   2 +-
 src/css/shortcuts.css        |   6 -
 src/css/themes/default.css   |  89 +++++++++++++--
 src/js/3p-filters.js         |  24 ++--
 src/js/dyna-rules.js         |   2 +-
 src/js/popup-fenix.js        |  19 ++--
 src/js/popup.js              |  19 ++--
 src/popup-fenix.html         |   2 +-
 src/popup.html               |   2 +-
 src/shortcuts.html           |   3 +-
 21 files changed, 381 insertions(+), 352 deletions(-)

diff --git a/src/3p-filters.html b/src/3p-filters.html
index 997e614fa..2e9958fdf 100644
--- a/src/3p-filters.html
+++ b/src/3p-filters.html
@@ -41,7 +41,7 @@
 
 <div id="templates" style="display: none;">
     <div class="groupEntry">
-        <div class="geDetails"><span class="geName"></span> <span class="geCount dim"></span></div>
+        <div class="geDetails"><span class="geName"></span> <span class="geCount"></span></div>
         <div class="listEntries"></div>
     </div>
     <div class="li listEntry">
diff --git a/src/cloud-ui.html b/src/cloud-ui.html
index e8f743eef..df672dc98 100644
--- a/src/cloud-ui.html
+++ b/src/cloud-ui.html
@@ -9,13 +9,10 @@
 <span id="cloudInfo" data-i18n="cloudNoData"></span>
 <button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
 <button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
-<p id="cloudError"></p>
+<span id="cloudError"></span>
 <span id="cloudCog" class="fa-icon">cog</span>
 <div id="cloudOptions">
-    <div>
-        <p><label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value="">
-        <p><button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
-    </div>
+    <label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="custom vflex" type="button" data-i18n="genericSubmit"></button>
 </div>
 </body>
 </html>
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index 2d4db462c..477e08873 100644
--- a/src/css/3p-filters.css
+++ b/src/css/3p-filters.css
@@ -46,6 +46,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
     pointer-events: none;
     }
 .groupEntry .geCount {
+    color: var(--fg-0-60);
     font-size: 90%;
     pointer-events: none;
     }
@@ -125,9 +126,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
 .listEntry.checked .counts {
     display: inline;
 }
-.dim {
-    color: #666;
-    }
 .listEntry .status {
     cursor: default;
     display: none;
@@ -165,6 +163,9 @@ body.updating .listEntry.checked.obsolete .updating {
     animation: spin 1s steps(8) infinite;
     display: inline-flex;
     }
+.listEntry.toImport {
+    margin: 0.5em 0;
+    }
 .listEntry.toImport textarea {
     border: 1px solid #ccc;
     box-sizing: border-box;
@@ -190,7 +191,8 @@ body.updating .listEntry.checked.obsolete .updating {
         -webkit-margin-start: 0;
         }
     .li.listEntry {
-        background-color: var(--bg-dashboard-nav);
+        background-color: var(--bg-1);
+        overflow-x: auto;
         }
     .li.listEntry label > span {
         flex-grow: 1;
diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css
index ae6a6ae36..b2ebbe0a5 100644
--- a/src/css/cloud-ui.css
+++ b/src/css/cloud-ui.css
@@ -2,6 +2,7 @@
     background: url("../img/cloud.png") hsl(216, 100%, 93%);
     border-radius: 3px;
     margin: 0.5em 0;
+    overflow: auto;
     padding: 0.5em;
     position: relative;
     }
@@ -22,7 +23,7 @@
     visibility: hidden;
     }
 #cloudWidget button.error {
-    color: red;
+    color: var(--fg-icon-info-lvl-4);
     }
 #cloudPullAndMerge {
     margin-left: 0.25em;
@@ -34,61 +35,51 @@
     top: 0;
     }
 #cloudInfo {
-    color: gray;
-    display: inline-block;
+    color: var(--fg-0-60);
+    flex-shrink: 0;
     font-size: 90%;
     margin: 0 1em;
     overflow: hidden;
     padding: 0;
-    white-space: pre;
+    white-space: pre-line;
     }
 #cloudError {
-    color: red;
+    color: var(--fg-icon-info-lvl-4);
+    flex-grow: 1;
+    flex-shrink: 2;
     font-size: x-small;
-    margin: 0.5em 0 0 0;
+    margin: 0 1em;
     }
-#cloudError:empty {
-    display: none;
-    }
-#cloudWidget > #cloudCog {
+#cloudWidget #cloudCog {
+    color: var(--fg-0-50);
     cursor: pointer;
-    display: inline-block;
+    fill: var(--fg-0-50);
     font-size: 110%;
-    margin: 0;
-    opacity: 0.5;
-    padding: 4px;
-    position: absolute;
-    top: 0;
+    padding: 0.4em;
     }
-body[dir="ltr"] #cloudWidget > #cloudCog {
-    right: 0;
+#cloudWidget #cloudCog:hover {
+    color: inherit;
+    fill: inherit;
     }
-body[dir="rtl"] #cloudWidget > #cloudCog {
-    left: 0;
-    }
-#cloudWidget > #cloudCog:hover {
-    opacity: 1;
-    }
-#cloudWidget > #cloudOptions {
-    align-items: center;
-    -webkit-align-items: center;
-    background-color: rgba(0, 0, 0, 0.75);
+#cloudWidget #cloudOptions {
+    background-color: var(--bg-0);
+    border: 1px solid var(--bg-1-border);
     bottom: 0;
     display: none;
-    justify-content: center;
-    -webkit-justify-content: center;
     left: 0;
-    position: fixed;
+    margin: 0.4em;
+    padding: 0.4em;
+    position: absolute;
     right: 0;
+    text-align: center;
     top: 0;
-    z-index: 2000;
+    z-index: 10;
     }
-#cloudWidget > #cloudOptions.show {
-    display: flex;
-    display: -webkit-flex;
+#cloudWidget #cloudOptions.show {
+    display: block;
     }
-#cloudWidget > #cloudOptions > div {
-    background-color: white;
+#cloudWidget #cloudOptions > div {
+    background-color: var(--bg-0);
     border-radius: 3px;
     padding: 1em;
     text-align: center;
diff --git a/src/css/common.css b/src/css/common.css
index 0db14c56d..a0c8df8f1 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -25,7 +25,7 @@ body {
     padding: 0;
     }
 code {
-    background-color: #eee;
+    background-color: var(--bg-code);
     padding: 0 0.25em;
     }
 textarea {
@@ -43,14 +43,19 @@ button.custom {
     -moz-appearance: none;
     -webkit-appearance: none;
     }
+button.custom.vflex {
+    height: 100%;
+    padding-bottom: 0;
+    padding-top: 0;
+    }
 button.custom:hover {
-    background-color: #d4d4d4;
+    background-color: var(--bg-button-hover);
     }
 button.custom.important {
-    background-color: #ffddaa;
+    background-color: var(--bg-button-important);
     }
 button.custom.important:hover {
-    background-color: #ffcc80;
+    background-color: var(--bg-button-important-hover);
     }
 button.custom.disabled,
 button.custom[disabled],
@@ -106,7 +111,7 @@ input[type="checkbox"] {
 @media (max-width: 640px) {
     button.custom.iconifiable > .fa,
     button.custom.iconifiable > .fa-icon {
-        font-size: 120%;
+        font-size: 1.2rem;
         padding: 0;
         }
     button.custom.iconifiable > [data-i18n] {
@@ -131,9 +136,8 @@ input[type="checkbox"] {
 .disabled > .ubo-icon,
 .ubo-icon[disabled],
 [disabled] > .ubo-icon {
-    color: #000;
-    fill: #000;
-    opacity: 0.25;
+    color: var(--fg-button-disabled);
+    fill: var(--fg-button-disabled);
     stroke: var(--fg-button-disabled);
     pointer-events: none;
     }
diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css
index 49e7a9c47..a20b7a39e 100644
--- a/src/css/dashboard-common.css
+++ b/src/css/dashboard-common.css
@@ -45,15 +45,7 @@ input[type="number"] {
     width: 5em;
     }
 input[type="checkbox"][disabled] + * {
-    color: #888;
-    }
-.para {
-    width: 40em;
-    }
-.warn {
-    margin: 0;
-    padding: 5px;
-    background-color: #FEDAE0;
+    color: var(--fg-0-50);
     }
 @media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
     .body > p,
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 0ea973c34..c282a8677 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -9,9 +9,9 @@ html, body {
     width: 100%;
     }
 #dashboard-nav {
-    background-color: var(--bg-dashboard-nav);
+    background-color: var(--bg-1);
     border: 0;
-    border-bottom: 1px solid var(--dashboard-nav-border);
+    border-bottom: 1px solid var(--bg-1-border);
     display: flex;
     flex-wrap: wrap;
     overflow-x: hidden;
@@ -32,7 +32,7 @@ html, body {
     }
 .tabButton {
     border: 0;
-    border-bottom: 3px solid var(--bg-dashboard-nav);
+    border-bottom: 3px solid var(--bg-1);
     color: var(--fg-dashboard-nav-off);
     fill: var(--fg-dashboard-nav-off);
     cursor: pointer;
@@ -67,7 +67,7 @@ iframe {
     display: initial;
     }
 #unsavedWarning > div:first-of-type {
-    background-color: #ffffcc;
+    background-color: var(--bg-transient-notice);
     padding: 0.5em;
     }
 #unsavedWarning > div:last-of-type {
diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css
index c4937e076..dfd294172 100644
--- a/src/css/document-blocked.css
+++ b/src/css/document-blocked.css
@@ -52,18 +52,17 @@ select {
     padding: 2px;
     }
 .code {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--bg-code);
     font-family: monospace;
     line-height: 1;
     padding: 4px;
     word-break: break-all;
     }
 #warningSign {
-    opacity: 1;
     width: 100%;
     }
 #warningSign > a {
-    fill: #f2a500;
+    fill: var(--large-icon-info-lvl-2);
     font-size: 10em;
     padding: 0;
     }
@@ -81,8 +80,9 @@ select {
     background-color: transparent;
     top: 100%;
     box-sizing: border-box;
+    color: var(--fg-0-60);
     cursor: pointer;
-    opacity: 0.5;
+    fill: var(--fg-0-60);
     padding: 0.2em;
     position: absolute;
     transform: translate(0, -50%);
@@ -94,7 +94,8 @@ body[dir="rtl"] #theURL > p > span {
     left: 0;
     }
 #theURL > p:hover > span {
-    opacity: 1;
+    color: var(--fg-0);
+    fill: var(--fg-0);
     }
 #theURL > p > span:before {
     content: '\f010';
@@ -103,10 +104,10 @@ body[dir="rtl"] #theURL > p > span {
     content: '\f00e';
     }
 #parsed {
-    background-color: #f8f8f8;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: var(--bg-1);
+    border: 1px solid var(--bg-code);
     border-top: none;
-    color: gray;
+    color: var(--fg-0-80);
     font-size: small;
     overflow-x: hidden;
     padding: 4px;
@@ -135,12 +136,6 @@ body[dir="rtl"] #theURL > p > span {
     text-align: left;
     }
 
-.filterList a {
-    opacity: 0.8;
-    }
-.filterList a:hover {
-    opacity: 1;
-    }
 .filterList:first-child .filterListSeparator {
     display: none;
     }
diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css
index 9d5882431..9d832149a 100644
--- a/src/css/dyna-rules.css
+++ b/src/css/dyna-rules.css
@@ -37,25 +37,27 @@ body {
     text-align: center;
     }
 #ruleFilter .fa {
-    color: #888;
+    color: var(--fg-0-60);
     }
 #revertButton,
 #commitButton,
-#diff.editing #exportButton,
-#diff.editing #importButton {
-    background-color: #eee;
-    color: #aaa;
+body.editing #diff #exportButton,
+body.editing #diff #importButton {
+    background-color: var(--bg-button-disabled);
+    color: var(--fg-button-disabled);
+    fill: var(--fg-button-disabled);
     pointer-events: none;
     }
-#diff.dirty:not(.editing) #revertButton,
-#diff.dirty:not(.editing) #commitButton {
-    background-color: #e6e6e6;
-    color: #20123a;
+body:not(.editing) #diff.dirty #revertButton,
+body:not(.editing) #diff.dirty #commitButton {
+    background-color: var(--bg-button);
+    color: var(--fg-button);
+    fill: var(--fg-button);
     pointer-events: auto;
     }
-#diff.dirty:not(.editing) #revertButton:hover,
-#diff.dirty:not(.editing) #commitButton:hover {
-    background-color: #d4d4d4;
+body:not(.editing) #diff.dirty #revertButton:hover,
+body:not(.editing) #diff.dirty #commitButton:hover {
+    background-color: var(--bg-button-hover);
     }
 
 .codeMirrorContainer {
@@ -65,15 +67,15 @@ body {
     box-sizing: border-box;
     height: 100%;
     }
-#diff.editing .CodeMirror-merge-copy,
-#diff.editing .CodeMirror-merge-copy-reverse {
+body.editing .CodeMirror-merge-copy,
+body.editing .CodeMirror-merge-copy-reverse {
     display: none;
     }
-#diff.editing .CodeMirror-merge-left .CodeMirror {
-    color: #888;
+body.editing .CodeMirror-merge-left .CodeMirror {
+    color: var(--fg-0-60);
     }
-#diff.editing .CodeMirror-merge-editor .CodeMirror {
-    background-color: #ffe;
+body.editing .CodeMirror-merge-editor .CodeMirror {
+    background-color: var(--bg-transient-notice);
     }
 body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
     right: unset;
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index a89531709..47a50146b 100644
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@@ -1,8 +1,4 @@
  /* External CSS values override */
-body {
-    color: #20123a;
-    fill: #20123a;
-    }
 .fa-icon {
     padding: 0 0.1em;
     }
@@ -13,10 +9,6 @@ body {
 
 /* Internal CSS values */
 body {
-    background-color: white;
-    border: 0;
-    margin: 0;
-    padding: 0;
     white-space: nowrap;
     }
 
@@ -47,7 +39,7 @@ hr {
     }
 
 #sticky {
-    background-color: white;
+    background-color: var(--bg-0);
     position: sticky;
     top: 0;
     z-index: 100;
@@ -64,17 +56,19 @@ hr {
     margin: 0.5em 0;
     }
 #switch .fa-icon {
-    fill: #0060df;
+    color: var(--fg-popup-power);
+    fill: var(--fg-popup-power);
     cursor: pointer;
     font-size: 700%;
     margin: 0;
     padding: 0;
     }
 #switch .fa-icon:hover {
-    opacity: 0.9;
+    filter: var(--fg-popup-power-hover);
     }
 body.off #switch .fa-icon {
-    fill: #ccc;
+    color: var(--fg-0-20);
+    fill: var(--fg-0-20);
     }
 .rulesetTools {
     background-color: transparent;
@@ -87,7 +81,7 @@ body.off #switch .fa-icon {
     padding: 0.5em;
     }
 .rulesetTools [id] {
-    background-color: #ffe;
+    background-color: var(--bg-transient-notice);
     border: 1px solid #ddc;
     border-radius: 4px;
     cursor: pointer;
@@ -151,6 +145,9 @@ body.needSave #revertRules {
 .tool.enabled {
     visibility: visible;
     }
+.tool [data-i18n] {
+    display: var(--fg-popup-icon-caption-display);
+    }
 
 .statValue {
     margin: 0;
@@ -162,7 +159,7 @@ body.needSave #revertRules {
 #extraTools .fa-icon > .nope {
     left: 50%;
     position: absolute;
-    stroke: red;
+    stroke: var(--fg-popup-icon-x);
     stroke-width: 2;
     transform: translateX(-50%);
     visibility: hidden;
@@ -177,12 +174,12 @@ body.needSave #revertRules {
     }
 
 #tooltip {
-    background-color: #ffffee;
+    background-color: var(--bg-tooltip);
     border: 1px solid gray;
     border-radius: 3px;
     box-shadow: 1px 1px 3px gray;
     box-sizing: border-box;
-    color: black;
+    color: var(--fg-tooltip);
     cursor: pointer;
     direction: ltr;
     font: 12px sans-serif;
@@ -242,11 +239,10 @@ body[dir="rtl"] #tooltip {
     display: none;
     }
 #firewallContainer > div > span {
-    background-color: #e0e0e6;
+    background-color: var(--bg-popup-cell);
     border: none;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    color: #000;
     display: inline-flex;
     padding: 0.4em 0;
     position: relative;
@@ -266,7 +262,7 @@ body[dir="rtl"] #tooltip {
     word-break: break-word;
     }
 #firewallContainer > div.isCname > span:first-of-type {
-    color: mediumblue;
+    color: var(--fg-popup-fwcell-cname);
     }
 #firewallContainer > div > span:first-of-type > sub {
     display: inline-block;
@@ -287,7 +283,7 @@ body[dir="rtl"] #tooltip {
     }
 #firewallContainer > div > span:nth-of-type(3),
 #firewallContainer > div > span:nth-of-type(4) {
-    color: #444;
+    color: var(--fg-0-70);
     display: none;
     font-family: monospace;
     text-align: center;
@@ -296,7 +292,7 @@ body[dir="rtl"] #tooltip {
     font-weight: bold;
     }
 #firewallContainer > div:first-of-type > span:first-of-type::before {
-    color: #aaa;
+    color: var(--fg-0-50);
     content: '+';
     padding-right: 0.25em;
     }
@@ -314,33 +310,41 @@ body[dir="rtl"] #tooltip {
     justify-content: space-between;
     }
 #firewallContainer > div > span[data-acount]::before,
-#firewallContainer > div > span[data-bcount]::after {
-    align-items: center;
+#firewallContainer > div > span[data-bcount]::after,
+#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before,
+#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::after {
     content: ' ';
-    display: inline-flex;
     }
-#firewallContainer > div > span[data-acount]::before {
+#firewallContainer > div > span[data-acount]::before,
+#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before {
     padding-left: 0.1em;
     }
-#firewallContainer > div > span[data-acount="1"]::before {
+#firewallContainer > div > span[data-acount="1"]::before,
+#firewallContainer > div > span[data-acount="1"] > #actionSelector > #dynaCounts::before {
     content: '+';
     }
-#firewallContainer > div > span[data-acount="2"]::before {
+#firewallContainer > div > span[data-acount="2"]::before,
+#firewallContainer > div > span[data-acount="2"] > #actionSelector > #dynaCounts::before {
     content: '++';
     }
-#firewallContainer > div > span[data-acount="3"]::before {
+#firewallContainer > div > span[data-acount="3"]::before,
+#firewallContainer > div > span[data-acount="3"] > #actionSelector > #dynaCounts::before {
     content: '+++';
     }
-#firewallContainer > div > span[data-bcount]::after {
+#firewallContainer > div > span[data-bcount]::after,
+#firewallContainer > div > span[data-bcount] > #actionSelector > #dynaCounts::after {
     padding-right: 0.1em;
     }
-#firewallContainer > div > span[data-bcount="1"]::after {
+#firewallContainer > div > span[data-bcount="1"]::after,
+#firewallContainer > div > span[data-bcount="1"] > #actionSelector > #dynaCounts::after {
     content: '\2212';
     }
-#firewallContainer > div > span[data-bcount="2"]::after {
+#firewallContainer > div > span[data-bcount="2"]::after,
+#firewallContainer > div > span[data-bcount="2"] > #actionSelector > #dynaCounts::after {
     content: '\2212\2212';
     }
-#firewallContainer > div > span[data-bcount="3"]::after {
+#firewallContainer > div > span[data-bcount="3"]::after,
+#firewallContainer > div > span[data-bcount="3"] > #actionSelector > #dynaCounts::after {
     content: '\2212\2212\2212';
     }
 
@@ -370,78 +374,62 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
     box-sizing: border-box;
     content: '';
     display: inline-block;
+    filter: var(--bg-popup-cell-label-filter);
     height: 100%;
     left: 0;
-    opacity: 0.4;
     position: absolute;
     top: 0;
     width: 7px;
     }
 #firewallContainer > div.isRootContext > span:first-of-type::before {
-    background-color: rgb(127, 127, 127);
+    background-color: var(--fg-0-50);
     width: 14px !important;
     }
-/**
- Source for color-blind color scheme from https://github.com/WyohKnott:
- https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
- */
 #firewallContainer > div.allowed > span:first-of-type::before,
 #firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before {
-    background-color: rgb(0, 160, 0);
-    }
-#firewallContainer.colorBlind > div.allowed > span:first-of-type::before,
-#firewallContainer.colorBlind > div.isDomain.totalAllowed > span:first-of-type::before {
-    background-color: rgb(255, 194, 57);
+    background-color: var(--bg-popup-cell-allow-own);
     }
 #firewallContainer > div.blocked > span:first-of-type::before,
 #firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
-    background-color: rgb(192, 0, 0);
-    }
-#firewallContainer.colorBlind > div.blocked > span:first-of-type::before,
-#firewallContainer.colorBlind > div.isDomain.totalBlocked > span:first-of-type::before {
-    background-color: rgb(0, 19, 110);
+    background-color: var(--bg-popup-cell-block-own);
     }
 #firewallContainer > div.allowed.blocked > span:first-of-type::before,
 #firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
-    background-color: rgb(192, 160, 0);
+    background-color: var(--bg-popup-cell-label-mixed);
     }
 /* Rule cells */
-body.advancedUser #firewallContainer > div > span.allowRule {
-    background-color: rgba(0, 160, 0, 0.3);
+body.advancedUser #firewallContainer > div > span.allowRule,
+#actionSelector > #dynaAllow {
+    background-color: var(--bg-popup-cell-allow);
     }
-body.advancedUser #firewallContainer.colorBlind > div > span.allowRule {
-    background-color: rgba(255, 194, 57, 0.4);
+body.advancedUser #firewallContainer > div > span.blockRule,
+#actionSelector > #dynaBlock {
+    background-color: var(--bg-popup-cell-block);
     }
-body.advancedUser #firewallContainer > div > span.blockRule {
-    background-color: rgba(192, 0, 0, 0.3);
+body.advancedUser #firewallContainer > div > span.noopRule,
+#actionSelector > #dynaNoop {
+    background-color: var(--bg-popup-cell-noop);
     }
-body.advancedUser #firewallContainer.colorBlind > div > span.blockRule {
-    background-color: rgba(0, 19, 110, 0.4);
+body.advancedUser #firewallContainer > div > span.ownRule,
+#firewallContainer > div > span.ownRule {
+    color: var(--bg-0);
     }
-body.advancedUser #firewallContainer > div > span.noopRule {
-    background-color: rgba(96, 96, 96, 0.4);
+body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
+#actionSelector > #dynaAllow:hover {
+    background-color: var(--bg-popup-cell-allow-own);
     }
-body.advancedUser #firewallContainer > div > span.ownRule {
-    color: white;
+body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
+#actionSelector > #dynaBlock:hover {
+    background-color: var(--bg-popup-cell-block-own);
     }
-body.advancedUser #firewallContainer > div > span.allowRule.ownRule {
-    background-color: rgba(0, 160, 0, 1);
-    }
-body.advancedUser #firewallContainer.colorBlind > div > span.allowRule.ownRule {
-    background-color: rgba(255, 194, 57, 1);
-    }
-body.advancedUser #firewallContainer > div > span.blockRule.ownRule {
-    background-color: rgba(192, 0, 0, 1);
-    }
-body.advancedUser #firewallContainer.colorBlind > div > span.blockRule.ownRule {
-    background-color: rgba(0, 19, 110, 1);
-    }
-body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
-    background-color: rgba(96, 96, 96, 1);
+body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
+#actionSelector > #dynaNoop:hover {
+    background-color: var(--bg-popup-cell-noop-own);
     }
 
 #actionSelector {
-    bottom: 0;
+    box-sizing: border-box;
+    height: 100%;
     left: 0;
     position: absolute;
     top: 0;
@@ -451,32 +439,25 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
 #actionSelector > span {
     display: inline-block;
     height: 100%;
-    opacity: 0.2;
     }
-#actionSelector > span:first-of-type {
+#actionSelector > #dynaAllow {
     width: 33%;
     }
-#actionSelector > span:nth-of-type(2) {
+#actionSelector > #dynaNoop {
     width: 33.5%;
     }
-#actionSelector > span:nth-of-type(3) {
+#actionSelector > #dynaBlock {
     width: 33.5%;
     }
-#actionSelector > span:hover {
-    opacity: 0.75;
-    }
-#actionSelector > span:first-of-type {
-    background-color: rgb(0, 160, 0);
-    }
-#actionSelector.colorBlind > span:first-of-type {
-    background-color: rgb(255, 194, 57);
-    }
-#actionSelector > span:nth-of-type(2) {
-    background-color: rgb(108, 108, 108);
-    }
-#actionSelector > span:nth-of-type(3) {
-    background-color: rgb(192, 0, 0);
-    }
-#actionSelector.colorBlind > span:nth-of-type(3) {
-    background-color: rgb(0, 19, 110);
+#actionSelector > #dynaCounts {
+    align-items: center;
+    background-color: transparent;
+    display: inline-flex;
+    height: 100%;
+    justify-content: space-between;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
     }
diff --git a/src/css/popup.css b/src/css/popup.css
index 44aa5b167..a347a45b8 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -1,21 +1,16 @@
 body {
-    background-color: white;
-    border: 0;
     display: flex;
     flex-direction: column;
-    margin: 0;
-    opacity: 1;
     overflow: hidden;
-    padding: 0;
     white-space: nowrap;
     width: fit-content;
     width: -moz-fit-content;
     }
 
 h2 {
-    background-color: #eee;
+    background-color: var(--bg-popup-cell);
     border: 0;
-    color: #666;
+    color: var(--fg-0-70);
     cursor: pointer;
     font-size: 100%;
     font-weight: normal;
@@ -96,17 +91,19 @@ p {
     margin: 0.8em 0;
     }
 #switch .fa-icon {
-    fill: #0046ff;
+    color: var(--fg-popup-power);
+    fill: var(--fg-popup-power);
     cursor: pointer;
     font-size: 700%;
     margin: 0;
     padding: 0;
     }
 #switch .fa-icon:hover {
-    opacity: 0.9;
+    filter: var(--fg-popup-power-hover);
     }
 body.off #switch .fa-icon {
-    fill: #ccc;
+    color: var(--fg-0-20);
+    fill: var(--fg-0-20);
     }
 #basicTools {
     margin: 1.2em 0 0.5em 0;
@@ -115,9 +112,9 @@ body.off #switch .fa-icon {
     margin-left: 0;
     }
 .tool {
-    color: #aaa;
+    color: var(--fg-0-40);
     cursor: pointer;
-    fill: #aaa;
+    fill: var(--fg-0-40);
     margin-left: 0.8em;
     min-width: 1em;
     padding: 0 0.2em;
@@ -128,14 +125,14 @@ body.off #switch .fa-icon {
     visibility: visible;
     }
 .tool.enabled:hover {
-    color: #444;
-    fill: #444;
+    color: inherit;
+    fill: inherit;
     }
 #page-blocked {
     font-size: 1.25em;
     }
 .statName {
-    color: #888;
+    color: var(--fg-0-70);
     font-size: 85%;
     margin: 0.8em 0.2em 0.4em 0.2em;
     }
@@ -143,11 +140,9 @@ body.off #switch .fa-icon {
     margin: 0;
     }
 #extraTools {
-    background-color: #eee;
+    background-color: var(--bg-popup-cell);
     border: 0;
-    color: #888;
     display: flex;
-    fill: #888;
     justify-content: center;
     margin: 0.8em 0 0 0;
     padding: 0.2em 0;
@@ -156,7 +151,9 @@ body.responsive #extraTools {
     justify-content: space-evenly;
     }
 #extraTools > span {
+    color: var(--fg-0-40);
     cursor: pointer;
+    fill: var(--fg-0-40);
     font-size: 1.2em;
     margin: 0 0.8em 0 0;
     position: relative;
@@ -167,7 +164,7 @@ body.responsive #extraTools {
 #extraTools > span > .nope {
     left: 50%;
     position: absolute;
-    stroke: red;
+    stroke: var(--fg-popup-icon-x);
     stroke-width: 2;
     transform: translateX(-50%);
     visibility: hidden;
@@ -177,17 +174,17 @@ body.responsive #extraTools {
     visibility: visible;
     }
 #extraTools > span:hover {
-    color: #222;
-    fill: #222;
+    color: inherit;
+    fill: inherit;
     }
 
 #refresh {
-    background-color: #ffe;
+    background-color: var(--bg-transient-notice);
     border: 1px solid #ddc;
     border-radius: 4px;
     cursor: pointer;
     display: none;
-    fill: #888;
+    fill: var(--fg-0-50);
     font-size: 3em;
     justify-content: center;
     left: 4px;
@@ -200,16 +197,16 @@ body.dirty #refresh {
     display: flex;
     }
 body.dirty #refresh:hover {
-    fill: #000
+    fill: inherit
     }
 
 #tooltip {
-    background-color: #ffffee;
+    background-color: var(--bg-tooltip);
     border: 1px solid gray;
     border-radius: 3px;
     box-shadow: 1px 1px 3px gray;
     box-sizing: border-box;
-    color: black;
+    color: var(--fg-tooltip);
     cursor: pointer;
     direction: ltr;
     font: 12px sans-serif;
@@ -239,6 +236,7 @@ body[dir="rtl"] #tooltip {
 #firewallContainer {
     border: 0;
     font-size: 85%;
+    line-height: 1.4;
     margin: 0;
     padding: 0;
     text-align: right;
@@ -263,11 +261,9 @@ body[dir="rtl"] #tooltip {
     display: none;
     }
 #firewallContainer > div > span {
-    background-color: #e6e6e6;
+    background-color: var(--bg-popup-cell);
     border: none;
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    color: #000;
     display: inline-flex;
     flex-shrink: 0;
     padding: 0.33em 0;
@@ -287,7 +283,7 @@ body[dir="rtl"] #tooltip {
     word-break: break-word;
     }
 #firewallContainer > div.isCname > span:first-of-type {
-    color: mediumblue;
+    color: var(--fg-popup-fwcell-cname);
     }
 #firewallContainer > div > span:first-of-type > sub {
     display: inline-block;
@@ -307,7 +303,7 @@ body[dir="rtl"] #tooltip {
     }
 #firewallContainer > div > span:nth-of-type(3),
 #firewallContainer > div > span:nth-of-type(4) {
-    color: #444;
+    color: var(--fg-0-70);
     display: none;
     font-family: monospace;
     text-align: center;
@@ -316,7 +312,7 @@ body[dir="rtl"] #tooltip {
     font-weight: bold;
     }
 #firewallContainer > div:first-of-type > span:first-of-type::before {
-    color: #aaa;
+    color: var(--fg-0-50);
     content: '+';
     padding-right: 0.25em;
     }
@@ -334,31 +330,41 @@ body[dir="rtl"] #tooltip {
     justify-content: space-between;
     }
 #firewallContainer > div > span[data-acount]::before,
-#firewallContainer > div > span[data-bcount]::after {
+#firewallContainer > div > span[data-bcount]::after,
+#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before,
+#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::after {
     content: ' ';
     }
-#firewallContainer > div > span[data-acount]::before {
+#firewallContainer > div > span[data-acount]::before,
+#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before {
     padding-left: 0.1em;
     }
-#firewallContainer > div > span[data-acount="1"]::before {
+#firewallContainer > div > span[data-acount="1"]::before,
+#firewallContainer > div > span[data-acount="1"] > #actionSelector > #dynaCounts::before {
     content: '+';
     }
-#firewallContainer > div > span[data-acount="2"]::before {
+#firewallContainer > div > span[data-acount="2"]::before,
+#firewallContainer > div > span[data-acount="2"] > #actionSelector > #dynaCounts::before {
     content: '++';
     }
-#firewallContainer > div > span[data-acount="3"]::before {
+#firewallContainer > div > span[data-acount="3"]::before,
+#firewallContainer > div > span[data-acount="3"] > #actionSelector > #dynaCounts::before {
     content: '+++';
     }
-#firewallContainer > div > span[data-bcount]::after {
+#firewallContainer > div > span[data-bcount]::after,
+#firewallContainer > div > span[data-bcount] > #actionSelector > #dynaCounts::after {
     padding-right: 0.1em;
     }
-#firewallContainer > div > span[data-bcount="1"]::after {
+#firewallContainer > div > span[data-bcount="1"]::after,
+#firewallContainer > div > span[data-bcount="1"] > #actionSelector > #dynaCounts::after {
     content: '\2212';
     }
-#firewallContainer > div > span[data-bcount="2"]::after {
+#firewallContainer > div > span[data-bcount="2"]::after,
+#firewallContainer > div > span[data-bcount="2"] > #actionSelector > #dynaCounts::after {
     content: '\2212\2212';
     }
-#firewallContainer > div > span[data-bcount="3"]::after {
+#firewallContainer > div > span[data-bcount="3"]::after,
+#firewallContainer > div > span[data-bcount="3"] > #actionSelector > #dynaCounts::after {
     content: '\2212\2212\2212';
     }
 
@@ -388,124 +394,97 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
     box-sizing: border-box;
     content: '';
     display: inline-block;
+    filter: var(--bg-popup-cell-label-filter);
     height: 100%;
     left: 0;
-    opacity: 0.4;
     position: absolute;
     top: 0;
     width: 7px;
     }
 #firewallContainer > div.isRootContext > span:first-of-type::before {
-    background-color: rgb(127, 127, 127);
+    background-color: var(--fg-0-50);
     width: 14px !important;
     }
-/**
- Source for color-blind color scheme from https://github.com/WyohKnott:
- https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
- */
 #firewallContainer > div.allowed > span:first-of-type::before,
 #firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before {
-    background-color: rgb(0, 160, 0);
-    }
-#firewallContainer.colorBlind > div.allowed > span:first-of-type::before,
-#firewallContainer.colorBlind > div.isDomain.totalAllowed > span:first-of-type::before {
-    background-color: rgb(255, 194, 57);
+    background-color: var(--bg-popup-cell-allow-own);
     }
 #firewallContainer > div.blocked > span:first-of-type::before,
 #firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
-    background-color: rgb(192, 0, 0);
-    }
-#firewallContainer.colorBlind > div.blocked > span:first-of-type::before,
-#firewallContainer.colorBlind > div.isDomain.totalBlocked > span:first-of-type::before {
-    background-color: rgb(0, 19, 110);
+    background-color: var(--bg-popup-cell-block-own);
     }
 #firewallContainer > div.allowed.blocked > span:first-of-type::before,
 #firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
-    background-color: rgb(192, 160, 0);
+    background-color: var(--bg-popup-cell-label-mixed);
     }
 /* Rule cells */
-body.advancedUser #firewallContainer > div > span.allowRule {
-    background-color: rgba(0, 160, 0, 0.3);
+body.advancedUser #firewallContainer > div > span.allowRule,
+#actionSelector > #dynaAllow {
+    background-color: var(--bg-popup-cell-allow);
     }
-body.advancedUser #firewallContainer.colorBlind > div > span.allowRule {
-    background-color: rgba(255, 194, 57, 0.4);
+body.advancedUser #firewallContainer > div > span.blockRule,
+#actionSelector > #dynaBlock {
+    background-color: var(--bg-popup-cell-block);
     }
-body.advancedUser #firewallContainer > div > span.blockRule {
-    background-color: rgba(192, 0, 0, 0.3);
+body.advancedUser #firewallContainer > div > span.noopRule,
+#actionSelector > #dynaNoop {
+    background-color: var(--bg-popup-cell-noop);
     }
-body.advancedUser #firewallContainer.colorBlind > div > span.blockRule {
-    background-color: rgba(0, 19, 110, 0.4);
+body.advancedUser #firewallContainer > div > span.ownRule,
+#firewallContainer > div > span.ownRule {
+    color: var(--bg-0);
     }
-body.advancedUser #firewallContainer > div > span.noopRule {
-    background-color: rgba(108, 108, 108, 0.3);
+body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
+#actionSelector > #dynaAllow:hover {
+    background-color: var(--bg-popup-cell-allow-own);
     }
-body.advancedUser #firewallContainer.colorBlind > div > span.noopRule {
-    background-color: rgba(96, 96, 96, 0.4);
+body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
+#actionSelector > #dynaBlock:hover {
+    background-color: var(--bg-popup-cell-block-own);
     }
-body.advancedUser #firewallContainer > div > span.ownRule {
-    color: white;
-    }
-body.advancedUser #firewallContainer > div > span.allowRule.ownRule {
-    background-color: rgba(0, 160, 0, 1);
-    }
-body.advancedUser #firewallContainer.colorBlind > div > span.allowRule.ownRule {
-    background-color: rgba(255, 194, 57, 1);
-    }
-body.advancedUser #firewallContainer > div > span.blockRule.ownRule {
-    background-color: rgba(192, 0, 0, 1);
-    }
-body.advancedUser #firewallContainer.colorBlind > div > span.blockRule.ownRule {
-    background-color: rgba(0, 19, 110, 1);
-    }
-body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
-    background-color: rgba(108, 108, 108, 1);
+body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
+#actionSelector > #dynaNoop:hover {
+    background-color: var(--bg-popup-cell-noop-own);
     }
 
 #actionSelector {
-    bottom: 0;
+    box-sizing: border-box;
+    height: 100%;
     left: 0;
     position: absolute;
     top: 0;
-    width: 4em;
+    width: 100%;
     z-index: 1;
     }
 #actionSelector > span {
     display: inline-block;
     height: 100%;
-    opacity: 0.2;
     }
-#actionSelector > span:first-of-type {
+#actionSelector > #dynaAllow {
     width: 33%;
     }
-#actionSelector > span:nth-of-type(2) {
+#actionSelector > #dynaNoop {
     width: 33.5%;
     }
-#actionSelector > span:nth-of-type(3) {
+#actionSelector > #dynaBlock {
     width: 33.5%;
     }
-#actionSelector > span:hover {
-    opacity: 0.75;
-    }
-#actionSelector > span:first-of-type {
-    background-color: rgb(0, 160, 0);
-    }
-#actionSelector.colorBlind > span:first-of-type {
-    background-color: rgb(255, 194, 57);
-    }
-#actionSelector > span:nth-of-type(2) {
-    background-color: rgb(108, 108, 108);
-    }
-#actionSelector > span:nth-of-type(3) {
-    background-color: rgb(192, 0, 0);
-    }
-#actionSelector.colorBlind > span:nth-of-type(3) {
-    background-color: rgb(0, 19, 110);
+#actionSelector > #dynaCounts {
+    align-items: center;
+    background-color: transparent;
+    display: inline-flex;
+    height: 100%;
+    justify-content: space-between;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
     }
 
 #rulesetTools {
     background-color: transparent;
     border: 0;
-    fill: #888;
     display: none;
     left: 4px;
     padding: 0;
@@ -513,11 +492,12 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
     top: 4px;
     }
 #rulesetTools > span {
-    background-color: #ffe;
+    background-color: var(--bg-transient-notice);
     border: 1px solid #ddc;
     border-radius: 4px;
     cursor: pointer;
     display: inline-block;
+    fill: var(--fg-0-50);
     font-size: 1.8em;
     line-height: 1.0;
     margin: 0;
@@ -530,10 +510,9 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
     display: block;
     }
 #firewallContainer.dirty ~ #rulesetTools > span:hover {
-    fill: black;
+    fill: inherit;
     }
 
-
 body.responsive {
     overflow-y: auto;
     width: auto;
diff --git a/src/css/settings.css b/src/css/settings.css
index 21d040914..14a6ac4be 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -1,6 +1,6 @@
 hr {
     border: 0;
-    border-top: 1px solid var(--fg-hline-1);
+    border-top: 1px solid var(--hline-1);
     margin: 1.5em 0;
     }
 .body {
diff --git a/src/css/shortcuts.css b/src/css/shortcuts.css
index d188c7f9b..735d87411 100644
--- a/src/css/shortcuts.css
+++ b/src/css/shortcuts.css
@@ -43,18 +43,12 @@
     }
 
 .commandEntries td.commandShortcut input ~ .commandReset {
-    color: #888;
     cursor: pointer;
     font-size: 150%;
     padding: 0 0.2em;
     vertical-align: middle;
     }
 
-.commandEntries td.commandShortcut input ~ .commandReset:hover {
-    background-color: #eee;
-    color: black;
-    }
-
 .commandEntries td.commandShortcut input:placeholder-shown ~ .commandReset,
 .commandEntries td.commandShortcut input:focus ~ .commandReset {
     display: none;
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 550b5de84..76ec67b44 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -1,21 +1,46 @@
+/*
+
+    Notes:
+
+    `--fg-...`: used for color of text or small icons
+    `--bg-...`: used to color large areas on which text will be rendered
+
+*/
+
 :root {
     --bg-0: #fff;
     --fg-0: hsla(261, 53%, 15%, 1);
 
+    --bg-1: hsla(240, 20%, 98%, 1);
+    --bg-1-border: hsla(240, 20%, 90%, 1);
+
+    --bg-overlay-50: #0008;
+
+    --bg-code: hsla(240, 20%, 93%, 1);
+
+    /* these fg colors are meant to render over bg colors */
+    --fg-0-80: hsla(261, 53%, 15%, 0.8);
+    --fg-0-70: hsla(261, 53%, 15%, 0.7);
     --fg-0-60: hsla(261, 53%, 15%, 0.6);
     --fg-0-50: hsla(261, 53%, 15%, 0.5);
+    --fg-0-40: hsla(261, 53%, 15%, 0.4);
+    --fg-0-30: hsla(261, 53%, 15%, 0.3);
+    --fg-0-20: hsla(261, 53%, 15%, 0.2);
 
-    --fg-hline-1: #ccc;
+    --hline-1: hsla(261, 53%, 15%, 0.2);
 
-    --bg-button: #e6e6e6;
+    --bg-button: hsla(0, 0%, 90%, 1);
+    --bg-button-hover: hsla(0, 0%, 83%, 1);
+    --bg-button-important: hsla(36, 100%, 85%, 1);
+    --bg-button-important-hover: hsla(36, 100%, 77%, 1);
     --fg-button: var(--fg-0);
-    --bg-button-disabled: #eee;
-    --fg-button-disabled: #888;
+    --bg-button-disabled: hsla(0, 0%, 93%, 1);
+    --fg-button-disabled: hsla(0, 0%, 60%, 1);
+
+    --bg-transient-notice: hsla(60, 100%, 95%, 1);
 
-    --bg-dashboard-nav: #f9f9fb;
     --fg-dashboard-nav-off: var(--fg-0);
     --fg-dashboard-nav-on: #592acb;
-    --dashboard-nav-border: rgba(14, 13, 26, 0.12);
 
     --fg-icon-info-lvl-0-dimmed: #888;
     --fg-icon-info-lvl-0: inherit;
@@ -25,6 +50,54 @@
     --fg-icon-info-lvl-2: hsla(36, 100%, 40%, 1);
     --fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5);
     --fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1);
-    --fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 40%, 0.5);
-    --fg-icon-info-lvl-4: hsla(0, 100%, 40%, 1);
+    --fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 35%, 0.5);
+    --fg-icon-info-lvl-4: hsla(0, 100%, 35%, 1);
+
+    --large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
+
+    --bg-tooltip: hsla(60, 100%, 97%, 1);
+    --fg-tooltip: var(--fg-0);
+
+    /* popup panel */
+    --bg-popup-1: hsla(261, 0%, 93%, 1);
+    --fg-popup-power: hsla(214, 100%, 44%, 1);
+    --fg-popup-power-hover: opacity(80%);
+    --bg-popup-cell-label-filter: opacity(40%);
+    --fg-popup-fwcell-cname: hsla(240, 100%, 40%, 1);
+    --bg-popup-cell: var(--bg-popup-1);
+    --bg-popup-cell-allow: hsla(120, 40%, 75%, 1);
+    --bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1);
+    --bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
+    --bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
+    --bg-popup-cell-block: hsla(0, 50%, 80%, 1);
+    --bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
+    --bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
+    --fg-popup-icon-caption-display: unset;
+    --fg-popup-icon-x: hsla(0, 100%, 50%, 1);
+}
+
+/**
+ Source for color-blind color scheme from https://github.com/WyohKnott:
+ https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
+ */
+:root.colorBlind {
+    --bg-popup-cell-allow: hsla(42, 100%, 80%, 1);
+    --bg-popup-cell-allow-own: hsla(42, 100%, 50%, 1);
+    --bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
+    --bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
+    --bg-popup-cell-block: hsla(230, 25%, 75%, 1);
+    --bg-popup-cell-block-own: hsla(230, 100%, 25%, 1);
+    --bg-popup-cell-label-mixed: hsla(25, 100%, 50%, 1);
+}
+
+/* Default dark theme starts here */
+
+@media (prefers-color-scheme: dark) {
+
+    :root {
+    }
+
+    :root.colorBlind {
+    }
+
 }
diff --git a/src/js/3p-filters.js b/src/js/3p-filters.js
index a147b76f4..ad9fa9fee 100644
--- a/src/js/3p-filters.js
+++ b/src/js/3p-filters.js
@@ -433,18 +433,20 @@ const selectFilterLists = async function() {
     messaging.send('dashboard', {
         what: 'userSettings',
         name: 'parseAllABPHideFilters',
-        value: document.getElementById('parseCosmeticFilters').checked,
+        value: uDom.nodeFromId('parseCosmeticFilters').checked,
     });
     messaging.send('dashboard', {
         what: 'userSettings',
         name: 'ignoreGenericCosmeticFilters',
-        value: document.getElementById('ignoreGenericCosmeticFilters').checked,
+        value: uDom.nodeFromId('ignoreGenericCosmeticFilters').checked,
     });
 
     // Filter lists to select
     const toSelect = [];
-    let liEntries = document.querySelectorAll('#lists .listEntry[data-listkey]:not(.toRemove)');
-    for ( const liEntry of liEntries ) {
+    for (
+        const liEntry of
+        document.querySelectorAll('#lists .listEntry[data-listkey]:not(.toRemove)')
+    ) {
         if ( liEntry.querySelector('input[type="checkbox"]:checked') !== null ) {
             toSelect.push(liEntry.getAttribute('data-listkey'));
         }
@@ -452,16 +454,22 @@ const selectFilterLists = async function() {
 
     // External filter lists to remove
     const toRemove = [];
-    liEntries = document.querySelectorAll('#lists .listEntry.toRemove[data-listkey]');
-    for ( const liEntry of liEntries ) {
+    for (
+        const liEntry of
+        document.querySelectorAll('#lists .listEntry.toRemove[data-listkey]')
+    ) {
         toRemove.push(liEntry.getAttribute('data-listkey'));
     }
 
     // External filter lists to import
     const externalListsElem = document.getElementById('externalLists');
     const toImport = externalListsElem.value.trim();
-    externalListsElem.value = '';
-    uDom.nodeFromId('importLists').checked = false;
+    {
+        const liEntry = externalListsElem.closest('.listEntry');
+        liEntry.classList.remove('checked');
+        liEntry.querySelector('input[type="checkbox"]').checked = false;
+        externalListsElem.value = '';
+    }
 
     await messaging.send('dashboard', {
         what: 'applyFilterListSelection',
diff --git a/src/js/dyna-rules.js b/src/js/dyna-rules.js
index 85cf87fe2..39c4349a0 100644
--- a/src/js/dyna-rules.js
+++ b/src/js/dyna-rules.js
@@ -373,7 +373,7 @@ const onTextChanged = (( ) => {
             cleanEditToken = mergeView.editor().changeGeneration();
             isClean = true;
         }
-        diff.classList.toggle('editing', isClean === false);
+        document.body.classList.toggle('editing', isClean === false);
         diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0);
         document.getElementById('editSaveButton')
                 .classList.toggle('disabled', isClean);
diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js
index 744da53ef..86eb9786f 100644
--- a/src/js/popup-fenix.js
+++ b/src/js/popup-fenix.js
@@ -265,11 +265,10 @@ const updateAllFirewallCells = function() {
 const buildAllFirewallRows = function() {
     // Do this before removing the rows
     if ( dfHotspots === null ) {
-        dfHotspots = uDom('#actionSelector')
-            .toggleClass('colorBlind', popupData.colorBlindFriendly)
-            .on('click', 'span', setFirewallRuleHandler);
+        dfHotspots =
+            uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
     }
-    dfHotspots.detach();
+    dfHotspots.remove();
 
     // Update incrementally: reuse existing rows if possible.
     const rowContainer = document.getElementById('firewallContainer');
@@ -479,7 +478,7 @@ const renderPopup = function() {
         dfPaneVisible === true
     );
 
-    uDom.nodeFromId('firewallContainer').classList.toggle(
+    document.documentElement.classList.toggle(
         'colorBlind',
         popupData.colorBlindFriendly === true
     );
@@ -734,7 +733,7 @@ const mouseenterCellHandler = function() {
 };
 
 const mouseleaveCellHandler = function() {
-    dfHotspots.detach();
+    dfHotspots.remove();
 };
 
 /******************************************************************************/
@@ -759,6 +758,12 @@ const setFirewallRule = async function(src, des, type, action, persist) {
         persist: persist,
     });
 
+    // Remove action widget if an own rule has been set, this allows to click
+    // again immediately to remove the rule.
+    if ( action !== 0 ) {
+        dfHotspots.remove();
+    }
+
     cachePopupData(response);
     updateAllFirewallCells();
     hashFromPopupData();
@@ -801,7 +806,7 @@ const setFirewallRuleHandler = function(ev) {
         action,
         ev.ctrlKey || ev.metaKey
     );
-    dfHotspots.detach();
+    dfHotspots.remove();
 };
 
 /******************************************************************************/
diff --git a/src/js/popup.js b/src/js/popup.js
index d336ab166..266036a4d 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -300,11 +300,10 @@ const updateAllFirewallCells = function() {
 const buildAllFirewallRows = function() {
     // Do this before removing the rows
     if ( dfHotspots === null ) {
-        dfHotspots = uDom('#actionSelector')
-            .toggleClass('colorBlind', popupData.colorBlindFriendly)
-            .on('click', 'span', setFirewallRuleHandler);
+        dfHotspots =
+            uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
     }
-    dfHotspots.detach();
+    dfHotspots.remove();
 
     // Update incrementally: reuse existing rows if possible.
     const rowContainer = document.getElementById('firewallContainer');
@@ -523,7 +522,7 @@ const renderPopup = function() {
         dfPaneVisible === true
     );
 
-    uDom.nodeFromId('firewallContainer').classList.toggle(
+    document.documentElement.classList.toggle(
         'colorBlind',
         popupData.colorBlindFriendly === true
     );
@@ -827,7 +826,7 @@ const mouseenterCellHandler = function() {
 };
 
 const mouseleaveCellHandler = function() {
-    dfHotspots.detach();
+    dfHotspots.remove();
 };
 
 /******************************************************************************/
@@ -852,6 +851,12 @@ const setFirewallRule = async function(src, des, type, action, persist) {
         persist: persist,
     });
 
+    // Remove action widget if an own rule has been set, this allows to click
+    // again immediately to remove the rule.
+    if ( action !== 0 ) {
+        dfHotspots.remove();
+    }
+
     cachePopupData(response);
     updateAllFirewallCells();
     hashFromPopupData();
@@ -894,7 +899,7 @@ const setFirewallRuleHandler = function(ev) {
         action,
         ev.ctrlKey || ev.metaKey
     );
-    dfHotspots.detach();
+    dfHotspots.remove();
 };
 
 /******************************************************************************/
diff --git a/src/popup-fenix.html b/src/popup-fenix.html
index f50e1ace4..edebc5c22 100644
--- a/src/popup-fenix.html
+++ b/src/popup-fenix.html
@@ -66,7 +66,7 @@
 
 <div id="templates" style="display: none">
     <div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
-    <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
+    <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span><span id="dynaCounts"></span></div>
     <div id="hotspotTip"></div>
     <div id="tooltip"></div>
 </div>
diff --git a/src/popup.html b/src/popup.html
index 3108e8269..7df02d25a 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -56,7 +56,7 @@
 
 <div id="templates" style="display: none">
     <div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
-    <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
+    <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span><span id="dynaCounts"></span></div>
     <div id="hotspotTip"></div>
     <div id="tooltip"></div>
 </div>
diff --git a/src/shortcuts.html b/src/shortcuts.html
index 22a72380d..5ee3e4954 100644
--- a/src/shortcuts.html
+++ b/src/shortcuts.html
@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>uBlock Origin — Keyboard shortcuts</title>
+<link rel="stylesheet" type="text/css" href="css/themes/default.css">
 <link rel="stylesheet" type="text/css" href="css/common.css">
 <link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
 <link rel="stylesheet" type="text/css" href="css/shortcuts.css">
@@ -21,7 +22,7 @@
             <td class="commandDesc">
             <td class="commandShortcut">
                 <input type="text" placeholder="shortcutCapturePlaceholder">
-                <span class="commandReset">&times;</span>
+                <button class="commandReset custom" type="button">&times;</button>
     </div>
 </div>