글로벌 테마

전역 테마를 사용하면 사용자 정의 색상 팔레트, 스키마 및 고도를 사용하는 테마를 빠르게 생성할 수 있습니다. 색상 팔레트, 스키마 및 입면도는 사용자 정의 테마가 생성되지 않은 모든 구성 요소에 전파됩니다.

개요

If you've included the igniteui-angular.css file in your application project, now is a good time to remove it. We are going to use our own my-app-theme.scss file to generate a global theme for all components in our application.

Ignite UI for Angular uses a global theme by default to theme the entire suite of components. You can, however, create themes scoped to components you have in your app, depending on your use case. For now, we will be including all of our themes in a single file. To generate a global theme we're going to be including two mixins core and theme. Both of those mixins accept a few arguments:

Core mixin

이름	유형	기본	설명
`$print-layout`	부울	진실	인쇄 스타일을 포함/제외합니다.
`$enhanced-accessibility`	부울	거짓	구성요소 색상 및 기타 속성을 더 접근하기 쉬운 값으로 전환합니다.

Theme mixins

이름	유형	기본	설명
`$palette`	지도	`null`	모든 컴포넌트의 기본 테마에 사용되는 팔레트 맵입니다.
`$schema`	지도	`$light-material-schema`	구성 요소 스타일을 지정하기 위한 기초로 사용되는 스키마입니다.
`$exclude`	목록	`()`	전역 테마에서 제외할 구성 요소 테마 목록입니다.
`$roundness`	숫자	`null`	모든 구성요소에 대한 전역 진원도 계수를 설정합니다(값은 0과 1 사이의 소수일 수 있음).
`$elevation`	부울	`true`	테마의 모든 구성요소에 대한 고도를 켜거나 끕니다.
`$elevations`	지도	`$material-elevations`	모든 구성 요소 테마에서 사용되는 고도 지도입니다.

우리 회사의 기본, 보조 및 표면 색상을 사용할 사용자 지정 글로벌 테마를 만들어 보겠습니다.

// Import the theming module
@use "igniteui-angular/theming" as *;

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

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

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

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

Let's explain what the core and theme mixins do. The core mixin takes care of some configurations, like adding enhanced accessibility(e.g. colors suitable for color blind users) and printing styles for all components. The theme mixin includes each individual component style (bar the ones listed as excluded) and configures the palette, schema, elevations, and roundness that is not listed in the $exclude list of components.

Important

Including core before theme is essential. The core mixins provide all base definitions needed for the theme mixin to work correctly.

Excluding Components

The theme mixin allows you to provide a list of component names to be excluded from the global theme styles. For instance, if you want to completely remove all styles we include for the igx-avatar and igx-badge to reduce the amount of produced CSS or to supply your own custom styles, you can do so by passing the list of components like so:

// ...
$unnecessary: (igx-avatar, igx-badge);

@include theme($my-color-palette, $exclude: $unnecessary);

If you know your app will not be using some of our components, we recommend you add them to the $exclude list.

반대의 경우도 있습니다. 즉, 아래 방법을 사용하여 원하는 구성 요소 스타일만 포함할 수 있습니다.

@use 'sass:map';

@function include($items, $register) {
    @return map.keys(map.remove($register, $items...));
}

$allowed: (igx-avatar, igx-badge);

@include theme(
    $exclude: include($allowed, $components)
);

Light and Dark Themes

또한 Material, Fluent, Indigo, Bootstrap의 네 가지 테마에 대한 밝은 버전과 어두운 버전을 제공합니다.

어떤 버전을 사용하려면, 테마 믹스인에 전달하기만 하면 됩니다.

광

@include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $light-material-schema,
    $palette: $light-material-palette,
);

* 어둡다_

@include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $dark-material-schema,
    $palette: $dark-material-palette,
);

Available Themes

Ignite UI for Angular 에서는 미리 정의된 테마 세트에서 선택할 수 있는 옵션을 제공합니다. 아래 표에는 바로 사용할 수 있는 모든 기본 제공 테마가 나와 있습니다.

주제	개요	색상 팔레트
재질 : 조명	`$light-material-schema`	$ 가벼운 재료 팔레트
재질 : Dark	`$dark-material-schema`	$어두운 재료 팔레트
플루언트 라이트	`$light-fluent-schema`	$ 가벼운 유창 팔레트 $light-fluent-excel-팔레트 $light-fluent-단어 팔레트
유창한 다크	`$dark-fluent-schema`	$dark-fluent-팔레트 $dark-fluent-excel-팔레트 $dark-fluent-단어 팔레트
부트스트랩 라이트	`$light-bootstrap-schema`	$라이트-부트스트랩-팔레트
부트 스트랩 다크	`$dark-bootstrap-schema`	$어두운-부트스트랩-팔레트
인디고 라이트	`$light-indigo-schema`	$라이트-인디고-팔레트
인디고 다크	`$dark-indigo-schema`	$ 다크 인디고 팔레트

Additional Resources

개별 구성 요소 테마를 만드는 방법을 알아보세요.

구성 요소 테마

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.