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.
This commit is contained in:
Raymond Hill 2020-10-03 07:13:40 -04:00
parent b179dc0268
commit e3a6d8465f
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
5 changed files with 31 additions and 18 deletions

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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':

View File

@ -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;
});
}
/******************************************************************************/