Управление темами в ElectronJS

Опубликовано: 1 Августа, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows , macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

Чтобы сделать настольные приложения более привлекательными и привлекательными для пользователей, разработчики в дополнение к использованию CSS также должны разработать приложение, чтобы оно было совместимо с собственной системной темой. Приложение должно обеспечивать функцию, с помощью которой пользователь может управлять внешним видом приложения и динамически изменять тему во время выполнения. Это улучшает пользовательский интерфейс приложения и позволяет ему гармонировать с системной средой. Electron предоставляет способ, которым мы можем достичь этого, используя свойства экземпляра и события встроенного модуля nativeTheme. В этом руководстве будет показано, как использовать модуль nativeTheme. Любой дополнительный CSS должен применяться только к собственной теме System для стилизации приложения.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

Структура проекта:

Пример: следуйте инструкциям в разделе « Динамическое стилирование в ElectronJS», чтобы настроить базовое приложение Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Также внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу.

package.json:

 {
  "name": "электрон-тема",
  "версия": "1.0.0",
  "description": "Темы в электронном",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0"
  }
}

Создание активов папки в соответствии со структурой проекта и создать light.css файл и dark.css файл соответственно. Мы будем динамически внедрять эти CSS- файлы в приложение во время выполнения.

Вывод: На этом этапе настроено наше основное электронное приложение. После запуска приложения мы должны увидеть следующий результат.

Собственная тема в Electron: модуль nativeTheme используется для чтения, ответа и применения изменений к собственной цветовой теме Chromium. Собственная системная тема также применима к собственной цветовой теме Chromium. Этот модуль является частью основного процесса . Чтобы импортировать и использовать модуль nativeTheme в процессе рендеринга, мы будем использовать удаленный модуль Electron.

Примечание. Модуль nativeTheme поддерживает только события экземпляра и свойства экземпляра. С ним связаны какие-либо методы экземпляра.

index.html: кнопки «Включить темную тему» и «Включить светлую тему» еще не имеют связанных с ними функций. Чтобы изменить это, добавьте следующий код в файл index.js.

html

 < br >< br >
   < button id = "dark" >
     Enable Dark Theme
   </ button >
   < button id = "light" >
     Enable Light Theme
   </ button > 

index.js : добавьте в этот файл следующий фрагмент.

javascript

 const electron = require( "electron" );
 
// Importing the nativeTheme module
 // using Electron remote
 const nativeTheme = electron.remote.nativeTheme;
 const path = require( "path" );
 
console.log( "By Default, Dark Theme Enabled - " ,
            nativeTheme.shouldUseDarkColors);
 console.log( "High Contrast Colors - " ,
            nativeTheme.shouldUseHighContrastColors);
 console.log( "Inverted Colors - " ,
            nativeTheme.shouldUseInvertedColorScheme);
 
nativeTheme.on( "updated" , () => {
    console.log( "Updated Event has been Emitted" );
 
    if (nativeTheme.shouldUseDarkColors) {
        console.log( "Dark Theme Chosen by User" );
    } else {
        console.log( "Light Theme Chosen by User" );
    }
 });
 
var dark = document.getElementById( "dark" );
 dark.addEventListener( "click" , () => {
    nativeTheme.themeSource = "dark" ;
 });
 
var light = document.getElementById( "light" );
 light.addEventListener( "click" , () => {
    nativeTheme.themeSource = "light" ;
 });

Подробное объяснение всех свойств экземпляра модуля nativeTheme, используемого в коде, приведено ниже:

