Question

大家好，我有一个问题...我创建了一个 Electron应用，在其上有两个窗口（“首页”和“设置”）主页窗口我有一个按钮，可以在其中更改主题（暗/浅），我使用css变量和一个小的Javascript脚本（在html文件中，该类定义了主题）来完成此操作。 我的问题是如何在主题设置窗口上应用主题？（我需要在两个文件之间建立链接吗？）我尝试了很多事情但没有成功：/

我发布了主要代码以帮助您了解我的问题：

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

        }

    }
});

该应用的屏幕截图可帮助您了解：

灯光模式：（设置窗口未应用主题）

黑暗模式：

非常感谢您的帮助！

Answer 1

可能有多种方法可以解决此问题。我个人将在main上下文中处理它，以便可以在以后的启动中保存和还原用户首选项。

因此架构将如下所示：

main内容知道当前的“主题”是什么（因为默认或存储的用户首选项）
用户单击任意一个窗口中的“主题”按钮，然后该窗口使用IPC communication将消息发送到main
main上下文接收消息，并基于当前主题，使用BrowserWindow.getAllWindows()和contents.send(channel,...args)将消息发送到所有打开的窗口，将“主题”传递为论点。
每个窗口接收消息（带有参数）并使用此处描述的一种方法来处理“主题”的更改：Replacing css file on the fly (and apply the new style to the page)

尽管Windows可以直接相互通信，但是如果您以后决定添加更多窗口或其他“主题”，则此架构将为您提供更大的灵活性。这项工作还多了一点，但是让窗口处于“哑巴”状态，控件位于main中。

。。。但我也可能做错了。 ;-）

如何在两个Electron应用程序窗口中放置主题（暗/亮模式）？

1 个答案: