Node/Electron 中的暗模式检测

Question

我阅读了电子指南中的 implement dark mode 到您的应用程序，但它仅在用户单击按钮手动将其更改为暗模式时才有效。我想要做的是，当系统处于“暗模式”时，我希望 CSS 标签发生变化。例如，当用户在系统中打开深色模式时，它会将 css 背景颜色更改为黑色。

这是 HTML 代码：

<nav class="navbar navbar-light bg-light">

这是我在this site 中使用的renderer.js 文件中的javascript 和jQuery。我还必须使用console.log 模块进行测试以确保触发器正常工作。

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {

    //dark mode
$("nav.navbar-light bg-light").replaceWith( "navbar-light bg-dark" );
console.log("This is Dark Mode");

  } else {

    //light mode
$("nav.navbar-light bg-light").replaceWith( "navbar-light bg-light" );
console.log("This is Light Mode");

  }
})

我尝试了这些，但在启动时我的控制台上没有任何显示。我知道在 Electron/Node.js 中必须有一个不同的 window.NAMEOFTHING。我想我应该尝试另一个 npm？

Answer 1

您可以使用nativeTheme 模块检查系统是否处于暗模式。

所以将这个添加到你的代码中：

const electron = require("electron")
const nativeTheme = electron.remote.nativeTheme

if (nativeTheme.shouldUseDarkColors) {
    // Code here
}

然而，这似乎只适用于已编译的应用程序，所以当我运行 npm start 时它不起作用。它将返回未定义，因此对于开发，您可能需要一个单独的函数来检查其是否未定义并默认为暗模式或亮模式。