Tema predeterminado

    El tema Material es el tema predeterminado en Ignite UI for Angular. Para usarlo incluye los mixins theme después de core.

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
@include core();
@include theme($light-material-palette);

    Material Light Theme

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
@include core();
@include light-theme($light-material-palette);

    Material Dark Theme

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
@include core();
@include dark-theme($dark-material-palette);

    Tanto el mixin light-theme como el dark-theme incluyen el mixin theme. Creamos esos mixins solo para su conveniencia; de lo contrario, si desea usar el theme pero con una paleta oscura y un esquema oscuro, debe hacer manualmente lo siguiente:

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

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

$primary-color: #2ab759;
$secondary-color: #f96a88;

$my-color-palette: palette(
    // IMPORTANT, the primary and secondary colors are required
    $primary: $primary-color,
    $secondary: $secondary-color,
    // The $gray will ensure that all the black text, borders, etc will 
    // become a shade of white in order to be visible against a dark background
    $gray: #fff 
    // Since all individual components use the $default-palette by default, if you don't specify the rest of the colors like $info and $error they will use their default values from the $default-palette
);

@include theme($my-color-palette, $schema: $dark-schema);

    API Overview