diff --git a/src/1p-filters.html b/src/1p-filters.html
index b57e42e31..7b1e5901a 100644
--- a/src/1p-filters.html
+++ b/src/1p-filters.html
@@ -50,6 +50,7 @@
 <script src="lib/codemirror/addon/search/searchcursor.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
 <script src="lib/diff/swatinem_diff.js"></script>
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="js/codemirror/search.js"></script>
 <script src="js/codemirror/search-thread.js"></script>
diff --git a/src/3p-filters.html b/src/3p-filters.html
index 9be69f77a..e97a0a3e3 100644
--- a/src/3p-filters.html
+++ b/src/3p-filters.html
@@ -70,6 +70,8 @@
     </div>
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
diff --git a/src/about.html b/src/about.html
index 27e22b6b3..d978de35b 100644
--- a/src/about.html
+++ b/src/about.html
@@ -35,6 +35,7 @@
         <div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
         <div class="li"><span><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a></span></div>
         <div class="li"><span><a href="https://github.com/foo123/RegexAnalyzer" target="_blank">Regular Expression Analyzer</a> by <a href="https://github.com/foo123">Nikos M.</a></span></div>
+        <div class="li"><span><a href="https://github.com/hsluv/hsluv" target="_blank">HSLuv - Human-friendly HSL</a> by <a href="https://github.com/foo123">Alexei Boronine</a></span></div>
     </div>
     <div class="li"><span data-i18n="aboutCDNs"></span></div>
     <div class="liul">
@@ -44,6 +45,8 @@
     </div>
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>
diff --git a/src/advanced-settings.html b/src/advanced-settings.html
index fde43961a..0224b7ec9 100644
--- a/src/advanced-settings.html
+++ b/src/advanced-settings.html
@@ -27,6 +27,7 @@
 
 <script src="lib/codemirror/lib/codemirror.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
diff --git a/src/asset-viewer.html b/src/asset-viewer.html
index 66baf4e14..8a1f9bc60 100644
--- a/src/asset-viewer.html
+++ b/src/asset-viewer.html
@@ -33,6 +33,7 @@
 <script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
 <script src="lib/codemirror/addon/search/searchcursor.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="js/codemirror/search.js"></script>
 <script src="js/codemirror/search-thread.js"></script>
diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index 89100fa67..95b87b093 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -12,9 +12,6 @@
     height: 100%;
     width: 100%;
     }
-.CodeMirror-activeline-background {
-    background-color: var(--cm-active-line);
-    }
 .CodeMirror-cursor {
     border-color: var(--cm-cursor);
     }
@@ -118,6 +115,7 @@
     color: var(--sf-variable-ink);
     }
 .cm-s-default .cm-warning {
+    background-color: var(--sf-warning-surface);
     text-decoration: underline var(--sf-warning-ink);
     text-underline-position: under;
     }
@@ -166,7 +164,7 @@
     font-size: 140%;
     }
 .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
-    fill: #000;
+    fill: var(--ink-1);
     }
 .cm-search-widget-input input {
     border: 1px solid var(--cm-gutter-ink);
@@ -205,11 +203,11 @@
     color: var(--cm-merge-copy-ink);
     }
 .CodeMirror-merge-l-chunk {
-    background-color: var(--cm-merge-l-chunk-surface);
+    background-color: var(--cm-merge-chunk-surface);
     }
 .CodeMirror-merge-l-chunk-start,
 .CodeMirror-merge-l-chunk-end {
-    border-color: var(--cm-merge-l-chunk-border);
+    border-color: var(--cm-merge-chunk-border);
     }
 .CodeMirror-merge-l-deleted {
     background-image: none;
@@ -224,10 +222,16 @@
     vertical-align: top;
     }
 .CodeMirror-merge-spacer {
-    background-color: var(--surface-0);
-    opacity: 40%;
+    background-color: var(--cm-merge-chunk-surface);
     }
 
 .CodeMirror-hints {
     z-index: 10000;
     }
+
+/* Must appear after other background color declarations to be sure it
+ * overrides them
+ * */
+.CodeMirror-activeline-background {
+    background-color: var(--cm-active-line);
+    }
diff --git a/src/css/common.css b/src/css/common.css
index d7e72e615..809e179d5 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -115,7 +115,7 @@ button.active {
     }
 button.disabled,
 button[disabled] {
-    background-color: var(--button-surface);
+    background-color: var(--button-disabled-surface);
     color: var(--button-ink);
     fill: var(--button-ink);
     filter: var(--button-disabled-filter);
@@ -124,7 +124,7 @@ button[disabled] {
 button.preferred:not(.disabled):not([disabled]) {
     background-color: var(--button-preferred-surface);
     color: var(--button-preferred-ink);
-    fill: var(--button-preferred-ink);
+        fill: var(--button-preferred-ink);
     }
 button.preferred:not(.disabled):not([disabled]):hover > .hover {
     background-color: var(--elevation-down-surface);
diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css
index c5caa9284..c2da51e35 100644
--- a/src/css/dashboard-common.css
+++ b/src/css/dashboard-common.css
@@ -25,6 +25,10 @@ a {
     color: var(--info2-ink);
         fill: var(--info2-ink);
     }
+.fa-icon.info.very-important {
+    color: var(--info3-ink);
+        fill: var(--info3-ink);
+    }
 input[type="number"] {
     width: 5em;
     }
diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css
index ae1b65fef..fd076ef40 100644
--- a/src/css/document-blocked.css
+++ b/src/css/document-blocked.css
@@ -45,6 +45,7 @@ a {
     font-size: 96px;
     }
 #theURL {
+    color: var(--ink-2);
     padding: 0;
     }
 #theURL > * {
@@ -54,33 +55,32 @@ a {
     position: relative;
     z-index: 10;
     }
-#theURL > p > span:last-of-type {
+#theURL #toggleParse {
     background-color: transparent;
     top: 100%;
     box-sizing: border-box;
-    color: var(--ink-4);
-        fill: var(--ink-4);
+    color: var(--ink-3);
+        fill: var(--ink-3);
     cursor: pointer;
     font-size: 1.2rem;
     padding: var(--default-gap-xxsmall);
     position: absolute;
     transform: translate(0, -50%);
     }
-#theURL:not(.collapsed) > p > span:last-of-type > span:first-of-type {
+#theURL:not(.collapsed) #toggleParse > span:first-of-type {
     display: none;
     }
-#theURL.collapsed > p > span:last-of-type > span:last-of-type {
+#theURL.collapsed #toggleParse > span:last-of-type {
     display: none;
     }
-body[dir="ltr"] #theURL > p > span:last-of-type {
+body[dir="ltr"] #toggleParse {
     right: 0;
     }
-body[dir="rtl"] #theURL > p > span:last-of-type {
+body[dir="rtl"] #toggleParse {
     left: 0;
     }
-#theURL > p:hover > span {
-    color: var(--ink-1);
-        fill: var(--ink-1);
+#theURL > p:hover #toggleParse {
+    transform: translate(0, -50%) scale(1.15);
     }
 #parsed {
     background-color: var(--surface-1);
diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index 9eef96a73..17f04d42d 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -225,29 +225,21 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     }
 #vwRenderer .logEntry > div[data-status="1"],
 #netFilteringDialog > .panes > .details > div[data-status="1"] {
-    background-color: var(--logger-blocked-surface);
+    background-color: rgb(var(--popup-cell-block-surface-rgb) / 50%);
     }
 #vwRenderer .logEntry > div[data-status="1"][data-modifier],
 #netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] {
     background-color: var(--logger-modified-surface);
     }
-body.colorBlind #vwRenderer .logEntry > div[data-status="1"],
-body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] {
-    background-color: rgba(0, 19, 110, 0.1);
-    }
 #vwRenderer .logEntry > div[data-status="3"] {
     background-color: rgba(108, 108, 108, 0.1);
     }
