电子滚动条在黑暗模式下不暗

Question

electron.nativeTheme.themeSource = 'dark';

更改为深色模式时，本机滚动条保持浅色。是否还需要采取其他步骤让它们显示为黑色？

在下图中，左侧显示了我的浏览器窗口，右侧是开发工具。开发工具有黑色滚动条，因此支持在某处。

Answer 1

呃，这太复杂了。您需要做两件事：

使用color-schemeCSS/meta 标签向 Chrome 表明您的页面很高兴在浅色和深色模式下呈现。我认为这也会将默认的用户代理样式表更改为暗模式下的暗模式。这确实看起来是一个愚蠢的设计。

我只测试了元标记，它可能是最好的选择：将其添加到您的<head>：

<meta name="color-scheme" content="light dark">

（dark light也有效，据说顺序编码了作者的偏好，但我严重怀疑它有任何效果。）

new BrowserWindow({
      webPreferences: {
        enableBlinkFeatures: "CSSColorSchemeUARendering",
      },
      ...
    }),

下面对应的标志chrome://flags称为Web Platform Controls Dark Mode（yeay Consistency）。

您也许也可以使用它，app.commandLine.addSwitch("enable-features", "CSSColorSchemeUARendering");但我认为上面的方法更干净。

这样我终于有了黑色滚动条。