我如何在我的两个 windows Electron 应用程序上放置一个主题（dark/light 模式）？

Question

大家好，我有一个问题...我创建了一个 Electron 应用程序 两个 windows（主页和设置）在主页 Window 我有一个 按钮，我可以在其中更改主题（Dark/Light），我使用 css 变量和一些 Javascript 脚本（在 html 文件中 class 定义主题）。 我的问题是如何在我的设置中也应用我的主题 window？（我需要在两个文件之间做一个 link 吗？）我尝试了很多事情但没有成功：/

我post主要代码帮助大家理解我的问题：

Html:

<html lang="en" class="theme-dark" id="fortheme">

Css:

.theme-light {
  --color-primary: #dedad4;
  --color-secondary: #d7d3cb;
  --color-border: #c1beb9;
  --color-accent1: #d52015;
  --color-accent2: #2196f3;
  --color-accent3: #4caf50;
  --font-color: #070b0b;
}
.theme-dark {
  --color-primary: #21252b;
  --color-secondary: #282c34;
  --color-border: #3e4146;
  --color-accent1: #d52015;
  --color-accent2: #2196f3;
  --color-accent3: #4caf50;
  --font-color: #f8f4f4;
}

Javascript:

//Change pictures (picture of the button) and theme
$('#light-btn').on({
    'click': function () {
        image = $("#light-image")
        if (image.attr("src") == "Images/Sun.png") {
            image.attr("src", "Images/Dark.png")
            setTheme('theme-light');
            $("img").css({ filter: "invert(100%)" })
        } else {
            image.attr("src", "Images/Sun.png")
            setTheme('theme-dark');
            $("img").css({ filter: "invert(0%)" })

        }

    }
});

帮助您理解的应用程序屏幕截图：

灯光模式：（设置window没有应用主题）

深色模式：

非常感谢您的帮助！

Answer 1

处理这个问题的方法可能不止几种。就我个人而言，我会在 main 上下文中处理它，以便可以在后续启动时保存和恢复用户首选项。

所以模式应该是这样的：

main 内容知道当前 "theme" 是什么（因为默认或存储的用户偏好）
用户单击任何 windows 中的 "theme" 按钮，window 使用 IPC communication

main

main上下文接收消息并根据当前主题，向所有使用BrowserWindow.getAllWindows() and contents.send(channel,...args)打开的windows发送消息，通过"theme"切换到作为论据。
每个 window 接收消息（带参数）并使用此处描述的方法之一处理更改 "theme"：Replacing css file on the fly (and apply the new style to the page)

虽然 windows 可以直接相互通信，但如果您决定在将来添加更多 windows 或其他 "themes"，此架构将为您提供更大的灵活性.这是一个多一点的工作，但让 windows 成为 "dumb"，控制驻留在 main.

。 . .但我也可能做错了。 ;-)

我如何在我的两个 windows Electron 应用程序上放置一个主题（dark/light 模式）？

How I can put a theme (dark/light mode) on my two windows of Electron app?

html

javascript

css

themes

electron