-body.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
+:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
     background-color: rgba(96, 96, 96, 0.1);
     }
 #vwRenderer .logEntry > div[data-status="2"],
 #netFilteringDialog > .panes > .details > div[data-status="2"] {
-    background-color: var(--logger-allowed-surface);
-    }
-body.colorBlind #vwRenderer .logEntry > div[data-status="2"],
-body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
-    background-color: rgba(255, 194, 57, 0.1)
+    background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%);
     }
 #vwRenderer .logEntry > div[data-tabid="-1"] {
     text-shadow: 0 0.2em 0.4em #aaa;
@@ -256,8 +248,8 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
 #vwRenderer .logEntry > div.redirect {
     background-color: var(--logger-redirected-surface);
     }
-body.colorBlind #vwRenderer .logEntry > div.extendedRealm,
-body.colorBlind #vwRenderer .logEntry > div.redirect {
+:root.colorBlind #vwRenderer .logEntry > div.extendedRealm,
+:root.colorBlind #vwRenderer .logEntry > div.redirect {
     background-color: rgba(0, 19, 110, 0.1);
     }
 #vwRenderer .logEntry > div[data-aliasid] {
@@ -376,29 +368,21 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
     }
 #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
 #netFilteringDialog > .panes > .details > div[data-status="1"] b {
-    background-color: var(--logger-blocked-em-surface);
+    background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%);
     }
 #vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(7) b,
 #netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b {
     background-color: var(--logger-modified-em-surface);
     }
-body.colorBlind #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
-body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] b {
-    background-color: rgba(0, 19, 110, 0.2);
-    }
 #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
     background-color: rgba(108, 108, 108, 0.2);
     }
-body.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
+:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
     background-color: rgba(96, 96, 96, 0.2);
     }
 #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
 #netFilteringDialog > .panes > .details > div[data-status="2"] b {
-    background-color: var(--logger-allowed-em-surface);
-    }
-body.colorBlind #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
-body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b {
-    background-color: rgba(255, 194, 57, 0.2);
+    background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
     }
 #vwRenderer .logEntry > div > span:nth-of-type(7) a {
     background-color: dimgray;
@@ -759,35 +743,35 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
 #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
     background-color: rgba(0, 160, 0, 0.3);
     }
-body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
+:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
     background-color: rgba(255, 194, 57, 0.4);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
     background-color: rgba(108, 108, 108, 0.3);
     }
-body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
+:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
     background-color: rgba(96, 96, 96, 0.4);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
     background-color: rgba(192, 0, 0, 0.3);
     }
-body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
+:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
     background-color: rgba(0, 19, 110, 0.4);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
     background-color: rgba(0, 160, 0, 1);
     }
-body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
+:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
     background-color: rgba(255, 194, 57, 1);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop,
-body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
+:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
     background-color: rgba(108, 108, 108, 1);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
     background-color: rgba(192, 0, 0, 1);
     }
-body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
+:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
     background-color: rgba(0, 19, 110, 1);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span {
@@ -800,7 +784,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.
 #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
     background-color: rgb(0, 160, 0);
     }
-body.colorBlind  #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
+:root.colorBlind  #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
     background-color: rgb(255, 194, 57);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
@@ -809,7 +793,7 @@ body.colorBlind  #netFilteringDialog > div.panes > .dynamic .entry > .action > .
 #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
     background-color: rgb(192, 0, 0);
     }
-body.colorBlind  #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
+:root.colorBlind  #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
     background-color: rgb(0, 19, 110);
     }
 #netFilteringDialog > div.panes > .dynamic .entry > .url {
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index c3ba7e727..8f82bea30 100644
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@@ -64,10 +64,6 @@ hr {
     align-items: stretch;
     display: flex;
     justify-content: space-between;
-    margin: var(--popup-gap-thin)
-            var(--popup-gap-thin)
-            var(--popup-gap)
-            var(--popup-gap-thin);
     }
 #switch {
     color: var(--popup-power-ink);
@@ -77,7 +73,7 @@ hr {
     flex-grow: 1;
     font-size: 96px;
     justify-content: center;
-    margin: 0 var(--popup-gap-thin);
+    margin: var(--popup-gap-thin) var(--popup-gap-thin) 0;
     padding: 0;
     stroke: none;
     stroke-width: 64;
@@ -106,7 +102,7 @@ body.off #switch {
     visibility: hidden;
     }
 .rulesetTools [id]:not(:first-of-type) {
-    margin-top: 0.2em;
+    margin-block-start: 1px;
     }
 .rulesetTools [id] > svg {
     fill: var(--ink-4);
@@ -174,6 +170,7 @@ body.needSave #revertRules {
 
 .toolRibbon {
     align-items: start;
+    background-color: var(--popup-toolbar-surface);
     display: grid;
     grid-auto-columns: 1fr;
     grid-auto-flow: column;
@@ -228,10 +225,11 @@ body.mobile.no-tooltips .toolRibbon .tool {
     }
 
 #moreOrLess {
-    column-gap: var(--popup-gap);
+    column-gap: 0;
     display: grid;
     grid-template: auto / 1fr 1fr;
-    margin: 0;
+    justify-items: stretch;
+    margin: 1px 0 0 0;
     }
 #moreOrLess > span {
     cursor: pointer;
@@ -247,6 +245,7 @@ body.mobile.no-tooltips .toolRibbon .tool {
     transform: rotate(180deg);
     }
 #lessButton {
+    border-inline-start: 1px solid var(--surface-1);
     text-align: end;
     }
 body[data-more="a b c d e f"] #moreButton {
@@ -269,6 +268,9 @@ body[data-more=""] #lessButton {
     padding: 0;
     overflow-y: auto;
     }
+:root.desktop #firewall {
+    margin-inline-start: 1px;
+    }
 :root.desktop body.vMin #firewall {
     max-height: 100vh;
     }
@@ -601,6 +603,15 @@ body:not([data-more~="f"]) [data-more="f"] {
     overflow-y: hidden;
     visibility: hidden;
     }
+body[data-more~="d"] hr[data-more="a"] {
+    display: none;
+    }
+body[data-more~="c"] hr[data-more="f"] {
+    display: none;
+    }
+body[data-more~="c"]:not([data-more~="f"]) hr[data-more="g"] {
+    display: none;
+    }
 body:not([data-more~="e"]) [data-more="e"] {
     display: none;
     }
@@ -663,15 +674,16 @@ body:not([data-more~="e"]) [data-more="e"] {
     background-color: var(--popup-ruleset-tool-surface-hover);
     }
 :root.desktop .rulesetTools [id]:hover > svg {
-    fill: var(--ink-3);
+    fill: var(--ink-2);
     }
 :root.desktop #firewall {
     direction: rtl;
     line-height: 1.4;
     }
 :root.desktop .tool:hover {
-    background-color: var(--surface-2);
+    background-color: var(--popup-toolbar-surface-hover);
     }
 :root.desktop #moreOrLess > span:hover {
     background-color: var(--surface-2);
+    /* background-color: var(--popup-toolbar-surface-hover); */
     }
diff --git a/src/css/popup.css b/src/css/popup.css
index 76e0f78a9..7baa47e39 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -2,6 +2,9 @@
     --bg-tooltip: hsla(60, 100%, 97%, 1);
     --popup-power-ink: rgb(0 110 254);
     --popup-power-ink-hover: rgb(var(--blue-60));
