Menu
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:
After opening DevTools:
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).
How do I prevent the Dev Tools from switching modes when opened - at least on the main display for my Electron App?
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;
}
947
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).
77
It's a hack, but... If you toggle developer tools open/closed/open, it goes away.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
