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);
}
- ontimize-web-tutorial
- e2e
- src
- app.e2e-spec.ts
- app.po.ts
- protractor.conf.js
- tsconfig.json
- src
- src
- app
- login
- login-routing.module.ts
- login.component.html
- login.component.scss
- login.component.ts
- login.module.ts
- login.theme.scss
- main
- accounts
- accounts-detail
- movement-column-renderer
- movement-column-renderer.component.css
- movement-column-renderer.component.html
- movement-column-renderer.component.ts
- accounts-detail.component.css
- accounts-detail.component.html
- accounts-detail.component.ts
- movement-column-renderer
- accounts-home
- account-number-render
- account-number-render.component.css
- account-number-render.component.html
- account-number-render.component.ts
- accounts-home.component.css
- accounts-home.component.html
- accounts-home.component.ts
- account-number-render
- accounts-new
- accounts-new.component.css
- accounts-new.component.html
- accounts-new.component.ts
- add-customer
- add-customer.component.css
- add-customer.component.html
- add-customer.component.ts
- add-movement
- add-movement.component.css
- add-movement.component.html
- add-movement.component.ts
- accounts-routing.module.ts
- accounts.module.ts
- accounts-detail
- branches
- branches-detail
- branches-detail.component.css
- branches-detail.component.html
- branches-detail.component.ts
- branches-home
- branches-home.component.css
- branches-home.component.html
- branches-home.component.ts
- branches-new
- branches-new.component.css
- branches-new.component.html
- branches-new.component.ts
- branches-routing.module.ts
- branches.module.ts
- branches-detail
- customers
- customers-detail
- add-account
- add-account.component.css
- add-account.component.html
- add-account.component.ts
- customers-detail.component.css
- customers-detail.component.html
- customers-detail.component.ts
- add-account
- customers-home
- customertype-column-renderer
- customertype-column-renderer.component.css
- customertype-column-renderer.component.html
- customertype-column-renderer.component.ts
- customers-home.component.css
- customers-home.component.html
- customers-home.component.ts
- customertype-column-renderer
- customers-new
- customers-new.component.css
- customers-new.component.html
- customers-new.component.ts
- customers-routing.module.ts
- customers.module.ts
- customers-detail
- employees
- employees-detail
- employees-detail.component.css
- employees-detail.component.html
- employees-detail.component.ts
- employees-home
- employees-home.component.css
- employees-home.component.html
- employees-home.component.ts
- employees-routing.module.ts
- employees.module.ts
- employees-detail
- home
- home-routing.module.ts
- home.component.html
- home.component.scss
- home.component.ts
- home.module.ts
- service-ex
- service-ex-details
- service-ex-details.component.css
- service-ex-details.component.html
- service-ex-details.component.ts
- service-ex-home
- service-ex-home.component.css
- service-ex-home.component.html
- service-ex-home.component.ts
- service-ex-routing.module.ts
- service-ex.module.ts
- service-ex-details
- main-routing.module.ts
- main.component.html
- main.component.scss
- main.component.ts
- main.module.ts
- accounts
- shared
- account-card
- account-card.component.css
- account-card.component.html
- account-card.component.ts
- branch-card
- branch-card.component.css
- branch-card.component.html
- branch-card.component.ts
- customer-card
- customer-card.component.css
- customer-card.component.html
- customer-card.component.ts
- employee-card
- employee-card.component.css
- employee-card.component.html
- employee-card.component.ts
- service-ex-card
- service-ex-card.component.css
- service-ex-card.component.html
- service-ex-card.component.ts
- app.menu.config.ts
- app.services.config.ts
- shared.module.ts
- star-wars-response-adapter.ts
- star-wars.service.ts
- account-card
- app-routing.module.ts
- app.component.html
- app.component.scss
- app.component.spec.ts
- app.component.ts
- app.config.ts
- app.module.ts
- login
- assets
- css
- app.scss
- custom-theme.scss
- loader.css
- i18n
- en.json
- es.json
- icons
- ontimize128.png
- ontimize16.png
- ontimize256.png
- ontimize32.png
- ontimize48.png
- ontimize64.png
- ontimize72.png
- ontimize96.png
- images
- login_bg.png
- no-image.png
- normal_24.png
- ontimize.png
- ontimize_web_log.png
- other_24.png
- sidenav-closed.png
- sidenav-opened.png
- user_profile.png
- vip_24.png
- js
- domchange.js
- keyboard.js
- .gitkeep
- css
- environments
- environment.prod.ts
- environment.ts
- favicon.ico
- index.html
- main.ts
- manifest.webmanifest
- polyfills.ts
- styles.scss
- test.ts
- app
- .browserslistrc
- .editorconfig
- .eslintrc.json
- .gitignore
- angular.json
- karma.conf.js
- ngsw-config.json
- package-lock.json
- package.json
- README.md
- tsconfig.app.json
- tsconfig.json
- tsconfig.spec.json
- e2e
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);
- ontimize-web-tutorial
- e2e
- src
- app.e2e-spec.ts
- app.po.ts
- protractor.conf.js
- tsconfig.json
- src
- src
- app
- login
- login-routing.module.ts
- login.component.html
- login.component.scss
- login.component.ts
- login.module.ts
- login.theme.scss
- main
- accounts
- accounts-detail
- movement-column-renderer
- movement-column-renderer.component.css
- movement-column-renderer.component.html
- movement-column-renderer.component.ts
- accounts-detail.component.css
- accounts-detail.component.html
- accounts-detail.component.ts
- movement-column-renderer
- accounts-home
- account-number-render
- account-number-render.component.css
- account-number-render.component.html
- account-number-render.component.ts
- accounts-home.component.css
- accounts-home.component.html
- accounts-home.component.ts
- account-number-render
- accounts-new
- accounts-new.component.css
- accounts-new.component.html
- accounts-new.component.ts
- add-customer
- add-customer.component.css
- add-customer.component.html
- add-customer.component.ts
- add-movement
- add-movement.component.css
- add-movement.component.html
- add-movement.component.ts
- accounts-routing.module.ts
- accounts.module.ts
- accounts-detail
- branches
- branches-detail
- branches-detail.component.css
- branches-detail.component.html
- branches-detail.component.ts
- branches-home
- branches-home.component.css
- branches-home.component.html
- branches-home.component.ts
- branches-new
- branches-new.component.css
- branches-new.component.html
- branches-new.component.ts
- branches-routing.module.ts
- branches.module.ts
- branches-detail
- customers
- customers-detail
- add-account
- add-account.component.css
- add-account.component.html
- add-account.component.ts
- customers-detail.component.css
- customers-detail.component.html
- customers-detail.component.ts
- add-account
- customers-home
- customertype-column-renderer
- customertype-column-renderer.component.css
- customertype-column-renderer.component.html
- customertype-column-renderer.component.ts
- customers-home.component.css
- customers-home.component.html
- customers-home.component.ts
- customertype-column-renderer
- customers-new
- customers-new.component.css
- customers-new.component.html
- customers-new.component.ts
- customers-routing.module.ts
- customers.module.ts
- customers-detail
- employees
- employees-detail
- employees-detail.component.css
- employees-detail.component.html
- employees-detail.component.ts
- employees-home
- employees-home.component.css
- employees-home.component.html
- employees-home.component.ts
- employees-routing.module.ts
- employees.module.ts
- employees-detail
- home
- home-routing.module.ts
- home.component.html
- home.component.scss
- home.component.ts
- home.module.ts
- service-ex
- service-ex-details
- service-ex-details.component.css
- service-ex-details.component.html
- service-ex-details.component.ts
- service-ex-home
- service-ex-home.component.css
- service-ex-home.component.html
- service-ex-home.component.ts
- service-ex-routing.module.ts
- service-ex.module.ts
- service-ex-details
- main-routing.module.ts
- main.component.html
- main.component.scss
- main.component.ts
- main.module.ts
- accounts
- shared
- account-card
- account-card.component.css
- account-card.component.html
- account-card.component.ts
- branch-card
- branch-card.component.css
- branch-card.component.html
- branch-card.component.ts
- customer-card
- customer-card.component.css
- customer-card.component.html
- customer-card.component.ts
- employee-card
- employee-card.component.css
- employee-card.component.html
- employee-card.component.ts
- service-ex-card
- service-ex-card.component.css
- service-ex-card.component.html
- service-ex-card.component.ts
- app.menu.config.ts
- app.services.config.ts
- shared.module.ts
- star-wars-response-adapter.ts
- star-wars.service.ts
- account-card
- app-routing.module.ts
- app.component.html
- app.component.scss
- app.component.spec.ts
- app.component.ts
- app.config.ts
- app.module.ts
- login
- assets
- css
- app.scss
- custom-theme.scss
- loader.css
- i18n
- en.json
- es.json
- icons
- ontimize128.png
- ontimize16.png
- ontimize256.png
- ontimize32.png
- ontimize48.png
- ontimize64.png
- ontimize72.png
- ontimize96.png
- images
- login_bg.png
- no-image.png
- normal_24.png
- ontimize.png
- ontimize_web_log.png
- other_24.png
- sidenav-closed.png
- sidenav-opened.png
- user_profile.png
- vip_24.png
- js
- domchange.js
- keyboard.js
- .gitkeep
- css
- environments
- environment.prod.ts
- environment.ts
- favicon.ico
- index.html
- main.ts
- manifest.webmanifest
- polyfills.ts
- styles.scss
- test.ts
- app
- .browserslistrc
- .editorconfig
- .eslintrc.json
- .gitignore
- angular.json
- karma.conf.js
- ngsw-config.json
- package-lock.json
- package.json
- README.md
- tsconfig.app.json
- tsconfig.json
- tsconfig.spec.json
- e2e
Nota
Los estilos personalizados de este tutorial no se adecuan totalmente al modo oscuro, por lo que no tendremos esta opción activa.