Gestión de temas en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows , macOS y Linux . Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Para hacer que las aplicaciones de escritorio sean más atractivas y atractivas para los usuarios, los desarrolladores, además de usar CSS , también deben desarrollar la aplicación para que sea compatible con el tema del sistema nativo. La aplicación debe proporcionar una característica en la que el usuario pueda controlar la apariencia de la aplicación y cambiar el tema dinámicamente durante el tiempo de ejecución. Esto mejora la interfaz de usuario de la aplicación y hace que se mezcle con el entorno del sistema. Electron proporciona una forma en la que podemos lograr esto usando las propiedades y eventos de la Instancia del módulo nativeTheme incorporado . Este tutorial demostrará cómo usar el módulo nativeTheme . Cualquier CSS adicional solo debe aplicarse sobre el tema del sistema nativo para diseñar la aplicación. 

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto:

Ejemplo: Siga los pasos dados en Estilo dinámico en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. 

paquete.json: 

{
  "name": "electron-theme",
  "version": "1.0.0",
  "description": "Themes in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Cree la carpeta de activos según la estructura del proyecto y cree el archivo light.css y el archivo dark.css respectivamente. Inyectaremos estos archivos CSS en la aplicación dinámicamente durante la ejecución.

Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado.

Tema nativo en Electron: el módulo nativeTheme se usa para leer, responder y aplicar cambios al tema de color nativo de Chromium. El tema del sistema nativo también se aplica al tema de color nativo de Chromium. Este módulo es parte del Proceso Principal . Para importar y usar el módulo nativeTheme en el proceso Renderer , usaremos el módulo remoto Electron . 

Nota: El módulo nativeTheme solo admite eventos de instancia y propiedades de instancia. Tiene cualquier método de Instancia asociado con él.

index.html: los botones Habilitar tema oscuro y Habilitar tema claro aún no tienen ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo index.js .

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

index.js : agregue el siguiente fragmento en ese archivo.  

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

 A continuación se proporciona una explicación detallada de todas las propiedades de instancia del módulo nativeTheme utilizado en el código:  

• nativeTheme.shouldUseDarkColors Esta propiedad de instancia es una propiedad de solo lectura. Esta propiedad devuelve un valor booleano que indica si el sistema operativo del sistema o Chromium tiene actualmente un modo oscuro habilitado o si se le indica que muestre una interfaz de usuario con un tema oscuro . Para modificar esta propiedad (cambiar el tema de la aplicación), necesitamos usar la propiedad de instancia nativeTheme.themeSource .
• nativeTheme.shouldUseHighContrastColors Esta propiedad de instancia es una propiedad de solo lectura. Esta propiedad de Instancia solo se admite en Windows y macOS . Esta propiedad devuelve un valor booleano que indica si el sistema operativo del sistema o Chromium tiene actualmente habilitado un modo de alto contraste o si se le indica que muestre una interfaz de usuario temática de alto contraste . Esta propiedad no se puede modificar directamente desde el código mediante el módulo nativeTheme . Para modificar esta propiedad, el usuario debe habilitar la interfaz de usuario de alto contraste desde la configuración del sistema.
• nativeTheme.shouldUseInvertedColorScheme Esta propiedad de instancia es una propiedad de solo lectura. Esta propiedad de Instancia solo se admite en Windows y macOS . Esta propiedad devuelve un valor booleano que indica si el sistema operativo del sistema o Chromium tiene actualmente habilitado un esquema de color invertido o si se le indica que use un esquema de color invertido en la interfaz de usuario . Esta propiedad no se puede modificar directamente desde el código mediante el módulo nativeTheme . Para modificar esta propiedad, el usuario debe habilitar el esquema de color invertido desde la Configuración del sistema.
• nativeTheme.themeSource Esta propiedad de instancia se utiliza para cambiar el tema de la aplicación. Esta propiedad se puede cambiar dinámicamente durante la ejecución. Esta propiedad de string se usa para anular y reemplazar el valor (que especifica el tema) que Chromium ha elegido usar internamente de acuerdo con el tema del sistema. Esta propiedad puede tomar uno de los siguientes valores de string :
  • sistema Al configurar esta propiedad de Instancia en sistema , se eliminarán los valores de anulación y se restablecerá todo a los valores predeterminados del sistema operativo. Esto significa que si el tema del sistema tiene habilitado el modo oscuro , Chrome lo tomará automáticamente como su tema predeterminado y lo aplicará a la aplicación Electron. El mismo caso también es aplicable cuando el tema Sistema tiene habilitado el modo de luz . De forma predeterminada, el valor de la propiedad themeSource es system . Este valor se alinea con el modo de sistema operativo predeterminado del sistema.
  • oscuro Establecer esta propiedad de instancia en oscuro tendrá los siguientes efectos en la aplicación. Este valor se alinea con el modo oscuro del sistema.
    • La propiedad nativeTheme.shouldUseDarkColors Instance se establecerá en true .
    • Cualquier interfaz de usuario representada por la aplicación Electron en Linux y Windows , incluidos los menús contextuales, las herramientas de desarrollo, etc., utilizará la interfaz de usuario de temática oscura . Lo mismo se ha demostrado en la Salida. Cualquier interfaz de usuario representada por el sistema en macOS , incluidos menús, marcos de ventanas, etc., utilizará la interfaz de usuario de tema oscuro .
    • La consulta CSS de esquema de color preferido coincidirá con el modo oscuro .
    • El evento Instancia actualizada se emitirá como se muestra en el código. Lo mismo se demuestra en la Salida.
  • light Establecer esta propiedad Instance en light tendrá los siguientes efectos en la aplicación. Este valor se alinea con el modo de luz del sistema.
    • La propiedad nativeTheme.shouldUseDarkColors Instance se establecerá en false .
    • Cualquier interfaz de usuario representada por la aplicación Electron en Linux y Windows , incluidos los menús contextuales, las herramientas de desarrollo, etc., utilizará la interfaz de usuario de tema claro . Lo mismo se ha demostrado en la Salida. Cualquier interfaz de usuario representada por el sistema en macOS , incluidos menús, marcos de ventanas, etc., utilizará la interfaz de usuario de tema claro .
    • La consulta CSS de esquema de color preferido coincidirá con el modo claro .
    • El evento Instancia actualizada se emitirá como se muestra en el código. Lo mismo se demuestra en la Salida.

A continuación se proporciona una explicación detallada del evento de instancia del módulo nativeTheme utilizado en el código: 

• actualizado: Evento Este evento de instancia se emite cuando se cambia alguna propiedad en el tema de Chromium nativo subyacente. Esto significa que el valor de cualquiera de las propiedades de Instancia de solo lectura ha cambiado. Como se discutió anteriormente, el valor de la propiedad nativeTheme.shouldUseDarkColors se puede cambiar cambiando el valor de la propiedad nativeTheme.themeSource . Después de que se emita este evento, debemos verificar manualmente qué propiedad de solo lectura ha cambiado como se describe anteriormente, ya que este evento de instancia no devuelve ninguna promesa/devolución de llamada.

En este punto, deberíamos poder determinar y cambiar con éxito el tema nativo de la aplicación Electron del código anterior. 

Producción: 

Nota: En el resultado anterior, el tema del sistema operativo está configurado en modo oscuro de forma predeterminada y, por lo tanto, la propiedad nativeTheme.shouldUseDarkColors Instance devuelve true . Además, al volver a cargar la aplicación, cualquier cambio realizado en el tema se revertirá al tema predeterminado del sistema operativo, ya que no conservaremos el valor de la propiedad nativeTheme.themeSource Instance dentro del almacenamiento local de la aplicación.

Una vez que hayamos logrado que la aplicación se adapte con éxito al tema del sistema nativo, debemos aplicar dinámicamente el CSS respectivo que sea compatible con ese tema para la aplicación. Esto es importante porque algunas propiedades del estilo no se pueden aplicar a ambos temas. Por ejemplo, no podemos usar el mismo color de fuente para el modo oscuro y para el modo claro . El siguiente tutorial demostrará cómo inyectar dinámicamente el CSS respectivo según el tema aplicado. 

• dark.css : agregue el siguiente fragmento en ese archivo.

body {
    background-color: darkgray;
    color: white;
}

• light.css : agregue el siguiente fragmento en ese archivo.

body {
    background-color: lightgray;
    color: black;
}

index.js : realice los siguientes cambios en este archivo. La función loadCSS(load) inserta dinámicamente CSS en la estructura HTML DOM en función del valor de string claro u oscuro que se le pasa. Simplemente estamos agregando otra etiqueta de enlace con el archivo CSS y las propiedades respectivas a la etiqueta principal del documento index.html usando el método appendChild . 

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

Salida: al especificar dinámicamente el archivo CSS, no estamos eliminando el archivo CSS anterior, si lo hay, y por lo tanto, el estilo aplicado a la aplicación incluye ambos archivos CSS. En caso de que perdamos una propiedad en cualquiera de los archivos CSS, aún se aplicará a la aplicación al cambiar el tema. Por lo tanto, podemos eliminar primero la etiqueta del enlace y luego volver a agregarla dinámicamente usando JS o anular todas las propiedades del archivo CSS anterior, haciendo copias idénticas y simplemente cambiando los valores.