5

暗模式与 DevTools 的混淆

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

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

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

原始视图：

  • 在此处输入图像描述

打开 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;
}
4

3 回答 3

3

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

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

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

于 2020-07-31T02:50:22.177 回答
1

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

于 2020-11-13T04:05:39.667 回答
0

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

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

于 2021-09-05T06:02:39.677 回答