Add advanced setting to force a light/dark theme

Related feedback:
- uBlockOrigin/uBlock-issues#401 (comment)

Name: `uiTheme`
Default: `unset`
Values:
- `unset`: uBO will pick the theme according to
  browser's `prefers-color-scheme`
- `light`: force light scheme
- `dark`: force dark theme

This advanced setting is not to be documented yet as
it has not been decided this is a long term solution.

src/css/logger-ui-inspector.css

@@ -14,7 +14,7 @@
     padding-left: 0.5em;
     }
 #domInspector ul {
-    background-color: #fff;
+    background-color: var(--default-surface);
     margin: 0;
     padding-left: 1em;
     }
@@ -37,7 +37,7 @@
     color: #aaa;
     }
 #domInspector li > span:first-child {
-    color: #000;
+    color: var(--default-ink);
     cursor: default;
     font-size: 1rem;
     margin-right: 0;

src/css/logger-ui.css

@@ -12,7 +12,7 @@ textarea {
     width: 100%;
     }
 .permatoolbar {
-    background-color: white;
+    background-color: var(--default-surface);
     border: 0;
     box-sizing: border-box;
     display: flex;
@@ -34,7 +34,7 @@ textarea {
     fill: #5F9EA0;
     }
 .permatoolbar .button:hover {
-    background-color: #eee;
+    background-color: var(--default-surface-hover);
     }
 #pageSelector {
     min-width: 10em;
@@ -135,7 +135,7 @@ body[dir="rtl"] #pageSelector {
     transform: scaleY(1);
     }
 #netInspector #filterExprPicker {
-    background-color: white;
+    background-color: var(--default-surface);
     border: 1px solid gray;
     display: none;
     position: absolute;
@@ -445,7 +445,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
     }
 
 #popupContainer {
-    background: white;
+    background-color: var(--default-surface);
     border: 1px solid gray;
     bottom: 0;
     display: none;
@@ -481,7 +481,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
     position: relative;
     }
 #modalOverlay > div > div:nth-of-type(1) {
-    background-color: white;
+    background-color: var(--default-surface);
     border: 0;
     box-sizing: border-box;
     padding: 1em;
@@ -490,13 +490,13 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
     width: 90vw;
     }
 #modalOverlay > div > div:nth-of-type(2) {
-    stroke: #000;
+    stroke: var(--default-ink);
     stroke-width: 3px;
     position: absolute;
     width: 1.6em;
     height: 1.6em;
     bottom: calc(100% + 2px);
-    background-color: white;
+    background-color: var(--default-surface);
     }
 body[dir="ltr"] #modalOverlay > div > div:nth-of-type(2) {
     right: 0;
@@ -505,7 +505,7 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
     left: 0;
     }
 #modalOverlay > div > div:nth-of-type(2):hover {
-    background-color: #eee;
+    background-color: var(--default-surface-hover);
     }
 #modalOverlay > div > div:nth-of-type(2) > * {
     pointer-events: none;

src/js/background.js

@@ -77,6 +77,7 @@ const µBlock = (( ) => { // jshint ignore:line
         uiPopupConfig: 'undocumented',
         uiFlavor: 'unset',
         uiStyles: 'unset',
+        uiTheme: 'unset',
         updateAssetBypassBrowserCache: false,
         userResourcesLocation: 'unset',
     };

src/js/messaging.js

@@ -160,7 +160,10 @@ const onMessage = function(request, sender, callback) {
         break;
 
     case 'uiStyles':
-        response = µb.hiddenSettings.uiStyles;
+        response = {
+            uiStyles: µb.hiddenSettings.uiStyles,
+            uiTheme: µb.hiddenSettings.uiTheme,
+        };
         break;
 
     case 'userSettings':

src/js/udom.js

@@ -93,6 +93,22 @@ 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 ( response.uiTheme === 'light' ) {
+                root.classList.remove('dark');
+            } else if ( response.uiTheme === 'dark' ) {
+                root.classList.add('dark');
+            }
+        }
+        if ( response.uiStyles !== 'unset' ) {
+            document.body.style.cssText = response;
+        }
+    });
+
     const root = DOMListFactory.root = document.querySelector(':root');
     if ( vAPI.webextFlavor.soup.has('mobile') ) {
         root.classList.add('mobile');
@@ -105,13 +121,6 @@ DOMListFactory.nodeFromSelector = function(selector) {
     if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) {
         root.classList.add('dark');
     }
-
-    // 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 !== 'string' || response === 'unset' ) { return; }
-        document.body.style.cssText = response;
-    });
 }
 
 /******************************************************************************/