From caeb848c5677a98a0651eead911cebd26ab232ad Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sun, 12 Mar 2023 11:20:54 -0400
Subject: [PATCH] Fix race condition when looking up current auto/light/dark
 theme

Related feedback:
- https://github.com/gorhill/uBlock/commit/e2dd008388340a3cc18d57c959ee9d3d6ace6d02#commitcomment-104105757
---
 src/js/code-viewer.js | 13 +++++++++----
 src/js/theme.js       | 11 +++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/js/code-viewer.js b/src/js/code-viewer.js
index 6479672c9..0a95a34a6 100644
--- a/src/js/code-viewer.js
+++ b/src/js/code-viewer.js
@@ -26,6 +26,7 @@
 /******************************************************************************/
 
 import { dom, qs$ } from './dom.js';
+import { getActualTheme } from './theme.js';
 
 /******************************************************************************/
 
@@ -45,10 +46,14 @@ const cmEditor = new CodeMirror(qs$('#content'), {
 });
 
 uBlockDashboard.patchCodeMirrorEditor(cmEditor);
-if ( dom.cl.has(dom.html, 'dark') ) {
-    dom.cl.add('#content .cm-s-default', 'cm-s-night');
-    dom.cl.remove('#content .cm-s-default', 'cm-s-default');
-}
+
+vAPI.messaging.send('dom', { what: 'uiStyles' }).then(response => {
+    if ( typeof response !== 'object' || response === null ) { return; }
+    if ( getActualTheme(response.uiTheme) === 'dark' ) {
+        dom.cl.add('#content .cm-s-default', 'cm-s-night');
+        dom.cl.remove('#content .cm-s-default', 'cm-s-default');
+    }
+});
 
 // Convert resource URLs into clickable links to code viewer
 cmEditor.addOverlay({
diff --git a/src/js/theme.js b/src/js/theme.js
index 0d40b8a7d..3bf837f2a 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -21,8 +21,9 @@
 
 'use strict';
 
-function setTheme(theme, propagate = false) {
-    if ( theme === 'auto' ) {
+function getActualTheme(nominalTheme) {
+    let theme = nominalTheme || 'light';
+    if ( nominalTheme === 'auto' ) {
         if ( typeof self.matchMedia === 'function' ) {
             const mql = self.matchMedia('(prefers-color-scheme: dark)');
             theme = mql instanceof Object && mql.matches === true
@@ -32,6 +33,11 @@ function setTheme(theme, propagate = false) {
             theme = 'light';
         }
     }
+    return theme;
+}
+
+function setTheme(theme, propagate = false) {
+    theme = getActualTheme(theme);
     let w = self;
     for (;;) {
         const rootcl = w.document.documentElement.classList;
@@ -139,6 +145,7 @@ function setAccentColor(
 }
 
 export {
+    getActualTheme,
     setTheme,
     setAccentColor,
 };