기본 테마
Material 테마는 Ignite UI for Angular의 기본 테마입니다. 이를 사용하려면 core
뒤에 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 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);
light-theme
와 dark-theme
믹스인 모두 theme
믹스인을 포함합니다. 우리는 귀하의 편의를 위해 이러한 믹스인을 만듭니다. 그렇지 않고 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();
$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
에서 페이지 보기
GitHub