nativeTheme.shouldUseDarkColors Это свойство экземпляра является свойством только для чтения. Это свойство возвращает логическое значение, указывающее, включен ли в настоящее время в системной ОС или Chromium темный режим или ему дано указание показать пользовательский интерфейс с темной тематикой. Чтобы изменить это свойство (изменить тему приложения), нам нужно использовать свойство nativeTheme.themeSource Instance.
nativeTheme.shouldUseHighContrastColors Это свойство экземпляра является свойством только для чтения. Это свойство экземпляра поддерживается только в Windows и macOS . Это свойство возвращает логическое значение, указывающее, включен ли в настоящее время в системной ОС или Chromium высококонтрастный режим или ему дано указание отображать тематический пользовательский интерфейс с высокими ограничениями. Это свойство нельзя напрямую изменить из кода с помощью модуля nativeTheme. Чтобы изменить это свойство, пользователю необходимо включить пользовательский интерфейс с высокими требованиями в настройках системы.
nativeTheme.shouldUseInvertedColorScheme Это свойство экземпляра является свойством только для чтения. Это свойство экземпляра поддерживается только в Windows и macOS . Это свойство возвращает логическое значение, указывающее, включена ли в настоящее время в системной ОС или Chromium инвертированная цветовая схема или ей предписано использовать инвертированную цветовую схему в пользовательском интерфейсе . Это свойство нельзя напрямую изменить из кода с помощью модуля nativeTheme. Чтобы изменить это свойство, пользователю необходимо включить инвертированную цветовую схему в Системных настройках.
nativeTheme.themeSource Это свойство экземпляра используется для изменения темы приложения. Это свойство можно динамически изменять во время выполнения. Это свойство String используется для переопределения и замены значения (указывающего тему), которое Chromium выбрал для внутреннего использования в соответствии с Системной темой. Это свойство может принимать одно из следующих строковых значений:
- system Установка для этого свойства экземпляра значения system удалит значения переопределения и вернет все к значениям по умолчанию ОС. Это означает, что если в системной теме включен темный режим, то хром автоматически примет эту тему в качестве темы по умолчанию и применит ее к приложению Electron. Тот же случай также применим, когда в теме «Система» включен световой режим. По умолчанию значение свойства themeSource равно system . Это значение соответствует режиму ОС системы по умолчанию.
- dark Установка для этого свойства экземпляра значения dark будет иметь следующие эффекты в приложении. Это значение совмещается с режимом Темной системы.
  - Свойству nativeTheme.shouldUseDarkColors Instance будет присвоено значение true .
  - Любой пользовательский интерфейс, отображаемый приложением Electron в Linux и Windows, включая контекстные меню, инструменты разработчика и т. Д., Будет использовать пользовательский интерфейс с темной тематикой. То же самое было продемонстрировано в выходных данных. Любой пользовательский интерфейс, отображаемый Системой в macOS, включая меню, оконные рамки и т. Д., Будет использовать пользовательский интерфейс темной тематики.
  - CSS-запрос prefers-color-scheme будет соответствовать темному режиму.
  - Будет создано событие «Обновленный экземпляр», как показано в коде. То же самое демонстрируется в выходных данных.
- light Установка для этого свойства экземпляра значения light будет иметь следующие эффекты в приложении. Это значение совмещается с Light режимом системы.
  - Для свойства nativeTheme.shouldUseDarkColors Instance будет установлено значение false .
  - Любой пользовательский интерфейс, отображаемый приложением Electron в Linux и Windows, включая контекстные меню, инструменты разработчика и т. Д., Будет использовать пользовательский интерфейс с легкой тематикой. То же самое было продемонстрировано в выходных данных. Любой пользовательский интерфейс, отображаемый Системой в macOS, включая меню, оконные рамки и т. Д., Будет использовать пользовательский интерфейс со световой тематикой.
  - CSS-запрос prefers-color-scheme будет соответствовать световому режиму.
  - Событие обновленного экземпляра будет отправлено, как показано в коде. То же самое демонстрируется в выходных данных.

Подробное объяснение события экземпляра модуля nativeTheme, используемого в коде, приведено ниже:

обновлено: Событие. Событие этого экземпляра генерируется, когда какое-либо свойство в базовой нативной теме Chromium было изменено. Это означает, что значение любого свойства экземпляра Readonly изменилось. Как обсуждалось выше, значение свойства nativeTheme.shouldUseDarkColors можно изменить, изменив значение свойства nativeTheme.themeSource. После отправки этого события нам необходимо вручную проверить, какое свойство Readonly было изменено, как описано выше, поскольку это событие экземпляра не возвращает никаких обещаний / обратного вызова.

