如何在 Electron 应用程序的两个 windows 上放置主题（暗/亮模式）？

Question

Hello guys , I have a problem... I have created an Electron app with two windows (Home and Settings) on the Home Window I have a button where I can change the theme(Dark/Light) , I do this with css variables and a little Javascript script (In the html file the class define the theme). Hello guys , I have a problem... I have created an Electron app with two windows (Home and Settings) on the Home Window I have a button where I can change the theme(Dark/Light) , I do this with css variables和一点 Javascript 脚本（在 html 文件中 class 定义主题）。 My question is how I can apply my theme also on my settings window?我的问题是如何在我的设置 window 上应用我的主题？ (Does I need to do a link between the two files?) I tried many things but without success:/ （我需要在两个文件之间建立链接吗？）我尝试了很多东西但没有成功：/

I post the main code to help you to understand my problem:我发布主要代码以帮助您理解我的问题：

Html: Html：

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

Css: 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: 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%)" })

        }

    }
});

Screenshot of the app to help you to understand:应用截图帮助你理解：

Light mode: (the settings window don't have theme applyed)灯光模式：（设置 window 没有应用主题）

Dark mode:黑暗模式：

Thanks a lot for your help !非常感谢你的帮助！

Answer 1

There are probably more than a few ways to handle this.可能有不止几种方法可以处理这个问题。 Personally I would handle it in the main context so that the user preference can be saved and restored on subsequent launches.就我个人而言，我会在main上下文中处理它，以便在后续启动时可以保存和恢复用户偏好。

So the schema would be something like this:所以架构会是这样的：

the main content knows what the current "theme" is (because default or stored user preference) main内容知道当前的“主题”是什么（因为默认或存储的用户偏好）
user clicks the "theme" button in any of the windows and the window sends a message to main using IPC communication用户单击 windows 和 window 中的任何一个中的“主题”按钮使用IPC 通信向main发送消息
the main context receives the message and based on the current theme, sends a message to all open windows using BrowserWindow.getAllWindows() and contents.send(channel,...args) , passes the "theme" to switch to as an argument. main上下文接收消息并基于当前主题，使用BrowserWindow.getAllWindows()和contents.send(channel,...args)向所有打开的 windows 发送消息，传递“主题”作为参数切换到.
each window receives the message (with argument) and handles changing the "theme" using one of the methods described here: Replacing css file on the fly (and apply the new style to the page)每个 window 接收消息（带参数）并使用此处描述的方法之一处理更改“主题”：即时替换 css 文件（并将新样式应用于页面）

While it is possible for windows to communicate with each other directly, this schema will give you more flexibility if you decide to add more windows or other "themes" in the future.虽然 windows 可以直接相互通信，但如果您决定在未来添加更多 windows 或其他“主题”，此架构将为您提供更大的灵活性。 It's a little more work but lets the windows be "dumb" with control residing in main .这是一个多一点的工作，但让 windows 变得“愚蠢”，控制位于main 。

. . . . . . but I could also be doing it wrong.但我也可能做错了。 ;-) ;-)

如何在 Electron 应用程序的两个 windows 上放置主题（暗/亮模式）？

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-11-10 22:02:05

如何在 Electron 应用程序的两个 windows 上放置主题（暗/亮模式）？

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-11-10 22:02:05

解决方案1
2 已采纳 2019-11-10 22:02:05