Você pode usar mat-color com o tema Angulars?

Question

Você pode usar mat-color com o tema Angulars?

estou a usar um tema Angular com a minha aplicação angular 9, tenho uma instância onde quero usar a cor do tapete mais clara e mais escura (para a cor e a cor traseira, respectivamente), consegui que isto funcionasse antes com um tema personalizado, mas nunca com um tema Angular.

eu adicionei

background-color: mat-color($color-error, lighter);
color: mat-color($color-error, darker);

para o meu css onde o $color-error é uma variável que criei. As cores não estão a chegar à aula.

de qualquer forma posso usar mais claro ou mais escuro com cor do tapete?

Obrigado.

0

angular typescript sass

Author: DevStacker, 2020-09-06

Source

1 answers

score 0 · Answer 1

Aqui está um exemplo que eu criei no stackblitz sobre como você pode criar um tema com angular e definir uma cor mais clara e mais escura com base na cor da paleta

Aqui está o código importante:

Tema.scss:

@import '~@angular/material/theming';

@include mat-core();

$custom-primary: mat-palette($mat-teal);
$custom-accent:  mat-palette($mat-pink, A200, A100, A400);
$custom-warn:    mat-palette($mat-red);
$custom-theme:   mat-light-theme($custom-primary, $custom-accent, $custom-warn);

@include angular-material-theme($custom-theme);

Neste ficheiro, crio um tema personalizado e defino um tema de luz.

Variáveis.scss:

@import './theme.scss';

$primary: mat-color($custom-primary);
$primary-lighter: mat-color($custom-primary, lighter);
$primary-darker: mat-color($custom-primary, darker);

Aqui, crio 3 variáveis contendo cores primárias, mais claras e mais escuras com base na cor primária definida no tema acima. Repare que as suas cores mais claras e escuras devem basear-se numa cor da paleta. Você não pode simplesmente escolher uma cor aleatória (mesmo que seja uma cor de angular. Para uma cor vermelha aqui, você terá que usar $custom-warn). Se você ainda precisa clarear ou escurecer uma cor fora da paleta, ainda há SCSS lighten e darken mixinas permitindo que você faça isso:

lighten($myColor, 30%), o mesmo para darken.

Para que este tema e variáveis funcionem, você precisa importar theme.scss em styles.scss e onde quer que você se quiser usar as suas variáveis personalizadas, terá de importar variables.scss e é tudo.