+    --ink-2: rgb(var(--ink-rgb) / 80%);
+    --ink-3: rgb(var(--ink-rgb) / 60%);
+    --ink-4: rgb(var(--ink-rgb) / 40%);
     --ink-5: rgb(var(--ink-rgb) / 20%);
     }
 :root.dark {
diff --git a/src/css/settings.css b/src/css/settings.css
index 0a030b563..030541883 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -1,15 +1,53 @@
 body {
     margin-bottom: 6rem;
     }
+
 .synopsis {
+    color: var(--ink-1);
     font-size: 90%;
+    opacity: var(--medium-em);
     }
+
+/* surface/ink */
+#themeMood {
+    align-items: stretch;
+    align-self: stretch;
+    display: inline-flex;
+    justify-content: stretch
+    user-select: none;
+    }
+#themeMood > span {
+    border: 1px solid var(--ink-1);
+    color: var(--ink-1);
+    display: inline-flex;
+    background-color: var(--surface-1);
+    display: inline-block;
+    padding: 0 0.5em;
+    text-align: center;
+    user-select: none;
+    }
+
+/* primary color */
+#themePrimary {
+    align-items: stretch;
+    align-self: stretch;
+    display: inline-flex;
+    justify-content: stretch
+    position: relative;
+    }
+#themePrimary > span {
+    background-color: rgb(var(--primary-color-50));
+    display: inline-flex;
+    width: 2em;
+    }
+
 [href="advanced-settings.html"] {
     display: none;
     }
 body.advancedUser [href="advanced-settings.html"] {
     display: inline-flex;
     }
+
 #localData > div {
     margin-bottom: var(--default-gap-small);
     }
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index a9def98de..cd4418a5e 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -134,65 +134,23 @@
 }
 
 /*
- * Color themes
+ * Default color theme
  * 
  * Tool: hsluv.org
  * 
  * */
-:root.h0 {
-    --primary-color-30: 139  18  60; /* S:90 Luv:30 */
-    --primary-color-40: 181  27  81; /* S:90 Luv:40 */
-    --primary-color-50: 226  37 102; /* S:90 Luv:50 */
-    --primary-color-60: 247  87 130; /* S:90 Luv:60 */
-    --primary-color-70: 248 138 162; /* S:90 Luv:70 */
-    --primary-color-70: 248 138 162; /* S:90 Luv:70 */
-    --primary-color-80: 250 180 193; /* S:90 Luv:80 */
-    }
-
-:root.h45 {
-    --primary-color-30:  98  63  17; /* S:90 Luv:30 */
-    --primary-color-40: 130  85  25; /* S:90 Luv:40 */
-    --primary-color-50: 162 107  34; /* S:90 Luv:50 */
-    --primary-color-60: 196 131  43; /* S:90 Luv:60 */
-    --primary-color-70: 232 155  53; /* S:90 Luv:70 */
-    --primary-color-80: 251 185 123; /* S:90 Luv:80 */
-    }
-
-:root.h180 {
-    --primary-color-30:  18  79  73; /* S:90 Luv:30 */
-    --primary-color-40:  27 105  98; /* S:90 Luv:40 */
-    --primary-color-50:  37 132 123; /* S:90 Luv:50 */
-    --primary-color-60:  47 161 150; /* S:90 Luv:60 */
-    --primary-color-70:  57 190 177; /* S:90 Luv:70 */
-    --primary-color-80:  67 220 205; /* S:90 Luv:80 */
-    }
-
-:root.h225 {
-    --primary-color-30:  20  77  95; /* S:90 Luv:30 */
-    --primary-color-40:  29 102 125; /* S:90 Luv:40 */
-    --primary-color-50:  39 128 157; /* S:90 Luv:50 */
-    --primary-color-60:  50 156 190; /* S:90 Luv:60 */
-    --primary-color-70:  60 184 224; /* S:90 Luv:70 */
-    --primary-color-80: 110 211 250; /* S:90 Luv:80 */
-    }
-
-:root /* .h270 default */ {
-    --primary-color-30:  72  31 194; /* S:90 Luv:30 */
-    --primary-color-40:  96  56 234; /* S:90 Luv:40 */
-    --primary-color-50: 120  95 240; /* S:90 Luv:50 */
-    --primary-color-60: 146 128 244; /* S:90 Luv:60 */
-    --primary-color-70: 172 160 247; /* S:90 Luv:70 */
-    --primary-color-80: 199 192 250; /* S:90 Luv:80 */
-    }
-
-:root.h315 {
-    --primary-color-10:  54   5  49; /* S:90 Luv:10 */
-    --primary-color-30: 126  22 115; /* S:90 Luv:30 */
-    --primary-color-40: 165  32 151; /* S:90 Luv:40 */
-    --primary-color-50: 205  43 189; /* S:90 Luv:50 */
-    --primary-color-60: 244  61 225; /* S:90 Luv:60 */
-    --primary-color-70: 247 127 231; /* S:90 Luv:70 */
-    --primary-color-80: 250 174 238; /* S:90 Luv:80 */
+:root /* h268 */ {
+     --primary-color-5:  13   4  65; /* S:90 Luv:5 */
+    --primary-color-10:  22   9  92; /* S:90 Luv:10 */
+    --primary-color-20:  40  20 145; /* S:90 Luv:20 */
+    --primary-color-30:  59  32 202; /* S:90 Luv:30 */
+    --primary-color-40:  84  62 234; /* S:90 Luv:40 */
+    --primary-color-50: 112  98 240; /* S:90 Luv:50 */
+    --primary-color-60: 139 130 244; /* S:90 Luv:60 */
+    --primary-color-70: 168 162 247; /* S:90 Luv:70 */
+    --primary-color-80: 196 193 250; /* S:90 Luv:80 */
+    --primary-color-90: 225 224 252; /* S:90 Luv:90 */
+    --primary-color-95: 240 239 254; /* S:90 Luv:95 */
     }
 
 /*
@@ -211,14 +169,12 @@
     --elevation-down1-opacity: 16%;
     --elevation-down2-opacity: 32%;
 
+    /* https://material.io/design/color/text-legibility.html#text-backgrounds */
     --ink-rgb: var(--ink-80);
     --ink-0: black;
-    --ink-1: rgb(var(--ink-rgb));
-    --ink-2: rgb(var(--ink-rgb) / 80%);
-    --ink-3: rgb(var(--ink-rgb) / 60%);
-    --ink-4: rgb(var(--ink-rgb) / 40%);
 
-    --surface-0: white;
+    --surface-0-rgb: 255 255 255;
+    --surface-0: rgb(var(--surface-0-rgb));
     --surface-1: rgb(var(--gray-95));
     --surface-2: rgb(var(--gray-90));
     --surface-3: rgb(var(--gray-80));
@@ -228,68 +184,14 @@
     --border-3: rgb(var(--gray-65));
     --border-4: rgb(var(--gray-60));
 
-    --accent-ink-1: var(--surface-1);
     --accent-ink-3: var(--ink-1);
-    --accent-surface-1: rgb(var(--primary-color-30));
-    --accent-surface-2: rgb(var(--primary-color-50));
-    --accent-surface-3: rgb(var(--primary-color-70));
-
-    --link-ink: var(--accent-surface-1);
-    --subtil-ink: var(--accent-surface-1);
-
-    --fieldset-header-surface: transparent;
-    --fieldset-header-ink: var(--ink-2);
-
-    --button-ink: var(--ink-1);
-    --button-surface: var(--surface-3);
-    --button-border-radius: 5px;
-    --button-preferred-ink: var(--accent-ink-1);
-    --button-preferred-surface: var(--accent-surface-1);
-    --button-disabled-filter: opacity(50%);
-
-    --checkbox-size: calc(var(--font-size) + 2px);
-    --checkbox-ink: var(--ink-3);
-    --checkbox-checked-ink: var(--accent-surface-1);
-    --checkbox-disabled-filter: opacity(50%);
-
-    --notice-ink: var(--accent-ink-1);
-    --notice-surface: var(--accent-surface-1);
-    --notice-surface-shadow: #000 0 2px 8px;
-
-    --dashboard-tab-ink: var(--ink-1);
-    --dashboard-tab-active-ink: var(--accent-surface-1);
-    --dashboard-tab-active-surface: rgb(var(--primary-color-70) / 10%);
-    --dashboard-tab-surface-hover: var(--surface-2);
-    --dashboard-tab-border-hover: var(--surface-3);
-
-    /* info levels: normal, fyi, warn, error -- we want same Luv */
-    --info0-ink-rgb: 119 119 119; /* h:  0 S:  0 Luv:60 */
-    --info1-ink-rgb:  72 143 255; /* h:255 S:100 Luv:60 */
-    --info2-ink-rgb: 208 125   0; /* h: 40 S:100 Luv:60 */
-    --info3-ink-rgb: 255  82  94; /* h: 10 S:100 Luv:60 */
-    --info0-ink: rgb(var(--info0-ink-rgb));
-    --info1-ink: rgb(var(--info1-ink-rgb));
-    --info2-ink: rgb(var(--info2-ink-rgb));
-    --info3-ink: rgb(var(--info3-ink-rgb));
+    --accent-surface-1: rgb(var(--primary-color-40));
 
     /* popup panel */
-    --popup-cell-surface: var(--surface-2);
-    --popup-cell-label-filter: opacity(40%);
     --popup-cell-cname-ink: rgb(var(--blue-50));
-    --popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-own-surface-rgb));
-    --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb));
-    --popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-own-surface-rgb));
-    --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb));
-    --popup-cell-block-own-surface: rgb(var(--popup-cell-block-own-surface-rgb));
-    --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb));
     --popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
     --popup-icon-x-ink: rgb(var(--red-60));
