.
¿Tienes identificado el sistema que necesitas?
Selecciona una opción
Selecciona una opción
Describe brevemente lo que necesitas desarrollar:
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí tu descripción
¿Para qué plataformas lo necesitas?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué requieres que contenga el software?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué sistema de notificaciones requieres?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Cuáles de las siguientes tecnologías deseas implementar?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Podrías especificar o describir la tecnología que requieres implementar?
Favor de llenar este campo
Favor de llenar este campo
Describe aquí la tecnología
¿Con qué clase o tipo de hardware necesita el software ser compatible?
Favor de llenar este campo
Favor de llenar este campo
Sensores, paneles, cámaras, etc.
¿A qué clase o tipo de sistema estás considerando integrar este software?
Favor de llenar este campo
Favor de llenar este campo
Describe aquí el sistema existente
Describe brevemente el problema que intentas solucionar:
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí tu descripción
¿En qué área de tu empresa se encuentra el problema?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué otra área?
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí el nombre de la área
¿Con quién nos dirigimos?
Favor de compartir mínimo 1 nombre y 1 apellido para saber a quién dirigirnos
Favor de llenar este campo
Favor de llenar este campo
Nombre
¿Cuál es tu correo electrónico?
Favor de escribir un correo electrónico valido
Favor de escribir un correo electrónico valido
Correo electrónico
¿Cómo te gustaría que te contactáramos?
Selecciona tu metodo de contacto preferido
Selecciona una
Selecciona una
¿Cuál es tu número de WhatsApp?
Favor de escribir un número de WhatsApp valido (10 dígitos)
Favor de escribir un número de WhatsApp valido (10 dígitos)
Número de WhatsApp
¿Cuál es tu número de teléfono?
Favor de escribir un número de teléfono valido (10 dígitos)
Favor de escribir un número de teléfono valido (10 dígitos)
Número de teléfono
.
Have you identified the type of system you need?
Selecciona una opción
Selecciona una opción
In just a few words, describe the type of system you're looking for
Please fill out this field
Please fill out this field
Describe the system you need, here.
On what types of platforms does it need to run?
Choose as many as you need
Choose at least one
Choose at least one
What does it need to do?
Choose as many as you need
Choose at least one
Choose at least one
What type of notification alerts do you need?
Choose as many as you need
Choose at least one
Choose at least one
Which technologies does it need to work with?
Choose as many as you need
Choose at least one
Choose at least one
Could you specify or describe the technology you want it to work with?
Please, fill out this field
Please, fill out this field
Describe it here
What kind of existing hardware does it need to work with?
Please, fill out this field
Please, fill out this field
Sensors, cameras, panels, etc.
What kind of existing software does it need to work with?
Please, fill out this field
Please, fill out this field
Describe it here
Describe in just a few words the problem that you're trying to solve:
Please, fill out this field
Please, fill out this field
Describe it here
In what area of your business is the problem located in?
Choose as many as you need
Choose at least one
Choose at least one
What other area?
Please, fill out this field
Please, fill out this field
Name of the area
Who should we address?
Please, fill out this field
Please, fill out this field
First and last name
What's your email address?
Please, use a valid email
Please, use a valid email
Email
How would you like to be contacted
Choose your preferred method
Choose one
Choose one
What's your phone number?
It has to be a valid 10 digit phone number
It has to be a valid 10 digit phone number
Phone number
¿Tienes identificado el sistema que necesitas?
Selecciona una opción
Selecciona una opción
Describe brevemente lo que necesitas desarrollar:
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí tu descripción
¿Para qué plataformas lo necesitas?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué requieres que contenga el software?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué sistema de notificaciones requieres?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Cuáles de las siguientes tecnologías deseas implementar?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Podrías especificar o describir la tecnología que requieres implementar?
Favor de llenar este campo
Favor de llenar este campo
Describe aquí la tecnología
¿Con qué clase o tipo de hardware necesita el software ser compatible?
Favor de llenar este campo
Favor de llenar este campo
Sensores, paneles, cámaras, etc.
¿A qué clase o tipo de sistema estás considerando integrar este software?
Favor de llenar este campo
Favor de llenar este campo
Describe aquí el sistema existente
Describe brevemente el problema que intentas solucionar:
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí tu descripción
¿En qué área de tu empresa se encuentra el problema?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué otra área?
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí el nombre de la área
¿Con quién nos dirigimos?
Favor de compartir mínimo 1 nombre y 1 apellido para saber a quién dirigirnos
Favor de llenar este campo
Favor de llenar este campo
Nombre
¿Cuál es tu correo electrónico?
Favor de escribir un correo electrónico valido
Favor de escribir un correo electrónico valido
Correo electrónico
¿Cómo te gustaría que te contactáramos?
Selecciona tu metodo de contacto preferido
Selecciona una
Selecciona una
¿Cuál es tu número de WhatsApp?
Favor de escribir un número de WhatsApp valido (10 dígitos)
Favor de escribir un número de WhatsApp valido (10 dígitos)
Número de WhatsApp
¿Cuál es tu número de teléfono?
Favor de escribir un número de teléfono valido (10 dígitos)
Favor de escribir un número de teléfono valido (10 dígitos)
Número de teléfono
Have you identified the type of system you need?
Selecciona una opción
Selecciona una opción
In just a few words, describe the type of system you're looking for
Please fill out this field
Please fill out this field
Describe the system you need, here.
On what types of platforms does it need to run?
Choose as many as you need
Choose at least one
Choose at least one
What does it need to do?
Choose as many as you need
Choose at least one
Choose at least one
What type of notification alerts do you need?
Choose as many as you need
Choose at least one
Choose at least one
Which technologies does it need to work with?
Choose as many as you need
Choose at least one
Choose at least one
Could you specify or describe the technology you want it to work with?
Please, fill out this field
Please, fill out this field
Describe it here
What kind of existing hardware does it need to work with?
Please, fill out this field
Please, fill out this field
Sensors, cameras, panels, etc.
What kind of existing software does it need to work with?
Please, fill out this field
Please, fill out this field
Describe it here
Describe in just a few words the problem that you're trying to solve:
Please, fill out this field
Please, fill out this field
Describe it here
In what area of your business is the problem located in?
Choose as many as you need
Choose at least one
Choose at least one
What other area?
Please, fill out this field
Please, fill out this field
Name of the area
Who should we address?
Please, fill out this field
Please, fill out this field
First and last name
What's your email address?
Please, use a valid email
Please, use a valid email
Email
How would you like to be contacted
Choose your preferred method
Choose one
Choose one
What's your phone number?
It has to be a valid 10 digit phone number
It has to be a valid 10 digit phone number
Phone number
.
¿Tienes identificado el sistema que necesitas?
Selecciona una opción
Selecciona una opción
Describe brevemente lo que necesitas desarrollar:
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí tu descripción
¿Para qué plataformas lo necesitas?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué requieres que contenga el software?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué sistema de notificaciones requieres?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Cuáles de las siguientes tecnologías deseas implementar?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Podrías especificar o describir la tecnología que requieres implementar?
Favor de llenar este campo
Favor de llenar este campo
Describe aquí la tecnología
¿Con qué clase o tipo de hardware necesita el software ser compatible?
Favor de llenar este campo
Favor de llenar este campo
Sensores, paneles, cámaras, etc.
¿A qué clase o tipo de sistema estás considerando integrar este software?
Favor de llenar este campo
Favor de llenar este campo
Describe aquí el sistema existente
Describe brevemente el problema que intentas solucionar:
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí tu descripción
¿En qué área de tu empresa se encuentra el problema?
Selecciona cuantas apliquen
Selecciona al menos una
Selecciona al menos una
¿Qué otra área?
Favor de llenar este campo
Favor de llenar este campo
Escribe aquí el nombre de la área
¿Con quién nos dirigimos?
Favor de compartir mínimo 1 nombre y 1 apellido para saber a quién dirigirnos
Favor de llenar este campo
Favor de llenar este campo
Nombre
¿Cuál es tu correo electrónico?
Favor de escribir un correo electrónico valido
Favor de escribir un correo electrónico valido
Correo electrónico
¿Cómo te gustaría que te contactáramos?
Selecciona tu metodo de contacto preferido
Selecciona una
Selecciona una
¿Cuál es tu número de WhatsApp?
Favor de escribir un número de WhatsApp valido (10 dígitos)
Favor de escribir un número de WhatsApp valido (10 dígitos)
Número de WhatsApp
¿Cuál es tu número de teléfono?
Favor de escribir un número de teléfono valido (10 dígitos)
Favor de escribir un número de teléfono valido (10 dígitos)
Número de teléfono
.
Have you identified the type of system you need?
Selecciona una opción
Selecciona una opción
In just a few words, describe the type of system you're looking for
Please fill out this field
Please fill out this field
Describe the system you need, here.
On what types of platforms does it need to run?
Choose as many as you need
Choose at least one
Choose at least one
What does it need to do?
Choose as many as you need
Choose at least one
Choose at least one
What type of notification alerts do you need?
Choose as many as you need
Choose at least one
Choose at least one
Which technologies does it need to work with?
Choose as many as you need
Choose at least one
Choose at least one
Could you specify or describe the technology you want it to work with?
Please, fill out this field
Please, fill out this field
Describe it here
What kind of existing hardware does it need to work with?
Please, fill out this field
Please, fill out this field
Sensors, cameras, panels, etc.
What kind of existing software does it need to work with?
Please, fill out this field
Please, fill out this field
Describe it here
Describe in just a few words the problem that you're trying to solve:
Please, fill out this field
Please, fill out this field
Describe it here
In what area of your business is the problem located in?
Choose as many as you need
Choose at least one
Choose at least one
What other area?
Please, fill out this field
Please, fill out this field
Name of the area
Who should we address?
Please, fill out this field
Please, fill out this field
First and last name
What's your email address?
Please, use a valid email
Please, use a valid email
Email
How would you like to be contacted
Choose your preferred method
Choose one
Choose one
What's your phone number?
It has to be a valid 10 digit phone number
It has to be a valid 10 digit phone number
Phone number

