Tema personalizado

Introducción

En este tutorial modificaremos la apariencia por defecto de nuestra aplicación, sustituyendo la paleta de colores por defecto por una personalizada.

Usar una plantilla para crear un tema

En esta página podemos encontrar un fichero por defecto que nos ayudará a establecer nuestro tema predeterminado.

Creamos el fichero y modificamos los colores como nos guste. Hay páginas que pueden ser de utilidad, como materialpalette.com, materialui.co o mcg.mbitson.com

custom-theme.css

@use '@angular/material' as mat;
@use 'node_modules/ontimize-web-ngx/theming/ontimize-style.scss' as ontimize-style;

/* Color definitions */
$mat-custom-primary: (
    50 : #fcf2e7,
    100 : #f8dec3,
    200 : #f3c89c,
    300 : #eeb274,
    400 : #eaa256,
    500 : #e69138,
    600 : #e38932,
    700 : #df7e2b,
    800 : #db7424,
    900 : #d56217,
    A100 : #ffffff,
    A200 : #ffe3d4,
    A400 : #ffc3a1,
    A700 : #ffb287,
    contrast: (50 : #4b4845, 100 : #4a423a, 200 : #483c2e, 300 : #473523, 400 : #46301a, 500 : #452b11, 600 : #44290f, 700 : #42260d, 800 : #41230b, 900 : #f2d0ba, A100 : #4c4c4c, A200 : #4c443f, A400 : #4c3a30, A700 : #4c3528)
);

/* Color definitions */
$mat-custom-primary-dark: (
        50 : #fcf2e7,
        100 : #f8dec3,
        200 : #f3c89c,
        300 : #eeb274,
        400 : #eaa256,
        500 : #e69138,
        600 : #e38932,
        700 : #df7e2b,
        800 : #db7424,
        900 : #d56217,
        A100 : #ffffff,
        A200 : #ffe3d4,
        A400 : #ffc3a1,
        A700 : #ffb287,
    contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #000000, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, )
);

// Define a theme.
$primary: mat.define-palette($mat-custom-primary);
$accent: $primary;
$primary-dark: mat.define-palette($mat-custom-primary-dark);
$accent-dark: $primary-dark;

/* Light theme */
$theme: ontimize-style.o-mat-light-theme($primary, $accent);

/* Dark theme */
$dark-theme: ontimize-style.o-mat-dark-theme($primary-dark, $accent-dark);

Luego para aplicar nuestro tema, modificaremos en tema en el fichero app.scss, para que use el fichero custom-theme.scss en vez de ontimize-web-ngx/theming/themes/ontimize.scss

app.scss

// Define your custom theme or choose predefined theme
// @use 'ontimize-web-ngx/theming/themes/ontimize.scss'as theme;
@use './custom-theme.scss' as theme;
@use 'ontimize-web-ngx/theming/ontimize-style.scss';
@use '../../app/login/login.theme.scss'as login;

// Include ontimize styles
@include ontimize-style.ontimize-theme-styles(theme.$theme);

// Propagate theme to screen styles definition.
@include login.login-theme(theme.$theme);


//Include dark styles option
.o-dark {
  @include ontimize-style.ontimize-theme-all-component-color(theme.$dark-theme);
}

Modo oscuro

Este modo lo podemos activar, modificando en el fichero custom-theme.scss la variable $theme que carga el modo claro para forzar su carga por defecto.

custom-theme.scss

@use '@angular/material' as mat;
@use 'node_modules/ontimize-web-ngx/theming/ontimize-style.scss' as ontimize-style;

/* Color definitions */
$mat-custom-primary: (
    50 : #fcf2e7,
    100 : #f8dec3,
    200 : #f3c89c,
    300 : #eeb274,
    400 : #eaa256,
    500 : #e69138,
    600 : #e38932,
    700 : #df7e2b,
    800 : #db7424,
    900 : #d56217,
    A100 : #ffffff,
    A200 : #ffe3d4,
    A400 : #ffc3a1,
    A700 : #ffb287,
    contrast: (50 : #4b4845, 100 : #4a423a, 200 : #483c2e, 300 : #473523, 400 : #46301a, 500 : #452b11, 600 : #44290f, 700 : #42260d, 800 : #41230b, 900 : #f2d0ba, A100 : #4c4c4c, A200 : #4c443f, A400 : #4c3a30, A700 : #4c3528)
);

/* Color definitions */
$mat-custom-primary-dark: (
        50 : #fcf2e7,
        100 : #f8dec3,
        200 : #f3c89c,
        300 : #eeb274,
        400 : #eaa256,
        500 : #e69138,
        600 : #e38932,
        700 : #df7e2b,
        800 : #db7424,
        900 : #d56217,
        A100 : #ffffff,
        A200 : #ffe3d4,
        A400 : #ffc3a1,
        A700 : #ffb287,
    contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #000000, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, )
);

// Define a theme.
$primary: mat.define-palette($mat-custom-primary);
$accent: $primary;
$primary-dark: mat.define-palette($mat-custom-primary-dark);
$accent-dark: $primary-dark;

/* Light theme */
// $theme: ontimize-style.o-mat-light-theme($primary, $accent);
$theme: ontimize-style.o-mat-dark-theme($primary-dark, $accent-dark);

/* Dark theme */
$dark-theme: ontimize-style.o-mat-dark-theme($primary-dark, $accent-dark);

Nota

Los estilos personalizados de este tutorial no se adecuan totalmente al modo oscuro, por lo que no tendremos esta opción activa.

arrow_back Tutorial anterior Próximo tutorial arrow_forward