Cómo cambiar al modo Dark o Light en Ionic 6

I. Introducción En la actualidad, el modo oscuro o “dark mode” se ha vuelto muy popular entre los usuarios de dispositivos móviles y de escritorio. Este modo de visualización utiliza un fondo negro con texto en blanco o colores claros, lo que resulta más cómodo para la vista y puede reducir el consumo de batería en dispositivos móviles con pantallas OLED. En este artículo, le mostraremos cómo habilitar el modo dark en su proyecto de Ionic 6 y cómo personalizar el tema para adaptarlo a sus necesidades.

II. ¿Qué es el modo dark en Ionic 6? Ionic 6 es un framework de desarrollo de aplicaciones móviles que permite crear aplicaciones híbridas para iOS, Android y la web. El modo dark es una característica de Ionic que permite cambiar la apariencia de la aplicación a un esquema de colores oscuros. Al habilitar esta opción, se cambia el fondo y los elementos de la aplicación a colores oscuros, lo que puede mejorar la legibilidad y reducir el consumo de batería en dispositivos con pantallas OLED.

III. Cómo habilitar el modo dark en Ionic 6 Para habilitar el modo dark en su proyecto de Ionic 6, siga los siguientes pasos:

Paso 1: Instalar Ionic CLI Antes de comenzar, asegúrese de tener instalado Ionic CLI en su sistema. Puede instalar Ionic CLI mediante el siguiente comando: npm install -g @ionic/cli

Paso 2: Crear un nuevo proyecto de Ionic Una vez que tenga instalado Ionic CLI, puede crear un nuevo proyecto de Ionic mediante el siguiente comando:

ionic start myApp tabs

Paso 3: Habilitar el modo dark en Ionic.

Teniendo en cuenta que en la ultima version del CLI de Ionic (Ionic 6), el archivo variables.scss ya contiene las clases para el modo dark, pero condicionadas con un media query igual al siguiente.

@media (prefers-color-scheme: dark)

Esto quiere decir, que la app reaccionara automáticamente al tema que tenga el sistema operativo lo cual hace complicado otras soluciones que hay publicadas. No obstante hay truco para lograrlo, deben eliminar el media query y añadirle la clase .dark al elemento body en las reglas:

body.dark {..}

.ios body.dark {..}

.md body.dark {…}

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
    /** primary **/
    --ion-color-primary: #3880ff;
    --ion-color-primary-rgb: 56, 128, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3171e0;
    --ion-color-primary-tint: #4c8dff;

    /** secondary **/
    --ion-color-secondary: #3dc2ff;
    --ion-color-secondary-rgb: 61, 194, 255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #36abe0;
    --ion-color-secondary-tint: #50c8ff;

    /** tertiary **/
    --ion-color-tertiary: #5260ff;
    --ion-color-tertiary-rgb: 82, 96, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #4854e0;
    --ion-color-tertiary-tint: #6370ff;

    /** success **/
    --ion-color-success: #2dd36f;
    --ion-color-success-rgb: 45, 211, 111;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 255, 255, 255;
    --ion-color-success-shade: #28ba62;
    --ion-color-success-tint: #42d77d;

    /** warning **/
    --ion-color-warning: #ffc409;
    --ion-color-warning-rgb: 255, 196, 9;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0ac08;
    --ion-color-warning-tint: #ffca22;

    /** danger **/
    --ion-color-danger: #eb445a;
    --ion-color-danger-rgb: 235, 68, 90;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #cf3c4f;
    --ion-color-danger-tint: #ed576b;

    /** dark **/
    --ion-color-dark: #222428;
    --ion-color-dark-rgb: 34, 36, 40;
    --ion-color-dark-contrast: #ffffff;
    --ion-color-dark-contrast-rgb: 255, 255, 255;
    --ion-color-dark-shade: #1e2023;
    --ion-color-dark-tint: #383a3e;

    /** medium **/
    --ion-color-medium: #92949c;
    --ion-color-medium-rgb: 146, 148, 156;
    --ion-color-medium-contrast: #ffffff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #808289;
    --ion-color-medium-tint: #9d9fa6;

    /** light **/
    --ion-color-light: #f4f5f8;
    --ion-color-light-rgb: 244, 245, 248;
    --ion-color-light-contrast: #000000;
    --ion-color-light-contrast-rgb: 0, 0, 0;
    --ion-color-light-shade: #d7d8da;
    --ion-color-light-tint: #f5f6f9;
}

/*
 * Dark Colors
 * -------------------------------------------
 */

body.dark {
    --ion-color-primary: #428cff;
    --ion-color-primary-rgb: 66, 140, 255;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3a7be0;
    --ion-color-primary-tint: #5598ff;

    --ion-color-secondary: #50c8ff;
    --ion-color-secondary-rgb: 80, 200, 255;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #46b0e0;
    --ion-color-secondary-tint: #62ceff;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106, 100, 255;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #5d58e0;
    --ion-color-tertiary-tint: #7974ff;

    --ion-color-success: #2fdf75;
    --ion-color-success-rgb: 47, 223, 117;
    --ion-color-success-contrast: #000000;
    --ion-color-success-contrast-rgb: 0, 0, 0;
    --ion-color-success-shade: #29c467;
    --ion-color-success-tint: #44e283;

    --ion-color-warning: #ffd534;
    --ion-color-warning-rgb: 255, 213, 52;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0bb2e;
    --ion-color-warning-tint: #ffd948;

    --ion-color-danger: #ff4961;
    --ion-color-danger-rgb: 255, 73, 97;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #e04055;
    --ion-color-danger-tint: #ff5b71;

    --ion-color-dark: #f4f5f8;
    --ion-color-dark-rgb: 244, 245, 248;
    --ion-color-dark-contrast: #000000;
    --ion-color-dark-contrast-rgb: 0, 0, 0;
    --ion-color-dark-shade: #d7d8da;
    --ion-color-dark-tint: #f5f6f9;

    --ion-color-medium: #989aa2;
    --ion-color-medium-rgb: 152, 154, 162;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0, 0, 0;
    --ion-color-medium-shade: #86888f;
    --ion-color-medium-tint: #a2a4ab;

    --ion-color-light: #222428;
    --ion-color-light-rgb: 34, 36, 40;
    --ion-color-light-contrast: #ffffff;
    --ion-color-light-contrast-rgb: 255, 255, 255;
    --ion-color-light-shade: #1e2023;
    --ion-color-light-tint: #383a3e;
}

