Add advanced setting to force a light/dark theme

gorhill · gorhill · commit e3a6d8465f19 · 2020-10-03T07:13:40.000-04:00
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.
diff --git a/src/css/logger-ui-inspector.css b/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;
diff --git a/src/css/logger-ui.css b/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;
diff --git a/src/js/background.js b/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',
     };
diff --git a/src/js/messaging.js b/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':
diff --git a/src/js/udom.js b/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;
-    });
 }
 
 /******************************************************************************/

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`padding-left: 0.5em;`
`15`	`15`	`}`
`16`	`16`	`#domInspector ul {`
`17`		`- background-color: #fff;`
	`17`	`+ background-color: var(--default-surface);`
`18`	`18`	`margin: 0;`
`19`	`19`	`padding-left: 1em;`
`20`	`20`	`}`
`@@ -37,7 +37,7 @@`
`37`	`37`	`color: #aaa;`
`38`	`38`	`}`
`39`	`39`	`#domInspector li > span:first-child {`
`40`		`- color: #000;`
	`40`	`+ color: var(--default-ink);`
`41`	`41`	`cursor: default;`
`42`	`42`	`font-size: 1rem;`
`43`	`43`	`margin-right: 0;`