Temas

    Com apenas algumas linhas de código, os usuários podem facilmente mudar o tema de seus componentes. Sendo desenvolvido por meio do SASS, o uso da API é de baixa dificuldade e oferece reestilização de um componente, de vários componentes ou de todo o conjunto.

    The Essence of a Theme

    Como o IgniteUI para Angular baseia seus designs de componentes nas Diretrizes de Design de Material, tentamos chegar o mais próximo possível em cores, tamanhos e aparência geral de nossos componentes daqueles criados pelo Google.

    Nossa abordagem à temática é baseada em vários conceitos simples.

    Paletas

    O primeiro conceito é o de paletas de cores. Como em qualquer ferramenta visual, as cores são a principal diferença entre um aplicativo e outro. As Diretrizes de Design de Material prescrevem paletas predefinidas de cores que variam em matiz e luminosidade para uma cor base. Há uma boa razão para isso. Eles realmente querem garantir uma boa correspondência de cores e contraste entre as cores de fundo e as cores do texto em primeiro plano. Isso é ótimo, mas limitante ao mesmo tempo. Se você quisesse ter sua própria paleta personalizada que correspondesse à sua marca, você estaria sem sorte. Reconhecemos que isso é um problema, então inventamos um algoritmo que geraria paletas semelhantes a Material a partir das cores base que você fornece. Ainda mais, também geramos cores de texto de contraste para cada matiz na paleta.

    Temas

    O segundo conceito é o de temas. Paletas não fariam muito bem se não fossem usadas por um tema. Então temos temas para cada componente, e um global, que estiliza todo o aplicativo e cada componente nele. Você simplesmente passa sua paleta gerada para o tema global, nós cuidamos do resto. Você pode, é claro, estilizar cada componente individualmente ao seu gosto. Daremos uma olhada mais de perto em como fazer isso mais tarde neste artigo.

    Tipografia

    O último conceito gira em torno da tipografia. Embora tenhamos uma escolha de tipo de letra padrão, realmente queremos dar a você o poder de estilizar seu aplicativo de todas as maneiras. A tipografia é uma parte muito importante disso. Fornecemos um método para alterar a família da fonte, os tamanhos e pesos para títulos, subtítulos e textos de parágrafo em seu aplicativo.

    Note

    O tema requer Sass.

    Generating Color Palettes

    Nossa biblioteca de temas é baseada em Sass. Se você usou o Ignite UI CLI para inicializar seu aplicativo, você pode especificar o estilo na configuração angular.json para scss, o CLI cuidará da compilação dos estilos Sass para você. Se você não usou Ignite UI CLI, então você tem que configurar seu construtor para compilar os estilos Sass para você.

    Nossas paletas aceitam argumentos a favorprimary,secondary​surface,,info,success,,warn eerror cores. A cor primária é aquela que será a cor mais proeminente durante toda a sua aplicação. A cor secundária é a usada em elementos que são acionáveis, como botões, interruptores, controles deslizantes, etc. A cor da superfície é usada como cor de fundo de alguns dos componentes. Os únicos argumentos obrigatórios são os a favorprimary esecondary​surface as cores. Nós damos por padrão os que parainfo,success,warn, eerror para um conjunto predefinido de nossa escolha.

    Para começar com nossa primeira paleta de cores, crie um arquivo scss que seria o arquivo base para seu tema global. Vou chamar o meu de "my-app-theme.scss".

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-color
);

    Agora temos uma paleta que contém exatamente 216 cores! Ei, espera, o quê? Como isso aconteceu? Você forneceu 3 e conseguiu 216? De onde vieram as outras 213 cores? Vamos parar aqui para explicar o que acabou de acontecer, pois é bastante importante. Quando você forneceuprimary​secondary esurface cores, pegamos esses e geramos tons e cores de destaque para cada um. Basicamente, agora na sua paleta você tem 3 subpaletas paraprimary,secondary esurface cores. Cada subpaleta contém 13 variações de cor adicionais baseadas na cor original. 5 das 13 cores são tons mais claros da sua cor original, e 4 são mais escuras. As outras 4 cores são versões mais exageradas de 'acento' da cor original. Com a cor original, isso dá um total de 14 cores em cada paleta.

    Com tantas cores em cada subpaleta, você pode estar se perguntando: como diabos vou saber qual é qual, certo? É bem simples, na verdade. Cada uma das cores da subpaleta tem um número. Atribuímos o número500 à cor original. Os tons mais claros começam e50 variam a.400 Os tons mais escuros começam e600 variam até900. As cores de destaque têm nomes deA100 cordas,A200,A400, eA700, respectivamente. Ok, mas agora isso é só 42 de 216. Não se preocupe, temos outra subpaleta que damos. Um que consiste em 'cores' cinzas, chamadograys. É igual às outras duas subpaletas de cores, mas não inclui variações de destaque. Ótimo, agora estamos em 42 + 10, totalizando 52 cores. Ainda é muito longe de 216. De onde vêm as outras 164 cores? Vamos resolver o quebra-cabeça final. Lembre-se que você também pode ter 4 cores adicionais parainfo,success ewarn​error. Então restam mais 56 cores desaparecidas. Lembre-se que a contagem para asprimary​secondary​surface​info​success​warn​error​grays subpaletas e subpaletas era exatamente 108, que é metade das 216 cores. A metade restante das cores são as cores contrastantes do texto para cada variante de cor, todas possuem-contrast como sufixo no nome da variável, e são pretas ou brancas.

    Entendeu? Ótimo! Mas como acessar qualquer uma das cores na paleta?

    Getting Sub-Palette Colors

    Oferecemos uma função fácil de lembrar e usarcolor. São necessários três argumentos -palette,color, evariant;

    $my-primary-600: color($my-color-palette, "primary", 600);