На этом этапе мы должны успешно определить и изменить собственную тему приложения Electron из приведенного выше кода.
Выход:

Примечание. В приведенных выше выходных данных для темы системной ОС по умолчанию установлен темный режим, и, следовательно, свойство экземпляра nativeTheme.shouldUseDarkColors возвращает значение true . Кроме того, при перезагрузке приложения любые изменения, внесенные в тему, будут возвращены к теме системной ОС по умолчанию, поскольку мы не сохраняем значение свойства nativeTheme.themeSource Instance в локальном хранилище приложения.

После того, как мы успешно адаптировали приложение к собственной системной теме, нам нужно динамически применить соответствующий CSS, совместимый с этой темой для приложения. Это важно, потому что некоторые свойства стиля нельзя применить к обеим темам. Например, мы не можем использовать один и тот же цвет шрифта для темного режима, а также для светлого режима. В следующем руководстве будет показано, как динамически внедрять соответствующий CSS в зависимости от применяемой темы.

dark.css : добавьте в этот файл следующий фрагмент.

 тело {
    цвет фона: темно-серый;
    цвет белый;
}

light.css : добавьте в этот файл следующий фрагмент.

 тело {
    цвет фона: светло-серый;
    черный цвет;
}

index.js : внесите в этот файл следующие изменения. Функция loadCSS (load) динамически вставляет CSS в структуру HTML DOM на основе переданного ей светлого или темного значения String. Мы просто добавляем еще один тег ссылки с соответствующим файлом CSS и свойствами к тегу заголовка документа index.html с помощью метода appendChild.

javascript

 const electron = require( "electron" );
 
// Importing the nativeTheme module
 // using Electron remote
 const nativeTheme = electron.remote.nativeTheme;
 const path = require( "path" );
 
console.log( "By Default, Dark Theme Enabled - " ,
            nativeTheme.shouldUseDarkColors);
 console.log( "High Contrast Colors - " ,
            nativeTheme.shouldUseHighContrastColors);
 console.log( "Inverted Colors - " ,
            nativeTheme.shouldUseInvertedColorScheme);
 
function loadCSS(load) {
    var head = document.getElementsByTagName( "head" )[0];
    var link = document.createElement( "link" );
    link.rel = "stylesheet" ;
    link.type = "text/css" ;
    link.href = path.join(__dirname, "../assets/"
                          + load + ".css" );
    head.appendChild(link);
 }
 
nativeTheme.on( "updated" , () => {
    console.log( "Updated Event has been Emitted" );
 
    if (nativeTheme.shouldUseDarkColors) {
        console.log( "Dark Theme Chosen by User" );
        console.log( "Dark Theme Enabled - " ,
                    nativeTheme.shouldUseDarkColors);
 
        loadCSS( "dark" );
    } else {
        console.log( "Light Theme Chosen by User" );
        console.log( "Dark Theme Enabled - " ,
                    nativeTheme.shouldUseDarkColors);
 
        loadCSS( "light" );
    }
 });
 
var dark = document.getElementById( "dark" );
 dark.addEventListener( "click" , () => {
    nativeTheme.themeSource = "dark" ;
 });
 
var light = document.getElementById( "light" );
 light.addEventListener( "click" , () => {
    nativeTheme.themeSource = "light" ;
 });

Вывод: при динамическом указании файла CSS мы не удаляем предыдущий файл CSS, если он есть, и, следовательно, стили, примененные к Приложению, включают оба файла CSS. В случае, если мы пропустим свойство в каком-либо из файлов CSS, оно все равно будет применено к приложению после изменения темы. Следовательно, мы можем либо сначала удалить тег ссылки, а затем повторно добавить его динамически с помощью JS, либо переопределить все свойства предыдущего файла CSS, сделав идентичные копии и просто изменив значения.

Node.js JavaScript HTML CSS

Управление темами в ElectronJS

html

javascript

javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