테마

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

    The Essence of a Theme

    ​Angular 용 IgniteUI는​ ​머티리얼 디자인 지침을 기반으로 구성 요소 디자인을 기반으로 하므로 구성 요소의 색상, 크기, 전체적인 모양과 느낌을 Google에서 만든 구성 요소에 최대한 가깝게 만들려고 노력합니다.

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

    팔레트

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

    테마

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

    타이포그래피

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

    Note

    테마 필요하다 사스.

    Generating Color Palettes

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

    팔레트는 primary, secondary, info, success, warn 및 error 색상에 대한 인수를 허용합니다. 기본 색상은 응용 프로그램 전체에서 더 눈에 띄는 색상입니다. 보조 색상은 버튼, 스위치, 슬라이더 등과 같이 실행 가능한 요소에 사용되는 색상입니다. 하지만 필요한 유일한 필수 인수는 primary 색상과 secondary 색상에 대한 인수입니다. info, success, warn 및 error에 대한 기본 설정은 미리 정의된 세트로 선택됩니다.

    첫 번째 색상 팔레트를 시작하려면 전역 테마의 기본 파일이 될 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

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

    이제 정확히 74가지 색상이 포함된 팔레트가 생겼습니다! 우와, 잠깐, 뭐라고요? 어떻게 그런 일이 일어났나요? 2개를 제공했는데 74개를 얻었나요? 나머지 72가지 색상은 어디서 왔나요? 방금 일어난 일을 설명하는 것은 매우 중요하므로 여기서 멈추겠습니다. 귀하가 primary 색상과 secondary 색상을 제공하면 우리는 이를 가져와 각각에 대한 음영과 강조 색상을 생성했습니다. 기본적으로 이제 팔레트에는 primary 색상과 secondary 색상에 대한 2개의 하위 팔레트가 있습니다. 각 하위 팔레트에는 원래 색상을 기반으로 하는 12가지 추가 색상 변형이 포함되어 있습니다. 12개 색상 중 4개는 원래 색상보다 더 밝은 색조이고 4개는 더 어두운 색상입니다. 나머지 4가지 색상은 원래 색상보다 좀 더 과장된 '악센트' 버전입니다. 각 팔레트마다 총 13가지 색상을 구성하는 오리지널 컬러로 구성되어 있습니다.

    각 하위 팔레트에 너무 많은 색상이 있으면 도대체 어느 것이 어느 것인지 어떻게 알 수 있을까요? 정말 간단합니다. 하위 팔레트의 각 색상에는 번호가 있습니다. 원래 색상에 숫자 500 할당합니다. 밝은 색조는 100부터 시작하여 400 까지입니다. 더 어두운 색조는 600부터 시작하여 900 까지입니다. 강조 색상의 문자열 이름은 각각 A100, A200, A400 및 A700 입니다. 좋습니다. 하지만 이제 72개 중 26개만 남았습니다. 걱정하지 마세요. 우리가 제공하는 또 다른 하위 팔레트가 있습니다. grays 이라고 불리는 회색 '색상'으로 구성된 것입니다. 이는 다른 두 가지 색상 하위 팔레트와 동일하지만 악센트 변형은 포함하지 않습니다. 좋아요, 이제 총 35가지 색상에 대해 최대 26 + 9가 되었습니다. 74색과는 아직 거리가 멀다. 나머지 39색은 어디서 나오는 걸까? 마지막 퍼즐을 풀어보자. info, success, warn 및 error에 대해 4가지 추가 색상을 사용할 수도 있습니다. 그래서 또 다른 35가지 색상이 설명되지 않은 채로 남게 됩니다. primary, secondary 및 grays 하위 팔레트의 개수가 정확히 35개였던 것을 기억하십니까? 나머지 35개 색상은 primary, secondary 및 grays 하위 팔레트의 각 색상에 대한 대비 텍스트 색상입니다.

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

    하위 팔레트 색상 얻기

    ​igx-color 기억하고 사용하기 쉬운 기능을 제공합니다. palette, color 및 variant의 세 가지 인수를 사용합니다.

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

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

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

    대비 텍스트 색상 얻기

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

    $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;
}

    Generating a Theme

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

    이 페이지의 첫 번째 예부터 시작해 보겠습니다. 하지만 이번에는 core과 theme 믹스인 두 개를 포함할 예정입니다. 현재 core 어떤 인수도 허용하지 않습니다. 그러나 theme 2 -$palette 및 $exclude 허용합니다. 지금은 $palette 인수에 대해서만 이야기하겠습니다. 나중에 개별 구성 요소 테마에 대해 이야기할 때 $exclude 수행하는 작업에 대해 자세히 살펴보겠습니다.

    Important

    ​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

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-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);

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

    Customizing Typography (WIP)

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

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

    Important

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