javascript - Node/Electron 中的暗模式检测

Question

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

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

这是 renderer.js 中的 javascript我使用的文件来自 this site用 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");

  }
})

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

Answer 1

您可以使用 nativeTheme 检查系统是否处于暗模式。模块。
因此，将其添加到您的代码中:

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

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

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