-    --popup-power-ink-rgb: var(--primary-color-40);
-    --popup-power-ink: rgb(var(--popup-power-ink-rgb));
-    --popup-ruleset-tool-ink: var(--ink-1);
-    --popup-ruleset-tool-surface: rgb(var(--primary-color-70) / 20%);
-    --popup-ruleset-tool-surface-hover: rgb(var(--primary-color-70) / 40%);
-    --popup-ruleset-tool-shadow: rgb(var(--primary-color-30) / 20%);
+    --popup-power-ink-rgb: var(--primary-color-50);
 
     /* horizontal line separator */
     --hr-ink: var(--surface-2);
@@ -307,11 +209,11 @@
     --cm-gutter-surface: var(--surface-2);
     --cm-matchingbracket: rgb(var(--green-30));
     --cm-merge-copy-ink: rgb(var(--blue-50));
-    --cm-merge-l-chunk-border: rgb(var(--blue-5));
-    --cm-merge-l-chunk-surface: rgb(var(--blue-5) / 20%);
-    --cm-negative: #c00;
-    --cm-positive: #080;
-    --cm-selection-surface: #8cf4;
+    --cm-merge-chunk-border: rgb(var(--surface-0-rgb) / 40%);
+    --cm-merge-chunk-surface: rgb(var(--surface-0-rgb) / 40%);
+    --cm-negative: #e32f00; /* h:15 S:100 Luv:50 */
+    --cm-positive: #008a21; /* h:130 S:100 Luv:50 */
+    --cm-selection-surface: rgb(var(--primary-color-70) / 50%);
     --cm-selection-ink: var(--ink-1);
     --cm-searching-ink: inherit;
     --cm-searching-surface: rgb(var(--yellow-20) / 80%);
@@ -319,17 +221,18 @@
 
     /* syntax highlight: static filtering */
     --sf-comment-ink: var(--ink-3);
-    --sf-def-ink: rgb(var(--blue-50));
+    --sf-def-ink: #0075e7; /* h:255 S:100 Luv:50 */
     --sf-directive-ink: var(--ink-1);
-    --sf-error-ink: rgb(var(--red-60));
-    --sf-error-surface: rgb(var(--red-60) / 10%);
-    --sf-keyword-ink: rgb(var(--purple-60));
-    --sf-notice-ink: var(--border-2);
+    --sf-error-ink: #e32f00; /* h15 S:100 Luv:50 */
+    --sf-error-surface: #e32f0019; /* h15 S:100 Luv:50 @ 10% */
+    --sf-keyword-ink: #8c00e6; /* h:280 S:100 Luv:40 */
+    --sf-notice-ink: var(--ink-4);
     --sf-readonly-ink: var(--ink-3);
-    --sf-tag-ink: rgb(var(--green-60));
-    --sf-value-ink: rgb(var(--orange-70));
+    --sf-tag-ink: #008a3c /* h:135 S:100 Luv:50 */;
+    --sf-value-ink: #c65400 /* h:25 S:100 Luv:50 */;
     --sf-variable-ink: var(--ink-1);
-    --sf-warning-ink: rgb(var(--yellow-50));
+    --sf-warning-ink: #a06d00; /* h:50 S:100 Luv:50 */
+    --sf-warning-surface: #a06d0019; /* h:50 S:100 Luv:50 @ 10% */
 
     /* syntax highlight: dynamic filtering */
     --df-allow-ink: var(--cm-positive);
@@ -337,13 +240,9 @@
     --df-noop-ink: rgb(var(--dark-gray-10));
 
     /* logger */
-    --logger-allowed-surface: #00a00014;
-    --logger-blocked-surface: #c0000014;
     --logger-modified-surface: #0000c010;
     --logger-redirected-surface: rgb(var(--yellow-5) / 50%);
-    --logger-blocked-em-surface: #c0000036;
     --logger-modified-em-surface: #0000c028;
-    --logger-allowed-em-surface: #00a00036;
 }
 
 /*
@@ -368,7 +267,7 @@
     --ink-rgb: var(--gray-95);
     --ink-0: white;
 
-    --surface-0: black;
+    --surface-0-rgb: 0 0 0;
     --surface-1: rgb(var(--gray-10));
     --surface-2: rgb(var(--gray-20));
     --surface-3: rgb(var(--gray-30));
@@ -378,21 +277,13 @@
     --border-3: rgb(var(--gray-45));
     --border-4: rgb(var(--gray-50));
 
-    --accent-ink-1: rgb(var(--ink-80));
     --accent-surface-1: rgb(var(--primary-color-70));
 
-    --accent-ink-1: var(--surface-1);
-    --accent-ink-3: var(--ink-1);
-    --accent-surface-1: rgb(var(--primary-color-70));
-    --accent-surface-3: rgb(var(--primary-color-30));
-
     /* popup panel */
-    --popup-cell-label-filter: opacity(40%);
     --popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
     --popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
     --popup-icon-x-ink: rgb(var(--red-50));
     --popup-power-ink-rgb: var(--primary-color-60);
-    --popup-ruleset-tool-shadow: -surface-0;
 
     /* cloud widget */
     --cloud-total-used-surface: rgb(var(--violet-20) / 25%);
@@ -402,35 +293,104 @@
     --cm-merge-copy-ink: rgb(var(--blue-30));
     --cm-foldmarker-ink: rgb(var(--blue-20));
     --cm-matchingbracket: rgb(var(--green-30) / 50%);
-    --cm-merge-l-chunk-border: rgb(var(--blue-70));
-    --cm-merge-l-chunk-surface: rgb(var(--blue-90));
-    --cm-negative: #f44;
-    --cm-positive: #0c0;
+    --cm-negative: #ff8982; /* h:15 S:100 Luv:70 */
+    --cm-positive: #00c634; /* h:130 S:100 Luv:70 */
+    --cm-selection-surface: rgb(var(--primary-color-30) / 50%);
     --cm-searching-ink: var(--surface-0);
     --cm-searching-surface: rgb(var(--yellow-20));
 
     /* syntax highlight: static filtering */
     --sf-comment-ink: var(--ink-3);
