Как я могу поместить тему (темный / светлый режим) в два окна приложения Electron? - PullRequest
Новая
       32

Как я могу поместить тему (темный / светлый режим) в два окна приложения Electron?

0 голосов
/ 10 ноября 2019

Привет, ребята , у меня проблема ... Я создал приложение Electron с двумя окнами (Дом и настройки) в главном окне Iу меня есть кнопка , где я могу изменить тему (Dark / Light) , я делаю это с помощью переменных 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%)" })

        }

    }
});

Снимок экрана приложения, чтобы помочь вам понять:

Режим освещения: (в окне настроек тема не применяется) Light

Темный режим: Dark

Большое спасибо за вашу помощь!

1 Ответ

1 голос
/ 11 ноября 2019

Вероятно, есть несколько способов справиться с этим. Лично я бы обработал это в контексте main, чтобы пользовательские настройки можно было сохранить и восстановить при последующих запусках.

Таким образом, схема будет выглядеть примерно так:

  • main контент знает, что такое текущая "тема" (потому что по умолчанию или сохранено предпочтение пользователя)
  • пользователь нажимает кнопку "тема" в любом из окон, и окно отправляет сообщение на main, используя IPC-связь
  • контекст main получает сообщение и, основываясь на текущей теме, отправляет сообщение всем открытым окнам, используя BrowserWindow.getAllWindows () и contents.send (channel, ... args) , передает «тему» ​​для переключения в качестве аргумента.
  • каждое окно получает сообщение (с аргументом) и обрабатывает изменение «темы», используя один из методов, описанных здесь: Замена файла CSS на лету (и применение нового стиля к странице)

Хотя окна могут напрямую взаимодействовать друг с другом, эта схема даст вам больше гибкости, если вы решите добавить больше окон или других «тем» в будущем. Это немного больше работы, но позволяет окнам быть "тупыми" с контролем, находящимся в main.

. ,,но я мог бы и делать это неправильно. ; -)

...