테마

단 몇 줄의 코드만으로 사용자는 구성 요소의 테마를 쉽게 변경할 수 있습니다. SASS를 통해 개발된 API 사용은 난이도가 낮으며 하나의 구성 요소, 여러 구성 요소 또는 전체 제품군의 스타일을 다시 지정할 수 있습니다.

The Essence of a Theme

Angular 용 IgniteUI는 Material Design Guidelines에 따라 컴포넌트 디자인을 기반으로 하므로 컴포넌트의 색상, 크기, 전반적인 모양과 느낌을 Google에서 만든 것과 최대한 비슷하게 만들려고 노력합니다.

테마에 대한 우리의 접근 방식은 몇 가지 간단한 개념을 기반으로 합니다.

팔레트

첫 번째 컨셉은 색상 팔레트 중 하나입니다. 모든 시각적 도구와 마찬가지로 색상은 응용 프로그램 간 주요 차이점입니다. 머티리얼 디자인 지침은 기본 색상의 색조와 밝기 범위에 따라 미리 정의된 색상 팔레트를 규정합니다. 그럴만한 이유가 있습니다. 그들은 배경색과 전경 텍스트 색상 간의 색상 일치와 대비가 잘 이루어지길 원합니다. 이는 훌륭하지만 동시에 제한적입니다. 귀하의 브랜딩에 맞는 나만의 맞춤형 팔레트를 갖고 싶다면 운이 없을 것입니다. 우리는 이것이 문제라는 것을 인식하고 귀하가 제공하는 기본 색상에서 머티리얼과 유사한 팔레트를 생성하는 알고리즘을 발명했습니다. 또한 팔레트의 각 색상에 대해 대비 텍스트 색상도 생성합니다.

테마

두 번째 컨셉은 테마 중 하나이다. 팔레트는 테마에 의해 사용되지 않으면 별로 도움이 되지 않습니다. 따라서 우리는 전체 애플리케이션과 그 안에 있는 모든 구성 요소의 스타일을 지정하는 각 구성 요소와 전역 테마에 대한 테마를 가지고 있습니다. 생성된 팔레트를 전역 테마에 전달하기만 하면 나머지는 저희가 처리해 드립니다. 물론 각 구성 요소의 스타일을 원하는 대로 개별적으로 지정할 수 있습니다. 이 기사의 뒷부분에서 이를 수행하는 방법을 자세히 살펴보겠습니다.

타이포그래피

마지막 개념은 타이포그래피를 중심으로 전개됩니다. 기본 서체 선택이 있지만 모든 방식으로 애플리케이션의 스타일을 지정할 수 있는 기능을 제공하고 싶습니다. 타이포그래피는 매우 중요한 부분입니다. 우리는 앱에서 글꼴 모음, 제목, 부제목 및 단락 텍스트의 크기와 두께를 변경하는 방법을 제공합니다.

테마 필요하다 사스.

Generating Color Palettes

테마 라이브러리는 Sass를 기반으로 합니다. Ignite UI CLI를 사용하여 앱을 부트스트랩한 경우 angular.json 구성에서 scss로 스타일을 지정할 수 있으며, CLI는 Sass 스타일 컴파일을 처리합니다. CLI Ignite UI 사용하지 않았다면 Sass 스타일을 컴파일하도록 빌더를 구성해야 합니다.

우리의 팔레트는 , secondary,, info surface,, success,및 warn error colors 인수 primary를 허용합니다. 기본 색상은 응용 프로그램 전체에서 더 눈에 띄는 색상입니다. secondary color는 버튼, 스위치, 슬라이더 등과 같이 실행 가능한 요소에 사용되는 색상입니다. 표면 색상은 일부 구성 요소의 배경색에 사용됩니다. 유일하게 필요한 인수는 for primary와 secondary surface colors입니다. 우리는 ,, warn에 error 대한 info success 것들을 기본값으로 설정하고 우리가 선택한 미리 정의된 집합으로 설정합니다.

첫 번째 색상 팔레트를 시작하려면 전역 테마의 기본 파일이 될 scss 파일을 만듭니다. 내 이름은 "my-app-theme.scss" 입니다.

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

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

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

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

이제 정확히 216가지 색상이 포함된 팔레트가 생겼습니다! 우와, 잠깐, 뭐라고요? 어떻게 그런 일이 일어났습니까? 3을 제공하고 216을 얻었습니까? 다른 213가지 색상은 어디에서 왔습니까? 매우 중요하기 때문에 방금 일어난 일을 설명하기 위해 여기서 멈추겠습니다. 당신이 제공하고 색상을 제공 primary secondary surface 했을 때, 우리는 그것들을 가져 와서 각각에 대한 음영과 악센트 색상을 생성했습니다. 기본적으로 이제 팔레트에는 3개의 하위 팔레트 primary secondary와 surface 색상이 있습니다. 각 하위 팔레트에는 원래 색상을 기반으로 하는 13개의 추가 색상 변형이 포함되어 있습니다. 13가지 색상 중 5가지는 원래 색상의 밝은 색조이고 4가지 색상은 더 어둡습니다. 나머지 4가지 색상은 원래 색상의 더 과장된 '악센트' 버전입니다. 각 팔레트에서 총 14가지 색상을 만드는 원래 색상으로.

