글로벌 테마

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

개요

애플리케이션 프로젝트에 igniteui-angular.css 파일을 포함했다면 이제 이를 제거할 때입니다. 우리는 자체 my-app-theme.scss 파일을 사용하여 애플리케이션의 모든 구성 요소에 대한 전역 테마를 생성할 것입니다.

Ignite UI for Angular 기본적으로 전역 테마를 사용하여 전체 구성 요소 제품군의 테마를 지정합니다. 그러나 사용 사례에 따라 앱에 있는 구성 요소로 범위가 지정된 테마를 만들 수 있습니다. 지금은 모든 테마를 하나의 파일에 포함하겠습니다. 글로벌 테마를 생성하기 위해 우리는 두 개의 믹스인 core와 theme 포함할 것입니다. 두 믹스인 모두 몇 가지 인수를 허용합니다.

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);

​core 믹스인과 theme 믹스인의 기능을 설명하겠습니다. core 믹스인은 향상된 접근성(예: 색맹 사용자에게 적합한 색상) 추가 및 모든 구성 요소에 대한 인쇄 스타일과 같은 일부 구성을 처리합니다. theme 믹스인에는 각 개별 구성 요소 스타일(제외된 것으로 나열된 항목 제외)이 포함되어 있으며 $exclude 구성 요소 목록에 나열되지 않은 팔레트, 스키마, 높이 및 원형 정도를 구성합니다.

Important

이전 theme을 포함하는 core 것은 필수입니다. mixin은 mixin이 core​ ​theme 올바르게 작동하는 데 필요한 모든 기본 정의를 제공합니다.

Excluding Components

​theme 믹스인을 사용하면 전역 테마 스타일에서 제외할 구성 요소 이름 목록을 제공할 수 있습니다. 예를 들어 생성된 CSS 양을 줄이거나 사용자 정의 스타일을 제공하기 위해 igx-avatar 및 igx-badge에 포함된 모든 스타일을 완전히 제거하려는 경우 다음과 같이 구성 요소 목록을 전달하면 됩니다.

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

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

귀하의 앱이 일부 구성 요소를 사용하지 않을 것임을 알고 있다면 해당 구성 요소를 $exclude 목록에 추가하는 것이 좋습니다.

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

@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

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

• 구성 요소 테마

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub