Login/Register
Electron BrowserWindow switches to Dark Mode when opening DevTools
Asked Answered
htmlcsselectrongoogle-chrome-devtoolsdarkmode
C

3

6

Dark Mode Confusion with DevTools

I'm building an basic electron app from a tutorial.

I have a BrowserWindow launching with some basic HTML and CSS Styling - Just the word "Awesome" in blue with a white background. However, my Windows and most apps that allow me to (Chrome, VS Code, etc.) are all set to dark mode.

When I launch the app, it comes up with a white background, but as soon as I use Ctrl+Shift+i to open the Dev Tools, the WebView converts to Dark Mode, both for the Dev Tools, and for the output screen.

Original View:

  • enter image description here

After opening DevTools:

  • enter image description here

Even weirder - if I close DevTools, it goes back to a white background, then if I open DevTools again, it STAYS with the original white background in the main window view (Although DevTools itself appears to be in Dark Mode).

  • enter image description here

Question:

How do I prevent the Dev Tools from switching modes when opened - at least on the main display for my Electron App?

The code for the webview of the Electron BrowserWindow

countdown.html:

<html>
    <head>
        <link rel="stylesheet" href="./countdown.css" />
    </head>
    <body>
        <h1>Awesome!</h1>
    </body>
</html>

countdown.css:

h1 {
    font-family: sans-serif;
    color: blue;
}
Colorado answered 30/7, 2020 at 4:0 Comment(2)
Open the Rendering panel in devtools and see if you have color emulation set. – Sthilaire
@wOxxOm All the emulation settings (the last 4 options) are set to "no emulation". – Colorado
C
3

A simple solution, but one option is to explicitly set the backgroundColor option at window creation:

app.on('ready', _ => {
    mainWindow = new BrowserWindow({
        backgroundColor: '#FFF', // Add this new line
        height: 400,
        width: 900
    })

This code will set the background color to white and the shift to dark mode doesn't happen when DevTools is opened the first time (or any time).

Colorado answered 31/7, 2020 at 2:50 Comment(0)
A
1

It's a hack, but... If you toggle developer tools open/closed/open, it goes away.

Astilbe answered 13/11, 2020 at 4:5 Comment(0)
A
0

We can modify this behavior by tweaking the settings of DevTools, for this go to Developer Tools -> Settings (clicking the little cog wheel on top right of DevTools), then Preferences -> Appearance, choose 'light' from the dropdown.

The Browser Window should be restarted by re-running the process.

Anette answered 5/9, 2021 at 6:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.