/*
 * iOS Dark Theme
 * -------------------------------------------
 */

.ios body.dark {
    --ion-background-color: #000000;
    --ion-background-color-rgb: 0, 0, 0;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;

    --ion-color-step-50: #0d0d0d;
    --ion-color-step-100: #1a1a1a;
    --ion-color-step-150: #262626;
    --ion-color-step-200: #333333;
    --ion-color-step-250: #404040;
    --ion-color-step-300: #4d4d4d;
    --ion-color-step-350: #595959;
    --ion-color-step-400: #666666;
    --ion-color-step-450: #737373;
    --ion-color-step-500: #808080;
    --ion-color-step-550: #8c8c8c;
    --ion-color-step-600: #999999;
    --ion-color-step-650: #a6a6a6;
    --ion-color-step-700: #b3b3b3;
    --ion-color-step-750: #bfbfbf;
    --ion-color-step-800: #cccccc;
    --ion-color-step-850: #d9d9d9;
    --ion-color-step-900: #e6e6e6;
    --ion-color-step-950: #f2f2f2;

    --ion-item-background: #000000;

    --ion-card-background: #1c1c1d;
}

.ios ion-modal {
    --ion-background-color: var(--ion-color-step-100);
    --ion-toolbar-background: var(--ion-color-step-150);
    --ion-toolbar-border-color: var(--ion-color-step-250);
}


/*
 * Material Design Dark Theme
 * -------------------------------------------
 */

.md body.dark {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18, 18, 18;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255, 255, 255;

    --ion-border-color: #222222;

    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;

    --ion-item-background: #1e1e1e;

    --ion-toolbar-background: #1f1f1f;

    --ion-tab-bar-background: #1f1f1f;

    --ion-card-background: #1e1e1e;
}

¡Excelente! Ahora que hemos habilitado el modo dark en Ionic 6, podemos seguir con la personalización de nuestro proyecto.

Para cambiar el modo de la aplicación a voluntad, debemos modificar nuestro archivo HTML. A continuación, te explicaré cómo hacerlo:

Paso 4: Modificar el archivo HTML para cambiar el modo de la aplicación

<ion-list>
    <ion-item>
        <ion-icon slot="start" name="moon"></ion-icon>
        <ion-label>Toggle Dark Theme</ion-label>
        <ion-toggle slot="end"
                    [ngModel]="darkMode"
                    (ionChange)="cambio()"></ion-toggle>
    </ion-item>
</ion-list>

Este código crea un botón tipo toggle que, al hacer clic en él, llama a una función llamada cambio() y cambia el texto del botón según el modo actual de la aplicación.

Abra el archivo src/app/tabs/TabHomePage.ts y modifique dejándola de la siguiente función:

export class TabHomePage {

    darkMode: boolean = true;

    constructor() {
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
        this.darkMode = prefersDark.matches;
    }


    cambio() {
        // const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
        this.darkMode = !this.darkMode;
        document.body.classList.toggle( 'dark' );
    }
}

De esta forma se estaria cambiado a modo oscuro a claro y viceversa, si tambien quiere que se cambie cuando se cargue la app puedes realizar el siguiente cambio en AppComponent.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private platform: Platform) {
      this.initializeApp();
  }

    initializeApp() {
        this.platform.ready().then(() => {
            // this.statusBar.styleDefault();
            // this.splashScreen.hide();

            this.checkDarkTheme();
        });

    }

    checkDarkTheme() {
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
        if ( prefersDark.matches ) {
            document.body.classList.toggle( 'dark' );
        }
    }
}

Con estos cambios, ahora podrás cambiar entre el modo claro y el modo oscuro de tu aplicación Ionic 6. ¡Felicidades!

Recuerda que estos son solo algunos de los pasos que puedes seguir para personalizar el tema de tu proyecto de Ionic 6. Si deseas más información sobre este tema, te recomiendo visitar la documentación oficial de Ionic.

Espero que haiga sido de utilidad esta entrada, no te olvides de compartir y agregarme a tus favoritos.

Cómo cambiar al modo Dark o Light en Ionic 6

Autor del artículo

Dany J. Ruiz

Autor del artículo

Diferencias entre MakeHidden & Unset

Solución al error ERR_OSSL_EVP_UNSUPPORTED

Como generar Códigos QR utilizando JavaScript

Convierte Números en Cadenas en JavaScript: Guía Práctica

Mitos y Realidades de Angular

Ultimos post

Diferencias entre MakeHidden & Unset

Solución al error ERR_OSSL_EVP_UNSUPPORTED

Como generar Códigos QR utilizando JavaScript

Portafolio

Enlaces

Esc