vue-cli-plugin-electron-builder: Electron 6.0.0+ does not launch in Windows 10 Dark Mode

In v1.4.0 of this plugin, I added support for Electron 6. If Eelctron 6 is selected when adding the plugin, the vue devtools install will be commented out and a message will explain the problem and link to this issue. Thanks for all of your help investigating! I will leave this issue open until it is solved by electron.

@echo off %1 %2 mshta vbscript:createobject(“shell.application”).shellexecute(“%~s0”,“goto :runas”,“”,“runas”,1)(window.close)&goto :uacfalse :runas REG ADD HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize /v AppsUseLightTheme /t REG_DWORD /d 1 /f goto :eof :uacfalse

Admin rights are not needed to modify these registry variables. Further, running any application (Especially VSCode) as administrator for no reason is a very ignorant recommendation.

Below are 3 scripts that can be added to your package.json that will enable light mode, execute electron:serve and then enable dark mode when the electron process ends. They do NOT require admin rights. This COULD actually be merged into just one script but modularity is key, right?

"electron:light": "yarn win-light && yarn electron:serve && yarn win-dark",
"win-light": "REG ADD HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize /v AppsUseLightTheme /t REG_DWORD /d 1 /f",
"win-dark": "REG ADD HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize /v AppsUseLightTheme /t REG_DWORD /d 0 /f",

Electron remembers installed devtools, so just removing the installation which runs on every launch won’t delete the already-installed tools. The installed tools are stored in your application’s data directory which on Windows is C:\Users\[yourname]\AppData\Roaming\[appname] (I think it’s Roaming, but you might want to check Local too). Delete that directory, and your app will be in a clean state with no devtools installed.

If you find this annoying you can go and 👍 on https://github.com/electron/electron/issues/19468 to upvote that issue.

I can confirm this issue:

Environment:

• Microsoft Windows 10 Pro Build 17134
• node v12.4.0
• electron v6.0.0
• npm 6.9.0
• yarn 1.17.3
• vue-cli-plugin-electron-builder ^1.3.6

The app launches correctly after changing to Light mode. Also when build. This behavior doesn’t appear with electron-quick-start.

Just confirmed that it does work. I will publish an update to the plugin tomorrow.

This issue seems to be fixed with 8.2.5!

Any progress on this?

Edit: So after finding this comment I created the following workaround using concurrently and wait-on.

It switches to light mode first, starts the application and concurrently waits for it to finish compiling so it can switch back to dark mode.

dark.cmd

@echo off
%1 %2
mshta vbscript:createobject("shell.application").shellexecute("%~s0","goto :runas","","runas",1)(window.close)&goto :uacfalse
:runas
REG ADD HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize /v AppsUseLightTheme /t REG_DWORD /d 0 /f
goto :eof
:uacfalse

light.cmd

@echo off
%1 %2
mshta vbscript:createobject("shell.application").shellexecute("%~s0","goto :runas","","runas",1)(window.close)&goto :uacfalse
:runas
REG ADD HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize /v AppsUseLightTheme /t REG_DWORD /d 1 /f
goto :eof
:uacfalse

electron:serve script:

"electron:serve": "yarn win-light && concurrently \"vue-cli-service electron:serve\" \"yarn win-dark\"",
"win-light": "cd scripts && light.cmd",
"win-dark": "wait-on http://localhost:8080/favicon.ico -d 4000 && cd scripts && dark.cmd"

If the admin prompts to switch the themes are annoying to you, start VSCode as an admin.

I don’t know how to feel about this but it works 😄

Great, thanks @nklayman!

@caesar thank you! C:\Users\[yourname]\AppData\Roaming\[appname] is the right path. I can also confirm the workaround now.
This is a really interesting bug since the only thing really changes with darkmode/lightmode settings is the background color of the application menu, and this has most likely nothing to do with vue-devtools. Even if i use just the electron-quick-start Projekt and just add the vue-devtools this issue occurs, but only in dark mode and only after the first start. Also the extension never really gets shown (not in dark mode nor in light mode) in the DevTools. Since this seems to apply to DevTools extensions in general the bug may be somewhere in the Installation process. Somewhere in the BrowserWindow.addDevToolsExtension API.