기본 테마

    밝은 버전의 Material 테마는 Ignite UI for Angular의 기본 테마입니다. 이를 사용하려면 mixin 뒤에 mixin을 theme 포함해야 합니다 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(
  $palette: $light-material-palette,
  $schema: $light-material-schema
);

// We can also include the Material font and font scaling
@include typography(
  $font-family: $material-typeface,
  $type-scale: $material-type-scale
);
scss

    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 theme(
  $palette: $dark-material-palette,
  $schema: $dark-material-schema
);

@include typography(
  $font-family: $material-typeface,
  $type-scale: $material-type-scale
);
scss

    어두운 스키마만 사용하고 싶지만 고유한 팔레트를 사용하려면 다음을 수동으로 수행해야 합니다.

    @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;
$surface-color: #303030;

// IMPORTANT, the primary, secondary and surface colors are required
// 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
$my-color-palette: palette(
  $primary: $primary-color,
  $secondary: $secondary-color,
  $surface: $surface-color,
  $gray: #fff,
);

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

    모든 개별 구성 요소는 기본적으로 를 $light-material-palette 사용하기 때문에 $info 및 $error와 같은 나머지 색상을 지정하지 않으면 기본값 $light-material-palette을 사용합니다.

    API Overview