[Bug][Regression][32.x]: Dark theme is not applied to Dev Tools

[AviVahl]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

32.0.0, 32.0.1, 32.0.2

What operating system(s) are you using?

Other Linux

Operating System Version

Arch Linux with GNOME

What arch are you using?

x64

Last Known Working Electron version

31.4.0

Expected Behavior

When opening dev tools, they should be dark themed, assuming Settings -> Theme is set to "Dark" or "Browser preference" (with the system being dark)

Actual Behavior

Dev tools open in light theme, no matter what which setting is set.

Testcase Gist URL

No response

Additional Information

Setting the theme to Light and then back to Dark causes it to actually apply. That is until you close and re-open dev tools.

Screencast.from.2024-08-20.10-57-52.webm

[electron-issue-triage]

Hello @AviVahl. Thanks for reporting this and helping to make Electron better!

Would it be possible for you to make a standalone testcase with only the code necessary to reproduce the issue? For example, Electron Fiddle is a great tool for making small test cases and makes it easy to publish your test case to a gist that Electron maintainers can use.

Stand-alone test cases make fixing issues go more smoothly: it ensure everyone's looking at the same issue, it removes all unnecessary variables from the equation, and it can also provide the basis for automated regression tests.

Now adding the blocked/need-repro Needs a test case to reproduce the bug label for this reason. After you make a test case, please link to it in a followup comment. This issue will be closed in 10 days if the above is not addressed.

[AviVahl]

https://github.com/wixplosives/example-electron-app

npm i
npm run build
npm start

[geedys]

This issue also occurs on the macOS platform. My macOS version: Sonoma 14.6.1 (23G93)

[nathanbabcock]

Also happens on both Windows 10 and 11 (so not a platform-specific issue it seems)

[Galkon]

Happening on macOS sonoma electron 32.0.1

[sparecycles]

From my experience (above duplicate)...

Reproducible in fiddle as well. versions 32.0.[01] and 33.0.0-alpha.1.

• Open dev tools 😎
• Open dev tools settings😎
• Set dark mode 🤓
• Close dev tools
• Open dev tools. 😎!

[AviVahl]

still happens with 32.0.2

[automationghost]

I updated from 30 to 32 and now have this issue.. even though dark mode is set .. i have to toggle to light and back to dark so it is applied as the op already showed

Edit created a quick workaround with this train of thought while they fix this 😎 evil bug. Use the devtools-opened event to toggle back and forth

import {app, BrowserWindow ,nativeTheme} from 'electron';

function toggleNativeTheme() {
  // First, set the theme to 'light'
  nativeTheme.themeSource = 'light';

  // After a short delay, set it to 'dark'
  setTimeout(() => {
    nativeTheme.themeSource = 'dark';
  }, 100); // 100ms delay; adjust if necessary
}

browserWindow?.webContents.openDevTools();
browserWindow.webContents.on('devtools-opened', () => {
  toggleNativeTheme();
});

[cucbin]

Already checked which commit introduced the issue. Will submit a PR in further at the right time.

[TheOnlyOnlyName]

Hope this gets fixed, annoying to have to manually set it to dark every time I open devtools.

[Corvus278]

still happens with 32.1.0 :(

[danielweck]

Edit created a quick workaround with this train of thought while they fix this 😎 evil bug. Use the devtools-opened event to toggle back and forth

Thank you for the tip :)

[TuKun33]

I updated from 30 to 32 and now have this issue.. even though dark mode is set .. i have to toggle to light and back to dark so it is applied as the op already showed

Edit created a quick workaround with this train of thought while they fix this 😎 evil bug. Use the devtools-opened event to toggle back and forth

import {app, BrowserWindow ,nativeTheme} from 'electron';

function toggleNativeTheme() {
  // First, set the theme to 'light'
  nativeTheme.themeSource = 'light';

  // After a short delay, set it to 'dark'
  setTimeout(() => {
    nativeTheme.themeSource = 'dark';
  }, 100); // 100ms delay; adjust if necessary
}

browserWindow?.webContents.openDevTools();
browserWindow.webContents.on('devtools-opened', () => {
  toggleNativeTheme();
});

Thinks your code 👋🏼, But it's better to on('devtools-opened') before openDevTools

window.webContents.on('devtools-opened', () => {})
window.webContents.openDevTools();

[ashgrover]

Can confirm this bug in v32.1.2.

[cucbin]

Already checked which commit introduced the issue. Will submit a PR in further at the right time.

PR has been submitted and will be merged soon.