mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-18 17:02:27 +02:00
Reduce background color flash through usage of prefers-color-scheme
uBO will use the information from prefers-color-scheme to reduce likelihood of background color flash. However this works only for when prefers-color-scheme is properly set by the browser, and only when uBO's theme selection is "auto", or when it happens to match that of prefers-color-scheme. Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/1284
This commit is contained in:
parent
c61fe6a72b
commit
c38682221c
@ -153,6 +153,46 @@
|
|||||||
--primary-color-95: 240 239 254; /* S:90 Luv:95 */
|
--primary-color-95: 240 239 254; /* S:90 Luv:95 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Default dark theme starts here
|
||||||
|
*
|
||||||
|
* https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
|
||||||
|
* Assign a default background color if dark mode is enabled -- hopefully
|
||||||
|
* this will avoid flashes of white background until the document's own CSS
|
||||||
|
* overrides the default color value below.
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--surface-0-rgb: 255 255 255;
|
||||||
|
--surface-1: rgb(var(--gray-95));
|
||||||
|
--surface-2: rgb(var(--gray-90));
|
||||||
|
--surface-3: rgb(var(--gray-80));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--surface-0-rgb: 0 0 0;
|
||||||
|
--surface-1: rgb(var(--gray-10));
|
||||||
|
--surface-2: rgb(var(--gray-20));
|
||||||
|
--surface-3: rgb(var(--gray-30));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.light {
|
||||||
|
--surface-0-rgb: 255 255 255;
|
||||||
|
--surface-1: rgb(var(--gray-95));
|
||||||
|
--surface-2: rgb(var(--gray-90));
|
||||||
|
--surface-3: rgb(var(--gray-80));
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark {
|
||||||
|
--surface-0-rgb: 0 0 0;
|
||||||
|
--surface-1: rgb(var(--gray-10));
|
||||||
|
--surface-2: rgb(var(--gray-20));
|
||||||
|
--surface-3: rgb(var(--gray-30));
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Components
|
* Components
|
||||||
*
|
*
|
||||||
@ -173,12 +213,6 @@
|
|||||||
--ink-rgb: var(--ink-80);
|
--ink-rgb: var(--ink-80);
|
||||||
--ink-0: black;
|
--ink-0: black;
|
||||||
|
|
||||||
--surface-0-rgb: 255 255 255;
|
|
||||||
--surface-0: rgb(var(--surface-0-rgb));
|
|
||||||
--surface-1: rgb(var(--gray-95));
|
|
||||||
--surface-2: rgb(var(--gray-90));
|
|
||||||
--surface-3: rgb(var(--gray-80));
|
|
||||||
|
|
||||||
--border-1: rgb(var(--gray-75));
|
--border-1: rgb(var(--gray-75));
|
||||||
--border-2: rgb(var(--gray-70));
|
--border-2: rgb(var(--gray-70));
|
||||||
--border-3: rgb(var(--gray-65));
|
--border-3: rgb(var(--gray-65));
|
||||||
@ -245,16 +279,6 @@
|
|||||||
--logger-modified-em-surface: #0000c028;
|
--logger-modified-em-surface: #0000c028;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Default dark theme starts here
|
|
||||||
*
|
|
||||||
* https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
|
|
||||||
* Assign a default background color if dark mode is enabled -- hopefully
|
|
||||||
* this will avoid flashes of white background until the document's own CSS
|
|
||||||
* overrides the default color value below.
|
|
||||||
*
|
|
||||||
* */
|
|
||||||
|
|
||||||
/* https://material.io/design/color/dark-theme.html */
|
/* https://material.io/design/color/dark-theme.html */
|
||||||
:root.dark {
|
:root.dark {
|
||||||
--elevation-down-surface: black;
|
--elevation-down-surface: black;
|
||||||
@ -267,11 +291,6 @@
|
|||||||
--ink-rgb: var(--gray-95);
|
--ink-rgb: var(--gray-95);
|
||||||
--ink-0: white;
|
--ink-0: white;
|
||||||
|
|
||||||
--surface-0-rgb: 0 0 0;
|
|
||||||
--surface-1: rgb(var(--gray-10));
|
|
||||||
--surface-2: rgb(var(--gray-20));
|
|
||||||
--surface-3: rgb(var(--gray-30));
|
|
||||||
|
|
||||||
--border-1: rgb(var(--gray-35));
|
--border-1: rgb(var(--gray-35));
|
||||||
--border-2: rgb(var(--gray-40));
|
--border-2: rgb(var(--gray-40));
|
||||||
--border-3: rgb(var(--gray-45));
|
--border-3: rgb(var(--gray-45));
|
||||||
@ -327,6 +346,8 @@
|
|||||||
--medium-em: 60%;
|
--medium-em: 60%;
|
||||||
--low-em: 38%;
|
--low-em: 38%;
|
||||||
|
|
||||||
|
--surface-0: rgb(var(--surface-0-rgb));
|
||||||
|
|
||||||
--ink-1: rgb(var(--ink-rgb));
|
--ink-1: rgb(var(--ink-rgb));
|
||||||
--ink-2: rgb(var(--ink-rgb) / var(--high-em));
|
--ink-2: rgb(var(--ink-rgb) / var(--high-em));
|
||||||
--ink-3: rgb(var(--ink-rgb) / var(--medium-em));
|
--ink-3: rgb(var(--ink-rgb) / var(--medium-em));
|
||||||
|
@ -71,26 +71,26 @@ DOMListFactory.root = document.querySelector(':root');
|
|||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
DOMListFactory.setTheme = function(theme, remove) {
|
DOMListFactory.setTheme = function(theme) {
|
||||||
if ( theme === 'auto' && typeof self.matchMedia === 'function' ) {
|
if ( theme === 'auto' ) {
|
||||||
const mql = self.matchMedia('(prefers-color-scheme: dark)');
|
if ( typeof self.matchMedia === 'function' ) {
|
||||||
theme = mql instanceof Object && mql.matches === true
|
const mql = self.matchMedia('(prefers-color-scheme: dark)');
|
||||||
? 'dark'
|
theme = mql instanceof Object && mql.matches === true
|
||||||
: '';
|
? 'dark'
|
||||||
|
: 'light';
|
||||||
|
} else {
|
||||||
|
theme = 'light';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
let w = self;
|
let w = self;
|
||||||
for (;;) {
|
for (;;) {
|
||||||
const rootcl = w.document.documentElement.classList;
|
const rootcl = w.document.documentElement.classList;
|
||||||
rootcl.remove(...remove);
|
if ( theme === 'dark' ) {
|
||||||
switch ( theme ) {
|
|
||||||
case 'dark':
|
|
||||||
rootcl.add('dark');
|
rootcl.add('dark');
|
||||||
break;
|
rootcl.remove('light');
|
||||||
case 'light':
|
} else /* if ( theme === 'light' ) */ {
|
||||||
rootcl.add('light');
|
rootcl.add('light');
|
||||||
break;
|
rootcl.remove('dark');
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
if ( w === w.parent ) { break; }
|
if ( w === w.parent ) { break; }
|
||||||
w = w.parent;
|
w = w.parent;
|
||||||
@ -150,7 +150,7 @@ DOMListFactory.setAccentColor = function(accentEnabled, accentColor) {
|
|||||||
// Offer the possibility to bypass uBO's default styling
|
// Offer the possibility to bypass uBO's default styling
|
||||||
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
|
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
|
||||||
if ( typeof response !== 'object' || response === null ) { return; }
|
if ( typeof response !== 'object' || response === null ) { return; }
|
||||||
uDom.setTheme(response.uiTheme, [ 'dark', 'light' ]);
|
uDom.setTheme(response.uiTheme);
|
||||||
if ( response.uiAccentCustom ) {
|
if ( response.uiAccentCustom ) {
|
||||||
uDom.setAccentColor(true, response.uiAccentCustom0);
|
uDom.setAccentColor(true, response.uiAccentCustom0);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user