Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Raymond Hill 2022-02-02 18:38:28 -05:00
parent c61fe6a72b
commit c38682221c
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 57 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/css/themes/default.css
View File

@ -153,6 +153,46 @@
--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
*
@ -173,12 +213,6 @@
--ink-rgb: var(--ink-80);
--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-2: rgb(var(--gray-70));
--border-3: rgb(var(--gray-65));
@ -245,16 +279,6 @@
--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 */
:root.dark {
--elevation-down-surface: black;
@ -267,11 +291,6 @@
--ink-rgb: var(--gray-95);
--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-2: rgb(var(--gray-40));
--border-3: rgb(var(--gray-45));
@ -327,6 +346,8 @@
--medium-em: 60%;
--low-em: 38%;
--surface-0: rgb(var(--surface-0-rgb));
--ink-1: rgb(var(--ink-rgb));
--ink-2: rgb(var(--ink-rgb) / var(--high-em));
--ink-3: rgb(var(--ink-rgb) / var(--medium-em));

30
src/js/udom.js
View File

@ -71,26 +71,26 @@ DOMListFactory.root = document.querySelector(':root');
/******************************************************************************/
DOMListFactory.setTheme = function(theme, remove) {
if ( theme === 'auto' && typeof self.matchMedia === 'function' ) {
const mql = self.matchMedia('(prefers-color-scheme: dark)');
theme = mql instanceof Object && mql.matches === true
? 'dark'
: '';
DOMListFactory.setTheme = function(theme) {
if ( theme === 'auto' ) {
if ( typeof self.matchMedia === 'function' ) {
const mql = self.matchMedia('(prefers-color-scheme: dark)');
theme = mql instanceof Object && mql.matches === true
? 'dark'
: 'light';
} else {
theme = 'light';
}
}
let w = self;
for (;;) {
const rootcl = w.document.documentElement.classList;
rootcl.remove(...remove);
switch ( theme ) {
case 'dark':
if ( theme === 'dark' ) {
rootcl.add('dark');
break;
case 'light':
rootcl.remove('light');
} else /* if ( theme === 'light' ) */ {
rootcl.add('light');
break;
default:
break;
rootcl.remove('dark');
}
if ( w === w.parent ) { break; }
w = w.parent;
@ -150,7 +150,7 @@ DOMListFactory.setAccentColor = function(accentEnabled, accentColor) {
// Offer the possibility to bypass uBO's default styling
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
if ( typeof response !== 'object' || response === null ) { return; }
uDom.setTheme(response.uiTheme, [ 'dark', 'light' ]);
uDom.setTheme(response.uiTheme);
if ( response.uiAccentCustom ) {
uDom.setAccentColor(true, response.uiAccentCustom0);
}