Node/Electron 中的暗模式檢測

Question

我閱讀了電子指南以在您的應用程序中實現暗模式，但它僅在用戶單擊按鈕以手動將其更改為暗模式時才有效。 我想要做的是，當系統處於“暗模式”時，我希望 CSS 標簽發生變化。 例如，當用戶在系統中打開暗模式時，它會將 css 背景顏色更改為黑色。

這是 HTML 代碼：

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

這是我在本網站上使用 jQuery 使用的renderer.js文件中的 javascript。 我還必須使用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它不起作用。 它將返回未定義，因此對於開發，您可能想要一個單獨的 function 來檢查其是否未定義並默認為暗模式或亮模式。