각 하위 팔레트에 너무 많은 색상이 있기 때문에 도대체 어떤 색상이 어느 것인지 어떻게 알 수 있는지 궁금할 수 있습니다. 정말 간단합니다. 하위 팔레트의 각 색상에는 번호가 있습니다. 원래 색상에 번호를 500 할당합니다. 더 밝은 음영은 다음에서 50 시작하여 범위입니다 400. 더 어두운 음영은 다음에서 600 시작하여 범위입니다 900. 강조 색상에는 각각 문자열 이름 A100, A200, A400,,이 A700 있습니다. 네, 하지만 지금은 216명 중 42명에 불과합니다. 걱정하지 마세요, 저희가 제공하는 또 다른 하위 팔레트가 있습니다. 회색 '색상'으로 구성된 것이라고합니다 grays. 다른 두 가지 색상 하위 팔레트와 같지만 악센트 변형은 포함하지 않습니다. 좋아요, 이제 최대 42 + 10으로 총 52가지 색상이 가능합니다. 216명과는 아직 거리가 멉니다. 다른 164가지 색상은 어디에서 왔습니까? 마지막 퍼즐을 풀어 봅시다. 에 대해 info success warn error 4가지 추가 색상을 가질 수도 있음을 기억하십시오. 따라서 다른 56 가지 색상이 설명되지 않습니다. , secondary,, surface info,, success,, warn 및 grays error 하위 팔레트의 개수는 primary 정확히 108이며, 이는 216개 색상의 절반임을 기억하십시오. 색상의 나머지 절반은 각 색상 변형에 대한 대비 텍스트 색상이며, 모두-contrast 변수 이름에 접미사가 있으며 검은색 또는 흰색입니다.

알았어요? 좋은! 하지만 팔레트에 있는 색상에 어떻게 접근하나요?

하위 팔레트 색상 얻기

기억하기 쉽고 사용하기 color 쉬운 기능을 제공합니다. 세 개의 인수가 필요합니다 -palette, color, 그리고 variant;

$my-primary-600: color($my-color-palette, "primary", 600);
$my-primary-A700: color($my-color-palette, "secondary", "A700");
$my-warning-color: color($my-color-palette, "warn");
// sample usage

.my-awesome-class {
  background: $my-primary-600;
  border-color: $my-primary-A700;
}

.warning-bg {
  background: $my-warning-color;
}
scss

대비 텍스트 색상 얻기

하위 팔레트 색상을 얻는 방법과 유사하게 하위 팔레트의 각 색상에 대한 대비 텍스트 색상을 얻는 방법이 있습니다.

$my-primary-800: color($my-palette, "primary", 600);
$my-primary-800-text: contrast-color($my-palette, "primary", 600);
// sample usage

.my-awesome-article {
  background: $my-primary-800;
  color: $my-primary-800-text;
}
scss

Generating a Theme

애플리케이션 프로젝트에 "igniteui-angular.css" 파일을 포함했다면 이제 이를 제거할 때입니다. 우리는 우리만의 "my-app-theme.scss" 파일을 사용하여 우리만의 테마를 생성할 것입니다.

이 페이지의 첫 번째 예제부터 시작하겠습니다. 하지만 이번에는 두 개의 믹스인을 core 포함할 것입니다. theme 지금은 core 인수 theme를 허용하지 않지만 몇 가지 -$palette, $schema,, $exclude, $roundness, $elevation,를 $elevations 허용합니다. 지금은 논쟁에 $palette 대해서만 이야기 할 것입니다.

theme 이전에 core 포함하는 것이 필수적입니다. core 믹스인은 theme 작동하는 데 필요한 모든 기본 정의를 제공합니다.

// Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

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

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

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

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

그게 다야. 이제 응용 프로그램은 새로 생성된 팔레트의 색상을 사용합니다.

현재 상태에서 사용자 정의 타이포그래피를 정의하는 것은 애플리케이션의 font family 변경하는 것으로 제한됩니다. 후속 릴리스에서는 이 기능을 업데이트할 예정입니다. 우리의 의도는 애플리케이션의 서체를 사용자 정의할 수 있는 강력한 방법을 제공하는 것입니다.

타이포그래피를 사용자 정의하려면 typography 믹스인을 사용하세요. 정확히 하나의 인수(config가 필요합니다.

core 뒤에 typography 포함시키는 것이 필수적입니다. 이는 향후 릴리스에서 변경될 수 있습니다.

// Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

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

// IMPORTANT: Make sure you always include core first!
@include core();
// Include typography before theme
@include typography(
  $config: (
    font-family: "Comic Sans MS",
  )
);
@include theme($default-palette);
scss