fix: propagate preferred color scheme to the renderer (#22896)

* fix: do not crash if the window is closed syncronously with a nativeTheme change

* fix: propogate preferred color scheme to the renderer and keep it up to date

shell/browser/api/electron_api_native_theme.cc

@@ -23,14 +23,16 @@ namespace electron {
 
 namespace api {
 
-NativeTheme::NativeTheme(v8::Isolate* isolate, ui::NativeTheme* theme)
+NativeTheme::NativeTheme(v8::Isolate* isolate,
-    : theme_(theme) {
+                         ui::NativeTheme* ui_theme,
-  theme_->AddObserver(this);
+                         ui::NativeTheme* web_theme)
+    : ui_theme_(ui_theme), web_theme_(web_theme) {
+  ui_theme_->AddObserver(this);
   Init(isolate);
 }
 
 NativeTheme::~NativeTheme() {
-  theme_->RemoveObserver(this);
+  ui_theme_->RemoveObserver(this);
 }
 
 void NativeTheme::OnNativeThemeUpdatedOnUI() {
@@ -44,7 +46,8 @@ void NativeTheme::OnNativeThemeUpdated(ui::NativeTheme* theme) {
 }
 
 void NativeTheme::SetThemeSource(ui::NativeTheme::ThemeSource override) {
-  theme_->set_theme_source(override);
+  ui_theme_->set_theme_source(override);
+  web_theme_->set_theme_source(override);
 #if defined(OS_MACOSX)
   // Update the macOS appearance setting for this new override value
   UpdateMacOSAppearanceForOverrideValue(override);
@@ -59,15 +62,15 @@ void NativeTheme::SetThemeSource(ui::NativeTheme::ThemeSource override) {
 }
 
 ui::NativeTheme::ThemeSource NativeTheme::GetThemeSource() const {
-  return theme_->theme_source();
+  return ui_theme_->theme_source();
 }
 
 bool NativeTheme::ShouldUseDarkColors() {
-  return theme_->ShouldUseDarkColors();
+  return ui_theme_->ShouldUseDarkColors();
 }
 
 bool NativeTheme::ShouldUseHighContrastColors() {
-  return theme_->UsesHighContrastColors();
+  return ui_theme_->UsesHighContrastColors();
 }
 
 #if defined(OS_MACOSX)
@@ -92,8 +95,11 @@ bool NativeTheme::ShouldUseInvertedColorScheme() {
 
 // static
 v8::Local<v8::Value> NativeTheme::Create(v8::Isolate* isolate) {
-  ui::NativeTheme* theme = ui::NativeTheme::GetInstanceForNativeUi();
+  ui::NativeTheme* ui_theme = ui::NativeTheme::GetInstanceForNativeUi();
-  return gin::CreateHandle(isolate, new NativeTheme(isolate, theme)).ToV8();
+  ui::NativeTheme* web_theme = ui::NativeTheme::GetInstanceForWeb();
+  return gin::CreateHandle(isolate,
+                           new NativeTheme(isolate, ui_theme, web_theme))
+      .ToV8();
 }
 
 // static

shell/browser/api/electron_api_native_theme.h

@@ -22,7 +22,9 @@ class NativeTheme : public gin_helper::EventEmitter<NativeTheme>,
                              v8::Local<v8::FunctionTemplate> prototype);
 
  protected:
-  NativeTheme(v8::Isolate* isolate, ui::NativeTheme* theme);
+  NativeTheme(v8::Isolate* isolate,
+              ui::NativeTheme* ui_theme,
+              ui::NativeTheme* web_theme);
   ~NativeTheme() override;
 
   void SetThemeSource(ui::NativeTheme::ThemeSource override);
@@ -40,7 +42,8 @@ class NativeTheme : public gin_helper::EventEmitter<NativeTheme>,
   void OnNativeThemeUpdatedOnUI();
 
  private:
-  ui::NativeTheme* theme_;
+  ui::NativeTheme* ui_theme_;
+  ui::NativeTheme* web_theme_;
 
   DISALLOW_COPY_AND_ASSIGN(NativeTheme);
 };

shell/browser/electron_browser_client.cc

@@ -524,6 +524,11 @@ void ElectronBrowserClient::OverrideWebkitPrefs(
   prefs->picture_in_picture_enabled = false;
 #endif
 
+  ui::NativeTheme* native_theme = ui::NativeTheme::GetInstanceForNativeUi();
+  prefs->preferred_color_scheme = native_theme->ShouldUseDarkColors()
+                                      ? blink::PreferredColorScheme::kDark
+                                      : blink::PreferredColorScheme::kLight;
+
   SetFontDefaults(prefs);
 
   // Custom preferences of guest page.

shell/browser/native_window.h

@@ -198,6 +198,7 @@ class NativeWindow : public base::SupportsUserData,
 #if defined(OS_MACOSX)
   virtual void SetTrafficLightPosition(const gfx::Point& position) = 0;
   virtual gfx::Point GetTrafficLightPosition() const = 0;
+  virtual void RedrawTrafficLights() = 0;
 #endif
 
   // Touchbar API

shell/browser/native_window_mac.h

@@ -150,7 +150,7 @@ class NativeWindowMac : public NativeWindow, public ui::NativeThemeObserver {
   void SetWindowLevel(int level);
 
   // Custom traffic light positioning
-  void RedrawTrafficLights();
+  void RedrawTrafficLights() override;
   void SetExitingFullScreen(bool flag);
   void SetTrafficLightPosition(const gfx::Point& position) override;
   gfx::Point GetTrafficLightPosition() const override;

shell/browser/native_window_mac.mm

@@ -700,9 +700,9 @@ void NativeWindowMac::SetExitingFullScreen(bool flag) {
 }
 
 void NativeWindowMac::OnNativeThemeUpdated(ui::NativeTheme* observed_theme) {
-  base::PostTask(FROM_HERE, {content::BrowserThread::UI},
+  base::PostTask(
-                 base::BindOnce(&NativeWindowMac::RedrawTrafficLights,
+      FROM_HERE, {content::BrowserThread::UI},
-                                base::Unretained(this)));
+      base::BindOnce(&NativeWindow::RedrawTrafficLights, GetWeakPtr()));
 }
 
 bool NativeWindowMac::IsEnabled() {

spec-main/api-native-theme-spec.ts

@@ -1,10 +1,12 @@
 import { expect } from 'chai';
-import { nativeTheme, systemPreferences } from 'electron';
+import { nativeTheme, systemPreferences, BrowserWindow } from 'electron';
 import * as os from 'os';
+import * as path from 'path';
 import * as semver from 'semver';
 
 import { delay, ifdescribe } from './spec-helpers';
 import { emittedOnce } from './events-helpers';
+import { closeAllWindows } from './window-helpers';
 
 describe('nativeTheme module', () => {
   describe('nativeTheme.shouldUseDarkColors', () => {
@@ -18,6 +20,8 @@ describe('nativeTheme module', () => {
       nativeTheme.themeSource = 'system';
       // Wait for any pending events to emit
       await delay(20);
+
+      closeAllWindows();
     });
 
     it('is system by default', () => {
@@ -62,6 +66,26 @@ describe('nativeTheme module', () => {
         expect(systemPreferences.appLevelAppearance).to.equal('light');
       });
     });
+
+    const getPrefersColorSchemeIsDark = async (w: Electron.BrowserWindow) => {
+      const isDark: boolean = await w.webContents.executeJavaScript(
+        'matchMedia("(prefers-color-scheme: dark)").matches'
+      );
+      return isDark;
+    };
+
+    it('should override the result of prefers-color-scheme CSS media query', async () => {
+      const w = new BrowserWindow({ show: false });
+      await w.loadFile(path.resolve(__dirname, 'fixtures', 'blank.html'));
+      const originalSystemIsDark = await getPrefersColorSchemeIsDark(w);
+      nativeTheme.themeSource = 'dark';
+      expect(await getPrefersColorSchemeIsDark(w)).to.equal(true);
+      nativeTheme.themeSource = 'light';
+      expect(await getPrefersColorSchemeIsDark(w)).to.equal(false);
+      nativeTheme.themeSource = 'system';
+      expect(await getPrefersColorSchemeIsDark(w)).to.equal(originalSystemIsDark);
+      w.close();
+    });
   });
 
   describe('nativeTheme.shouldUseInvertedColorScheme', () => {