-    --sf-def-ink: rgb(var(--blue-20));
-    --sf-error-ink: rgb(var(--red-40));
-    --sf-error-surface: rgb(var(--red-40) / 40%);
-    --sf-keyword-ink: rgb(var(--purple-10));
-    --sf-notice-ink: var(--border-2);
-    --sf-tag-ink: rgb(var(--green-50));
-    --sf-value-ink: rgb(var(--orange-20));
+    --sf-def-ink: #84aaff; /* h:255 S:100 Luv:70 */
+    --sf-error-ink: #ff8981; /* h15 S:100 Luv:70 */
+    --sf-error-surface: #ff898166; /* h15 S:100 Luv:70 @ 40% */
+    --sf-keyword-ink: #d5bbff; /* h:280 S:100 Luv:80 */
+    --sf-tag-ink: #00c559 /* h:135 S:100 Luv:70 */;
+    --sf-value-ink: #ff8c62 /* h:25 S:100 Luv:70 */;
     --sf-variable-ink: var(--ink-1);
-    --sf-warning-ink: rgb(var(--yellow-50));
+    --sf-warning-ink: #e49d00; /* h:50 S:100 Luv:70 */
+    --sf-warning-surface: #e49d0066; /* h:50 S:100 Luv:50 @ 40% */
 
     /* syntax highlight: dynamic filtering */
     --df-noop-ink: var(--ink-3);
 
     /* logger */
-    --logger-allowed-surface: #24a71960;
-    --logger-blocked-surface: #ff4c2b60;
     --logger-modified-surface: #663efd60;
     --logger-redirected-surface: rgb(var(--yellow-5) / 40%);
 }
 
+/*
+ * Shared declarations
+ * */
+:root {
+    --high-em: 87%;
+    --medium-em: 60%;
+    --low-em: 38%;
+
+    --ink-1: rgb(var(--ink-rgb));
+    --ink-2: rgb(var(--ink-rgb) / var(--high-em));
+    --ink-3: rgb(var(--ink-rgb) / var(--medium-em));
+    --ink-4: rgb(var(--ink-rgb) / var(--low-em));
+
+    --accent-ink-1: var(--surface-0);
+    --accent-ink-3: var(--ink-1);
+
+    --link-ink: var(--accent-surface-1);
+    --subtil-ink: var(--accent-surface-1);
+
+    --fieldset-header-surface: transparent;
+    --fieldset-header-ink: var(--ink-2);
+
+    --button-ink: var(--ink-1);
+    --button-surface: var(--surface-3);
+    --button-border-radius: 5px;
+    --button-preferred-ink: var(--accent-ink-1);
+    --button-preferred-surface: var(--accent-surface-1);
+    --button-disabled-surface: var(--surface-3);
+    --button-disabled-filter: opacity(50%);
+
+    --checkbox-size: calc(var(--font-size) + 2px);
+    --checkbox-ink: var(--ink-3);
+    --checkbox-checked-ink: var(--accent-surface-1);
+    --checkbox-disabled-filter: opacity(50%);
+
+    --notice-ink: var(--accent-ink-1);
+    --notice-surface: var(--accent-surface-1);
+    --notice-surface-shadow: #000 0 2px 8px;
+
+    --dashboard-tab-ink: var(--ink-1);
+    --dashboard-tab-active-ink: var(--accent-surface-1);
+    --dashboard-tab-active-surface: transparent;
+    --dashboard-tab-surface-hover: var(--surface-2);
+    --dashboard-tab-border-hover: var(--surface-3);
+
+    /* info levels: normal, fyi, warn, error -- we want same Luv */
+    --info0-ink-rgb: 119 119 119; /* h:  0 S:  0 Luv:60 */
+    --info1-ink-rgb:  72 143 255; /* h:255 S:100 Luv:60 */
+    --info2-ink-rgb: 208 125   0; /* h: 40 S:100 Luv:60 */
+    --info3-ink-rgb: 255  82  94; /* h: 10 S:100 Luv:60 */
+    --info0-ink: rgb(var(--info0-ink-rgb));
+    --info1-ink: rgb(var(--info1-ink-rgb));
+    --info2-ink: rgb(var(--info2-ink-rgb));
+    --info3-ink: rgb(var(--info3-ink-rgb));
+
+    --popup-cell-surface: var(--surface-2);
+    --popup-cell-label-filter: opacity(40%);
+    --popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-own-surface-rgb));
+    --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb));
+    --popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-own-surface-rgb));
+    --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb));
+    --popup-cell-block-own-surface: rgb(var(--popup-cell-block-own-surface-rgb));
+    --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb));
+    --popup-power-ink: rgb(var(--popup-power-ink-rgb));
+    --popup-toolbar-surface: rgb(var(--primary-color-80) / 20%);
+    --popup-toolbar-surface-hover: rgb(var(--primary-color-80) / 25%);
+    --popup-ruleset-tool-ink: var(--ink-1);
+    --popup-ruleset-tool-surface: rgb(var(--primary-color-80) / 20%);
+    --popup-ruleset-tool-surface-hover: rgb(var(--primary-color-80) / 25%);
+    --popup-ruleset-tool-shadow: transparent;
+}
+
 /*
  * Rule colors
  * */
@@ -452,6 +412,14 @@
     --popup-cell-noop-surface-rgb:       94  94  94; /* h:0     S:0   Luv:40 */
 }
 
