Tema personalizado
Última modificación por Pablo Martínez Kirsten el 2022/03/03 12:33
Introducción
En este tutorial modificaremos la apariencia por defecto de nuestra aplicación, sustituyendo la paleta de colores por defecto por una personalizada.
Duplicar el tema por defecto
| Lo primero es obtener una copia del css que usa aplicación para poder modificarlo. En el fichero app.scss, encontramos que el fichero que carga el tema se encuentra en la carpeta node_modules/ontimize-web-ngx-theming/src/themes/ontimize.scss. Creamos una copia del fichero y lo guardamos en la carpeta src/assets/css/, renombrándolo a custom-theme.scss o cualquier otro nombre. Modificaremos el valor de las variables que queramos, pudiéndonos valer de los valores que nos muestran páginas como ésta app.scss // ******* @angular/material predefined themes. ******* // Choose one of the following imports // @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-indigo-pink.scss'; // @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-deeppurple-amber.scss'; // @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-pink-bluegrey.scss'; // @import 'node_modules/ontimize-web-ngx-theming/src/themes/mat-purple-green.scss'; // @import 'node_modules/ontimize-web-ngx-theming/src/themes/ontimize.scss'; @import 'custom-theme.scss'; // Include ontimize theme @import 'node_modules/ontimize-web-ngx-theming/ontimize-theme.scss'; @include ontimize-theme-styles($theme); // Include ontimize-lite theme // @import 'node_modules/ontimize-web-ngx-theming/ontimize-theme-lite.scss'; // @include ontimize-theme-styles-lite($theme); // After define theme, it is necessary to transfer color to Ontimize Web framework @import 'node_modules/ontimize-web-ngx/theme.scss'; @include o-material-theme($theme); // Propagate theme to screen styles definition. @import '../../app/login/login.theme.scss'; @include login-theme($theme); custom-theme.scss @import "node_modules/@angular/material/theming"; // Include non-theme styles for core. @include mat-core(); /* Color definitions */ $mat-custom-primary: ( 50: #feefe0, 100: #fcd8b3, 200: #fabe80, 300: #f8a34d, 400: #f79026, 500: #f57c00, 600: #f47400, 700: #f26900, 800: #f05f00, 900: #ee4c00, A100: #ffffff, A200: #ffe9e1, A400: #ffc3ae, A700: #ffb095, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #000000, 500: #000000, 600: #000000, 700: #000000, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); $mat-custom-accent: ( 50: #ebe8ff, 100: #ccc5ff, 200: #ab9eff, 300: #8977fe, 400: #6f5afe, 500: #563dfe, 600: #4f37fe, 700: #452ffe, 800: #3c27fe, 900: #2b1afd, A100: #ffffff, A200: #fdfcff, A400: #cdc9ff, A700: #b5b0ff, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); // Define a theme. $primary: mat-palette($mat-custom-primary); $accent: mat-palette($mat-custom-accent); $background-color: #eceff1; /* Light theme */ $theme: mat-light-theme($primary, $accent); // Insert custom background color $background: map-get($theme, background); $background: map_merge( $background, ( background: $background-color, ) ); $theme: map_merge( $theme, ( background: $background, ) ); /* Dark theme */ $primary-dark: mat-palette($mat-custom-primary); $accent-dark: mat-palette($mat-custom-accent); $dark-theme: mat-dark-theme($primary-dark, $accent-dark); |
Modo oscuro
| Comentamos la variable $theme correspondiente al tema claro y renombramos la del tema oscuro como $theme custom-theme.scss @import "node_modules/@angular/material/theming"; // Include non-theme styles for core. @include mat-core(); /* Color definitions */ $mat-custom-primary: ( 50: #feefe0, 100: #fcd8b3, 200: #fabe80, 300: #f8a34d, 400: #f79026, 500: #f57c00, 600: #f47400, 700: #f26900, 800: #f05f00, 900: #ee4c00, A100: #ffffff, A200: #ffe9e1, A400: #ffc3ae, A700: #ffb095, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #000000, 500: #000000, 600: #000000, 700: #000000, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); $mat-custom-accent: ( 50: #ebe8ff, 100: #ccc5ff, 200: #ab9eff, 300: #8977fe, 400: #6f5afe, 500: #563dfe, 600: #4f37fe, 700: #452ffe, 800: #3c27fe, 900: #2b1afd, A100: #ffffff, A200: #fdfcff, A400: #cdc9ff, A700: #b5b0ff, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); // Define a theme. $primary: mat-palette($mat-custom-primary); $accent: mat-palette($mat-custom-accent); $background-color: #eceff1; /* Light theme */ // $theme: mat-light-theme($primary, $accent); /* Dark theme */ $primary-dark: mat-palette($mat-custom-primary); $accent-dark: mat-palette($mat-custom-accent); $theme: mat-dark-theme($primary-dark, $accent-dark); // Insert custom background color $background: map-get($theme, background); $background: map_merge( $background, ( background: $background-color, ) ); $theme: map_merge( $theme, ( background: $background, ) ); |
| << Tutorial previo | Índice | Próximo tutorial >> |