$my-primary-A700: color($my-color-palette, "secondary", "A700");
$my-warning-color: color($my-color-palette, "warn");
// sample usage

.my-awesome-class {
  background: $my-primary-600;
  border-color: $my-primary-A700;
}

.warning-bg {
  background: $my-warning-color;
}

    Getting Contrast Text Colors

    Semelhante a como obtemos as cores da subpaleta, há uma maneira de obter a cor de texto de contraste para cada uma das cores nas subpaletas.

    $my-primary-800: color($my-palette, "primary", 600);
$my-primary-800-text: contrast-color($my-palette, "primary", 600);
// sample usage

.my-awesome-article {
  background: $my-primary-800;
  color: $my-primary-800-text;
}

    Generating a Theme

    Se você incluiu o arquivo "igniteui-angular.css" no seu projeto de aplicativo, agora é um bom momento para removê-lo. Usaremos nosso próprio arquivo "my-app-theme.scss" para gerar nosso próprio tema.

    Vamos começar pelo nosso primeiro exemplo nesta página. Desta vez, porém, vamos incluir dois mixinscore etheme; Por enquantocore não aceita nenhum argumento,theme no entanto, aceita alguns -$palette,$schema,$exclude,$roundness,$elevation,.$elevations Por enquanto, vamos falar apenas sobre a$palette discussão.

    Important

    Incluircore antestheme é essencial. Acore mixina fornece todas as definições básicas necessárias paratheme funcionar.

    // Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-color
);

// IMPORTANT: Make sure you always include core first!
@include core();
// Pass the color palette we generated to the theme mixin
@include theme($my-color-palette);

    Pronto. Seu aplicativo agora usará as cores da sua paleta recém-gerada.

    No estado atual, a tipografia personalizada que define se limita a mudar afont family aplicação do aplicativo. Atualizaremos essa funcionalidade com os lançamentos seguintes. Nossa intenção é oferecer uma forma robusta de personalizar a tipografia do seu aplicativo.

    Para personalizar a tipografia, use otypography mixin. É preciso exatamente um argumento -config.

    Important

    Incluirtypography depoiscore é essencial. Isso está sujeito a mudanças em lançamentos futuros.

    // Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// IMPORTANT: Make sure you always include core first!
@include core();
// Include typography before theme
@include typography(
  $config: (
    font-family: "Comic Sans MS",
  )
);
@include theme($default-palette);