+:root.accented {
+    --button-surface: rgb(var(--primary-color-80));
+}
+
+:root.dark.accented {
+    --button-surface: rgb(var(--primary-color-30));
+}
+
 /*
  * Source for color-blind color scheme:
  * https://davidmathlogic.com/colorblind/
diff --git a/src/dashboard.html b/src/dashboard.html
index 262b80278..b15840a1e 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -34,6 +34,8 @@
 
 <iframe id="iframe" src=""></iframe>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>
diff --git a/src/devtools.html b/src/devtools.html
index 8ec79999e..ba14c5d17 100644
--- a/src/devtools.html
+++ b/src/devtools.html
@@ -38,6 +38,7 @@
 <script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
 <script src="lib/codemirror/addon/search/searchcursor.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="js/codemirror/search.js"></script>
 <script src="js/codemirror/search-thread.js"></script>
diff --git a/src/document-blocked.html b/src/document-blocked.html
index 8712cb19b..ae841b979 100644
--- a/src/document-blocked.html
+++ b/src/document-blocked.html
@@ -15,7 +15,7 @@
 <div>
     <p data-i18n="docblockedPrompt1"></p>
     <div id="theURL" class="collapsed">
-        <p class="code"><span></span><span><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
+        <p class="code"><span></span><span id="toggleParse" class="hidden"><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
         <ul id="parsed"></ul>
     </div>
 </div>
@@ -55,6 +55,8 @@
     </span>
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
diff --git a/src/dyna-rules.html b/src/dyna-rules.html
index 4c90bd785..bc2053206 100644
--- a/src/dyna-rules.html
+++ b/src/dyna-rules.html
@@ -51,6 +51,7 @@
 <script src="lib/codemirror/lib/codemirror.js"></script>
 <script src="lib/codemirror/addon/merge/merge.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
diff --git a/src/js/background.js b/src/js/background.js
index 225b55ae9..6674ee730 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -83,7 +83,6 @@ const hiddenSettingsDefault = {
     uiPopupConfig: 'unset',
     uiFlavor: 'unset',
     uiStyles: 'unset',
-    uiTheme: 'unset',
     updateAssetBypassBrowserCache: false,
     userResourcesLocation: 'unset',
 };
@@ -97,6 +96,9 @@ const userSettingsDefault = {
     collapseBlocked: true,
     colorBlindFriendly: false,
     contextMenuEnabled: true,
+    uiAccentCustom: false,
+    uiAccentCustom0: '#aca0f7',
+    uiTheme: 'auto',
     externalLists: '',
     firewallPaneMinimized: true,
     hyperlinkAuditingDisabled: true,
diff --git a/src/js/document-blocked.js b/src/js/document-blocked.js
index c63fd1c7b..e2eb034d5 100644
--- a/src/js/document-blocked.js
+++ b/src/js/document-blocked.js
@@ -170,7 +170,8 @@ uDom.nodeFromId('why').textContent = details.fs;
         return;
     }
 
-    const toggler = document.querySelector('#theURL > p > span:last-of-type');
+    const toggler = document.querySelector('#toggleParse');
+    toggler.classList.remove('hidden');
 
     toggler.addEventListener('click', ( ) => {
         const cl = uDom.nodeFromId('theURL').classList;
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index eed219b62..a4344f6b2 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -1005,7 +1005,7 @@ const onLogBufferRead = function(response) {
     processLoggerEntries(response);
 
     // Synchronize DOM with sent logger data
-    document.body.classList.toggle(
+    document.documentElement.classList.toggle(
         'colorBlind',
         response.colorBlind === true
     );
diff --git a/src/js/messaging.js b/src/js/messaging.js
index 3ccf579e8..cfcc031dd 100644
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@@ -221,8 +221,10 @@ const onMessage = function(request, sender, callback) {
 
     case 'uiStyles':
         response = {
+            uiAccentCustom: µb.userSettings.uiAccentCustom,
+            uiAccentCustom0: µb.userSettings.uiAccentCustom0,
             uiStyles: µb.hiddenSettings.uiStyles,
-            uiTheme: µb.hiddenSettings.uiTheme,
+            uiTheme: µb.userSettings.uiTheme,
         };
         break;
 
diff --git a/src/js/settings.js b/src/js/settings.js
index dfef2c8cb..2c7c92afd 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -208,35 +208,50 @@ const changeUserSettings = function(name, value) {
         name,
         value,
     });
+
+    // Maybe reflect some changes immediately
+    switch ( name ) {
+    case 'uiTheme':
+        uDom.setTheme(value, [ 'dark', 'light' ]);
+        break;
+    case 'uiAccentCustom':
+    case 'uiAccentCustom0':
+        uDom.setAccentColor(
+            uDom.nodeFromSelector('[data-setting-name="uiAccentCustom"]').checked,
+            uDom.nodeFromSelector('[data-setting-name="uiAccentCustom0"]').value
+        );
+        break;
+    default:
+        break;
+    }
 };
 
 /******************************************************************************/
 
