5

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;
}
LightCC
  • 9,804
  • 5
  • 52
  • 92

3 Answers3

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).

LightCC
  • 9,804
  • 5
  • 52
  • 92
1

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

Luke Michals
  • 11
  • 2
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.

LW001
  • 2,452
  • 6
  • 27
  • 36
jeldikk
  • 21
  • 4