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

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). My question is how I can apply my theme also on my settings 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 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%)" })

        }

    }
});

Screenshot of the app to help you to understand:

Light mode: (the settings window don't have theme applyed)

Dark mode:

Thanks a lot for your help !

score 2 · Accepted Answer · answered Nov 10 '19 at 22:02

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.

So the schema would be something like this:

the main content knows what the current "theme" is (because default or stored user preference)
user clicks the "theme" button in any of the windows and the window sends a message to main using IPC communication
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.
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)

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. It's a little more work but lets the windows be "dumb" with control residing in main.

. . . but I could also be doing it wrong. ;-)

Thanks you a lot, that's work perfectly, you help me so much, thanks !! I just have a question, how do I use the getAllWindows() function to send a message to all windows, that's work but without the use of this function, I have to make a loop? (I'm a beginner). Thank you again! — Dino Grrr, Nov 11 '19 at 08:56
@DinoGrrr - yes, you get `getAllWindows()` and then iterate over the returned array in a loop using `webContents.send()` to send an "updateTheme" type of message with an arg of the particular theme or CSS file to use. — spring, Nov 12 '19 at 02:28

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

1 Answers1