【问题标题】：Electron BrowserWindow switches to Dark Mode when opening DevTools打开 DevTools 时 Electron BrowserWindow 切换到暗模式
【发布时间】：2020-11-19 18:35:31
【问题描述】：

暗模式与 DevTools 混淆

我正在根据教程构建一个基本的电子应用程序。

我有一个 BrowserWindow 启动，带有一些基本的 HTML 和 CSS 样式 - 只是一个白色背景的蓝色单词“Awesome”。但是，我的 Windows 和大多数允许我使用的应用程序（Chrome、VS Code 等）都设置为暗模式。

当我启动应用程序时，它会出现白色背景，但只要我使用 Ctrl+Shift+i打开开发工具，WebView 转换为暗模式，无论是开发工具还是输出屏幕。

原图：

打开 DevTools 后：

更奇怪的是——如果我关闭 DevTools，它会变回白色背景，然后如果我再次打开 DevTools，它会在主窗口视图中保持原来的白色背景（尽管 DevTools 本身会出现处于黑暗模式）。

问题：

如何防止开发工具在打开时切换模式 - 至少在我的 Electron 应用程序的主显示屏上？

Electron BrowserWindow的webview代码

`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;
}

【问题讨论】：

在 devtools 中打开Rendering 面板，看看你是否设置了颜色仿真。
@wOxxOm 所有仿真设置（最后 4 个选项）都设置为“无仿真”。

标签： html css electron google-chrome-devtools darkmode

【解决方案1】：

一个简单的解决方案，但一个选项是在创建窗口时显式设置backgroundColor 选项：

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

此代码会将背景颜色设置为白色，并且在第一次（或任何时候）打开 DevTools 时不会切换到暗模式。

【讨论】：

【解决方案2】：

这是一个黑客，但是...... 如果您切换开发者工具的打开/关闭/打开，它就会消失。

【讨论】：

【解决方案3】：

我们可以通过调整 DevTools 的设置来修改此行为，为此转到开发人员工具 -> 设置（单击 DevTools 右上角的小齿轮），然后是 Preferences -> Appearance，从下拉列表中选择“light” .

浏览器窗口应该通过重新运行进程来重新启动。

【讨论】：

暗模式与 DevTools 混淆

问题：

Electron BrowserWindow的webview代码

countdown.html:

countdown.css:

`countdown.html`:

`countdown.css`: