CODEWITHSUNDEEP
javascripthtmlcsselectronthemes
Dino Grrr
Dino Grrr

Reputation: 49

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

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) Light

Dark mode: Dark

Thanks a lot for your help !

Upvotes: 0

Views: 2940

Answers (1)

spring
spring

Reputation: 18487

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:

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. ;-)

Upvotes: 2

Related Questions