From e3a6d8465f19f4ef5d84ceddb9570644cf4fc0a3 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Sat, 3 Oct 2020 07:13:40 -0400 Subject: [PATCH] Add advanced setting to force a light/dark theme Related feedback: - https://github.com/uBlockOrigin/uBlock-issues/issues/401#issuecomment-703075797 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 | 4 ++-- src/css/logger-ui.css | 16 ++++++++-------- src/js/background.js | 1 + src/js/messaging.js | 5 ++++- src/js/udom.js | 23 ++++++++++++++++------- 5 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/css/logger-ui-inspector.css b/src/css/logger-ui-inspector.css index e7d45e2868e36..acfd5c5638c4d 100644 --- 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 index ee158c579e653..b85edceba1b70 100644 --- 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 index 2ff449f7a40f2..a9990b90f492c 100644 --- 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 index e6f6230283978..0b541caf50a0b 100644 --- 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 index cd032fb0c8edf..baf78a6b4d1b1 100644 --- 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; - }); } /******************************************************************************/