Cómo implementar Dark Mode en Ionic 5

by | Oct 8, 2020 | Desarrollo Móvil, Ionic

El Dark Mode en las aplicaciones últimamente esta muy de moda  dándole un giro elegante, diferente y hasta funcional (en el caso del cansancio en los ojos al ver colores nítidos y brillosos) y Ionic no se queda atrás, a continuación vamos a configurar una aplicación para utilizar este famoso modo obscuro :

El primer paso es ejecutar los siguientes comandos en la consola para crear una aplicación en blanco:

ionic start EjemploDarkMode blank 
cd EjemploDarkMode 
ionic serve -o

 

El segundo paso es copiar el siguiente código en el archivo variables.scss dentro de la carpeta theme y lo vamos a pegar hasta el final (en el caso de que ya exista la paleta de colores Dark Mode, remplazar con estos colores):

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-toolbar-background: #0d0d0d;

--ion-item-background: #000000;

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

/*
* 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;
}

El tercer paso es agregar el  método changeDarkMode() y lo llamaremos dentro del metodo initializeApp(), que lo que hace es que si el navegador esta configurado como dark mode aplicara este mismo estilo, y si es light mode hará lo mismo:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

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

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

El cuarto paso es agregar algunas líneas de código en el archivo home.page.ts, creamos una variable llamada darkMode de tipo booleana, la declaramos como true y la función básicamente hace que si el Dark mode esta activado, cambia la variable a false, para que así cambie al Light mode: 



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

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {

darkMode: boolean = true;

constructor() {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
this.darkMode = prefersDark.matches;
}
// funcion para cambiar el modo desde el toggle
change() {
this.darkMode = !this.darkMode;
document.body.classList.toggle('dark');
 }
}

El quinto paso es agregar una opción para que el usuario pueda cambiar el Dark Mode en el archivo home.page.ts , en este caso agregaremos una Toggle para cambiar el modo:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="body">
<ion-list>
  <ion-item>
    <ion-icon slot="start" name="moon"></ion-icon>
    <ion-label>Toogle Dark Mode</ion-label>
    <ion-toggle slot="end" [ngModel]="darkMode" (ionChange)="change()"></ion-toggle>
  </ion-item>
</ion-list>

  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

 

El sexto y ultimo paso es compilar la aplicación, en mi caso en Android con el siguiente código:

 ionic cordova run android 

Y listo, deberíamos de tener algo como lo siguiente:

fuente:https://ionicframework.com/docs/theming/dark-mode

Entradas relacionadas

Descubre en 5 minutos las áreas de tu empresa puedes mejorar