mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-03 17:49:39 +02:00
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:
parent
b179dc0268
commit
e3a6d8465f
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -77,6 +77,7 @@ const µBlock = (( ) => { // jshint ignore:line
|
||||
uiPopupConfig: 'undocumented',
|
||||
uiFlavor: 'unset',
|
||||
uiStyles: 'unset',
|
||||
uiTheme: 'unset',
|
||||
updateAssetBypassBrowserCache: false,
|
||||
userResourcesLocation: 'unset',
|
||||
};
|
||||
|
@ -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':
|
||||
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
Loading…
Reference in New Issue
Block a user