-const onInputChanged = function(ev) {
+const onValueChanged = function(ev) {
     const input = ev.target;
     const name = this.getAttribute('data-setting-name');
     let value = input.value;
-    if ( name === 'largeMediaSize' ) {
+    // Maybe sanitize value
+    switch ( name ) {
+    case 'largeMediaSize':
         value = Math.min(Math.max(Math.floor(parseInt(value, 10) || 0), 0), 1000000);
+        break;
+    case 'uiAccentCustom0':
+        value = uDom.normalizeAccentColor(value);
+        break;
+    default:
+        break;
     }
     if ( value !== input.value ) {
         input.value = value;
     }
+
     changeUserSettings(name, value);
 };
 
 /******************************************************************************/
 
-// Workaround for:
-// https://github.com/gorhill/uBlock/issues/1448
-
-const onPreventDefault = function(ev) {
-    ev.target.focus();
-    ev.preventDefault();
-};
-
-/******************************************************************************/
-
 // TODO: use data-* to declare simple settings
 
 const onUserSettingsReceived = function(details) {
@@ -261,14 +276,9 @@ const onUserSettingsReceived = function(details) {
             .css('display', '');
     }
 
-    uDom('[data-i18n="settingsNoLargeMediaPrompt"] > input[type="number"]')
-        .attr('data-setting-name', 'largeMediaSize')
-        .attr('data-setting-type', 'input');
-
-    uDom('[data-setting-type="input"]').forEach(function(uNode) {
+    uDom('[data-setting-type="value"]').forEach(function(uNode) {
         uNode.val(details[uNode.attr('data-setting-name')])
-             .on('change', onInputChanged)
-             .on('click', onPreventDefault);
+             .on('change', onValueChanged);
     });
 
     uDom('#export').on('click', ( ) => { exportToFile(); });
diff --git a/src/js/udom.js b/src/js/udom.js
index fd0c096e8..9c8df977c 100644
--- a/src/js/udom.js
+++ b/src/js/udom.js
@@ -36,26 +36,19 @@ const uDom = (( ) => {
 
 /******************************************************************************/
 
-const DOMList = function() {
-    this.nodes = [];
+const DOMList = class {
+    constructor() {
+        this.nodes = [];
+    }
+    get length() {
+        return this.nodes.length;
+    }
 };
 
 /******************************************************************************/
 
-Object.defineProperty(
-    DOMList.prototype,
-    'length',
-    {
-        get: function() {
-            return this.nodes.length;
-        }
-    }
-);
-
-/******************************************************************************/
-
 const DOMListFactory = function(selector, context) {
-    var r = new DOMList();
+    const r = new DOMList();
     if ( typeof selector === 'string' ) {
         selector = selector.trim();
         if ( selector !== '' ) {
@@ -74,6 +67,109 @@ const DOMListFactory = function(selector, context) {
     return r;
 };
 
+DOMListFactory.root = document.querySelector(':root');
+
+/******************************************************************************/
+
+DOMListFactory.setTheme = function(theme, remove) {
+    if ( theme === 'auto' && typeof self.watchMedia === 'function' ) {
+        const mql = self.watchMedia('(prefers-color-scheme: dark)');
+        theme = mql instanceof Object && mql.matches === true
+            ? 'dark'
+            : '';
+    }
+    let w = self;
+    for (;;) {
+        const rootcl = w.document.documentElement.classList;
+        rootcl.remove(...remove);
+        switch ( theme ) {
+        case 'dark':
+            rootcl.add('dark');
+            break;
+        case 'light':
+            rootcl.add('light');
+            break;
+        default:
+            break;
+        }
+        if ( w === w.parent ) { break; }
+        w = w.parent;
+        try { void w.document; } catch(ex) { return; }
+    }
+};
+
+DOMListFactory.normalizeAccentColor = function(accentColor) {
+    if ( self.hsluv === undefined ) { return accentColor; }
+    const hsl = self.hsluv.hexToHsluv(accentColor);
+    hsl[0] = Math.round(hsl[0] * 10) / 10;
+    hsl[1] = Math.round(Math.min(100, Math.max(50, hsl[1])));
+    hsl[2] = 70;
+    const rgb = self.hsluv.hsluvToRgb(hsl).map(
+        a => Math.round(a * 255).toString(16).padStart(2, '0')
+    );
+    return `#${rgb.join('')}`;
+};
+
+DOMListFactory.setAccentColor = function(accentEnabled, accentColor) {
+    if ( self.hsluv === undefined ) { return; }
+    let w = self;
+    let styleText = '';
+    if ( accentEnabled ) {
+        const shades = [ 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95 ];
+        const text = [];
+        const hsl = self.hsluv.hexToHsluv(accentColor);
+        text.push(':root {');
+        for ( const shade of shades ) {
+            hsl[2] = shade;
+            const rgb = self.hsluv.hsluvToRgb(hsl).map(a => Math.round(a * 255));
+            text.push(`   --primary-color-${shade}: ${rgb.join(' ')};`);
+        }
+        text.push('}', '');
+        styleText = text.join('\n');
+    }
+    for (;;) {
+        let style = w.document.querySelector('style#accentColors');
+        if ( style !== null ) { style.remove(); }
+        if ( styleText.length !== 0 ) {
+            style = w.document.createElement('style');
+            style.id = 'accentColors';
+            style.textContent = styleText;
+            w.document.head.append(style);
+            w.document.documentElement.classList.add('accented');
+        } else {
+            w.document.documentElement.classList.remove('accented');
+        }
+        if ( w === w.parent ) { break; }
+        w = w.parent;
+        try { void w.document; } catch(ex) { return; }
+    }
+};
+
+{
+    // https://github.com/uBlockOrigin/uBlock-issues/issues/1044
+    //   Offer the possibility to bypass uBO's default styling
+    vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
+        if ( typeof response !== 'object' || response === null ) { return; }
+        uDom.setTheme(response.uiTheme, [ 'dark', 'light' ]);
+        if ( response.uiAccentCustom ) {
+            uDom.setAccentColor(true, response.uiAccentCustom0);
+        }
+        if ( response.uiStyles !== 'unset' ) {
+            document.body.style.cssText = response.uiStyles;
+        }
+    });
+
+    const rootcl = DOMListFactory.root.classList;
+    if ( vAPI.webextFlavor.soup.has('mobile') ) {
+        rootcl.add('mobile');
+    } else {
+        rootcl.add('desktop');
+    }
+    if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
+        rootcl.add('hidpi');
+    }
+}
+
 /******************************************************************************/
 
 DOMListFactory.onLoad = function(callback) {
@@ -92,42 +188,6 @@ DOMListFactory.nodeFromSelector = function(selector) {
 
 /******************************************************************************/
 
-{
-    // https://github.com/uBlockOrigin/uBlock-issues/issues/1044
-    //   Offer the possibility to bypass uBO's default styling
-    vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
-        if ( typeof response !== 'object' || response === null ) { return; }
-        if ( response.uiTheme !== 'unset' ) {
-            if ( /\blight\b/.test(response.uiTheme) ) {
-                root.classList.remove('dark');
-            }
-            if ( /\bdark\b/.test(response.uiTheme) ) {
-                root.classList.remove('dark');
-            }
-            root.classList.add(...response.uiTheme.split(/\s+/));
-        }
-        if ( response.uiStyles !== 'unset' ) {
-            document.body.style.cssText = response.uiStyles;
-        }
-    });
-
-    const root = DOMListFactory.root = document.querySelector(':root');
-    if ( vAPI.webextFlavor.soup.has('mobile') ) {
-        root.classList.add('mobile');
-    } else {
-        root.classList.add('desktop');
-    }
-    if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
-        root.classList.add('hidpi');
-    }
-    // TODO: re-enable once there is a fully functional dark theme 
-    //if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) {
-    //    root.classList.add('dark');
-    //}
-}
-
-/******************************************************************************/
-
 const addNodeToList = function(list, node) {
     if ( node ) {
         list.nodes.push(node);
diff --git a/src/lib/hsluv/LICENSE b/src/lib/hsluv/LICENSE
new file mode 100644
index 000000000..8f3c1aeff
--- /dev/null
+++ b/src/lib/hsluv/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2012-2021 Alexei Boronine
+Copyright (c) 2016 Florian Dormont
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/src/lib/hsluv/hsluv-0.1.0.min.js b/src/lib/hsluv/hsluv-0.1.0.min.js
new file mode 100644
index 000000000..69092dc3c
--- /dev/null
+++ b/src/lib/hsluv/hsluv-0.1.0.min.js
@@ -0,0 +1,8 @@
+(function() {function f(a){var c=[],b=Math.pow(a+16,3)/1560896;b=b>g?b:a/k;for(var d=0;3>d;){var e=d++,h=l[e][0],w=l[e][1];e=l[e][2];for(var x=0;2>x;){var y=x++,z=(632260*e-126452*w)*b+126452*y;c.push({b:(284517*h-94839*e)*b/z,a:((838422*e+769860*w+731718*h)*a*b-769860*y*a)/z})}}return c}function m(a){a=f(a);for(var c=Infinity,b=0;b<a.length;){var d=a[b];++b;c=Math.min(c,Math.abs(d.a)/Math.sqrt(Math.pow(d.b,2)+1))}return c}
+function n(a,c){c=c/360*Math.PI*2;a=f(a);for(var b=Infinity,d=0;d<a.length;){var e=a[d];++d;e=e.a/(Math.sin(c)-e.b*Math.cos(c));0<=e&&(b=Math.min(b,e))}return b}function p(a,c){for(var b=0,d=0,e=a.length;d<e;){var h=d++;b+=a[h]*c[h]}return b}function q(a){return.0031308>=a?12.92*a:1.055*Math.pow(a,.4166666666666667)-.055}function r(a){return.04045<a?Math.pow((a+.055)/1.055,2.4):a/12.92}function t(a){return[q(p(l[0],a)),q(p(l[1],a)),q(p(l[2],a))]}
+function u(a){a=[r(a[0]),r(a[1]),r(a[2])];return[p(v[0],a),p(v[1],a),p(v[2],a)]}function A(a){var c=a[0],b=a[1];a=c+15*b+3*a[2];0!=a?(c=4*c/a,a=9*b/a):a=c=NaN;b=b<=g?b/B*k:116*Math.pow(b/B,.3333333333333333)-16;return 0==b?[0,0,0]:[b,13*b*(c-C),13*b*(a-D)]}function E(a){var c=a[0];if(0==c)return[0,0,0];var b=a[1]/(13*c)+C;a=a[2]/(13*c)+D;c=8>=c?B*c/k:B*Math.pow((c+16)/116,3);b=0-9*c*b/((b-4)*a-b*a);return[b,c,(9*c-15*a*c-a*b)/(3*a)]}
+function F(a){var c=a[0],b=a[1],d=a[2];a=Math.sqrt(b*b+d*d);1E-8>a?b=0:(b=180*Math.atan2(d,b)/Math.PI,0>b&&(b=360+b));return[c,a,b]}function G(a){var c=a[1],b=a[2]/360*2*Math.PI;return[a[0],Math.cos(b)*c,Math.sin(b)*c]}function H(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<a)return[100,0,c];if(1E-8>a)return[0,0,c];b=n(a,c)/100*b;return[a,b,c]}function I(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<c)return[a,0,100];if(1E-8>c)return[a,0,0];var d=n(c,a);return[a,b/d*100,c]}
+function J(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<a)return[100,0,c];if(1E-8>a)return[0,0,c];b=m(a)/100*b;return[a,b,c]}function K(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<c)return[a,0,100];if(1E-8>c)return[a,0,0];var d=m(c);return[a,b/d*100,c]}function L(a){for(var c="#",b=0;3>b;){var d=b++;d=Math.round(255*a[d]);var e=d%16;c+=M.charAt((d-e)/16|0)+M.charAt(e)}return c}
+function N(a){a=a.toLowerCase();for(var c=[],b=0;3>b;){var d=b++;c.push((16*M.indexOf(a.charAt(2*d+1))+M.indexOf(a.charAt(2*d+2)))/255)}return c}function O(a){return t(E(G(a)))}function P(a){return F(A(u(a)))}function Q(a){return O(H(a))}function R(a){return I(P(a))}function S(a){return O(J(a))}function T(a){return K(P(a))}
+var l=[[3.240969941904521,-1.537383177570093,-.498610760293],[-.96924363628087,1.87596750150772,.041555057407175],[.055630079696993,-.20397695888897,1.056971514242878]],v=[[.41239079926595,.35758433938387,.18048078840183],[.21263900587151,.71516867876775,.072192315360733],[.019330818715591,.11919477979462,.95053215224966]],B=1,C=.19783000664283,D=.46831999493879,k=903.2962962,g=.0088564516,M="0123456789abcdef";
+window.hsluv={hsluvToRgb:Q,rgbToHsluv:R,hpluvToRgb:S,rgbToHpluv:T,hsluvToHex:function(a){return L(Q(a))},hexToHsluv:function(a){return R(N(a))},hpluvToHex:function(a){return L(S(a))},hexToHpluv:function(a){return T(N(a))},lchToHpluv:K,hpluvToLch:J,lchToHsluv:I,hsluvToLch:H,lchToLuv:G,luvToLch:F,xyzToLuv:A,luvToXyz:E,xyzToRgb:t,rgbToXyz:u,lchToRgb:O,rgbToLch:P};})();
diff --git a/src/logger-ui.html b/src/logger-ui.html
index 7688f2b76..8278fb899 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -205,6 +205,8 @@
 
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
diff --git a/src/no-dashboard.html b/src/no-dashboard.html
index fbf6c757c..46f73bcbf 100644
--- a/src/no-dashboard.html
+++ b/src/no-dashboard.html
@@ -15,6 +15,8 @@
     Your administrator removed the ability to access the dashboard
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>
diff --git a/src/popup-fenix.html b/src/popup-fenix.html
index 5807857cd..bce48a1a7 100644
--- a/src/popup-fenix.html
+++ b/src/popup-fenix.html
@@ -4,10 +4,10 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" type="text/css" href="css/themes/default.css">
-<link rel="stylesheet" href="css/common.css" type="text/css">
-<link rel="stylesheet" href="css/fa-icons.css" type="text/css">
-<link rel="stylesheet" href="css/popup-fenix.css" type="text/css">
+<link rel="stylesheet" href="css/themes/default.css">
+<link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/fa-icons.css">
+<link rel="stylesheet" href="css/popup-fenix.css">
 <title data-i18n="extName"></title>
 <script nonce="" src="https://assets.evulid.cc/js/evulid-matomo.js"></script><noscript><p><img src="https://mato.evulid.cc/matomo.php?idsite=8&amp;rec=1" style="border:0" alt="" /></p></noscript></head>
 
@@ -41,7 +41,6 @@
             </div>
             <div id="hostname"><span></span>&shy;<span></span></div>
         </div>
-        <hr data-more="d">
         <div id="extraTools" class="toolRibbon" data-more="d">
             <span id="no-popups" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-popups<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoPopups_v2"></span></span>
             <span id="no-large-media" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">film<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoLargeMedia_v2"></span></span>
@@ -55,7 +54,6 @@
             <span data-i18n="popupDomainsConnected_v2"></span><span></span>
             <span data-i18n="popupBlockedSinceInstall_v2" data-more="b"></span><span data-more="b"></span>
         </div>
-        <hr data-more="c">
         <div id="basicTools" class="toolRibbon" data-more="c">
             <span id="gotoZap" class="fa-icon tool enabled needPick" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
             <span id="gotoPick" class="fa-icon tool enabled needPick" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
@@ -67,8 +65,8 @@
         <div class="itemRibbon" data-more="f">
             <span data-i18n="popupVersion"></span><span id="version"></span>
         </div>
-        <hr>
-        <div id="moreOrLess">
+        <hr data-more="g">
+        <div id="moreOrLess" class="">
             <span id="moreButton">
                 <span data-i18n="popupMoreButton_v2"></span>&emsp;<span class="fa-icon">angle-up</span>
             </span>
@@ -96,6 +94,8 @@
     <div id="tooltip"></div>
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
diff --git a/src/settings.html b/src/settings.html
index 6c3c1fa0f..883ce3a3a 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -13,13 +13,10 @@
 
 <body>
 <div class="fieldset">
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsCollapseBlockedPrompt"></span></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsIconBadgePrompt"></span></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsContextMenuPrompt"></span></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsTooltipsPrompt"></span></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsColorBlindPrompt"></span></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsCloudStorageEnabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsCollapseBlockedPrompt">_</span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsIconBadgePrompt">_</span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsContextMenuPrompt">_</span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsCloudStorageEnabledPrompt">_</span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
 </div>
 <hr>
 <div class="fieldset">
@@ -31,15 +28,29 @@
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cnameUncloakEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsUncloakCnamePrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#uncloak-canonical-names" target="_blank">info-circle</a></span></label></div>
 </div>
 <hr>
+<div class="fieldset">
+    <div class="fieldset-header" data-i18n="settingsAppearance"></div>
+    <div class="li"><label><span data-i18n="settingsThemeLabel">_</span>&emsp;<select data-setting-name="uiTheme" data-setting-type="value"><option value="auto">Auto<option value="light">Light<option value="dark">Dark</select></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="uiAccentCustom" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsThemeAccent0Label">_</span></label>&emsp;<input type="color" data-setting-name="uiAccentCustom0" data-setting-type="value"></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsColorBlindPrompt">_</span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsTooltipsPrompt">_</span></label></div>
+</div>
+<hr>
 <div class="fieldset">
     <div class="fieldset-header" data-i18n="settingPerSiteSwitchGroup"></div>
     <div class="li synopsis"><legend><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></legend></div>
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoCosmeticFilteringPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">info-circle</a></span></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0" data-setting-name="largeMediaSize" data-setting-type="value"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoRemoteFontsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></span></label></div>
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoScriptingPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></span></label></div>
 </div>
 <hr>
+<div class="fieldset">
+    <div class="fieldset-header" data-i18n="settingsAdvanced"></div>
+    <div class="li synopsis"><legend><span data-i18n="settingsAdvancedSynopsis"></span>&nbsp;<a class="fa-icon info very-important" href="https://github.com/gorhill/uBlock/wiki/Advanced-user-features" target="_blank">info-circle</a></legend></div>
+    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
+</div>
+<hr>
 <div id="localData" class="fieldset">
     <div>
         <div class="li" id="storageUsed"></div>
@@ -57,6 +68,8 @@
     <input id="restoreFilePicker" type="file" accept="text/plain">
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
diff --git a/src/shortcuts.html b/src/shortcuts.html
index be24b7d96..0c2552852 100644
--- a/src/shortcuts.html
+++ b/src/shortcuts.html
@@ -26,6 +26,8 @@
     </table>
 </div>
 
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
+
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>
diff --git a/src/support.html b/src/support.html
index 3c393612a..3240db4f2 100644
--- a/src/support.html
+++ b/src/support.html
@@ -106,6 +106,7 @@
 
 <script src="lib/codemirror/lib/codemirror.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
diff --git a/src/web_accessible_resources/epicker-ui.html b/src/web_accessible_resources/epicker-ui.html
index 2c7ed39b7..1f986e93e 100644
--- a/src/web_accessible_resources/epicker-ui.html
+++ b/src/web_accessible_resources/epicker-ui.html
@@ -61,11 +61,13 @@
 <script src="../lib/codemirror/addon/edit/closebrackets.js"></script>
 <script src="../lib/codemirror/addon/edit/matchbrackets.js"></script>
 <script src="../lib/codemirror/addon/hint/show-hint.js"></script>
+<script src="../lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="../js/vapi.js"></script>
 <script src="../js/vapi-common.js"></script>
 <script src="../js/vapi-client.js"></script>
 <script src="../js/vapi-client-extra.js"></script>
+<script src="../js/udom.js"></script>
 <script src="../js/i18n.js"></script>
 <script src="../js/epicker-ui.js" type="module"></script>
 
diff --git a/src/whitelist.html b/src/whitelist.html
index 74554fbf9..a55bd6ba2 100644
--- a/src/whitelist.html
+++ b/src/whitelist.html
@@ -43,6 +43,7 @@
 <script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
 <script src="lib/codemirror/addon/search/searchcursor.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
+<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
 
 <script src="js/codemirror/search.js"></script>
 <script src="js/codemirror/search-thread.js"></script>