From c38682221c3678071358ee2a958060aa14420f7c Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Wed, 2 Feb 2022 18:38:28 -0500
Subject: [PATCH] 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
---
 src/css/themes/default.css | 63 +++++++++++++++++++++++++-------------
 src/js/udom.js             | 30 +++++++++---------
 2 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index cd4418a5e..5846fc421 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -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));
diff --git a/src/js/udom.js b/src/js/udom.js
index 5fd00d25a..3913b6ed3 100644
--- a/src/js/udom.js
+++ b/src/js/udom.js
@@ -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);
         }