[angular] Angular에서 사용자 지정 테마 팔레트를 어떻게 사용할 수 있습니까?

몇 가지 연구 끝에 나는이 결론을 내렸고 나를 위해 해결했습니다. 당신도 도움이되기를 바랍니다.

1 단계 : 브랜딩 색상으로 나만의 팔레트를 만듭니다.

브랜드 색상을 입력하는이 멋진 웹 사이트를 찾았고 해당 브랜드 색상의 다양한 음영으로 완전한 팔레트를 생성합니다 : http://mcg.mbitson.com

이 도구를 내 primary색상 (내 브랜드 색상)과 색상 모두에 사용했습니다 accent.

2 단계 : 사용자 지정 테마 파일에 팔레트 만들기

다음은 이러한 .scss파일 을 만드는 방법에 대한 가이드입니다 . https://github.com/angular/material2/blob/master/guides/theming.md

@import '~@angular/material/theming';

// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core();

// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
    50: #ffffff,
    100: #dde6f3,
    200: #b4c9e4,
    300: #7fa3d1,
    400: #6992c9,
    500: #5282c1,
    600: #4072b4,
    700: #38649d,
    800: #305687,
    900: #284770,
    A100: #ffffff,
    A200: #dde6f3,
    A400: #6992c9,
    A700: #38649d,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

$bv-orange: (
    50: #ffffff,
    100: #fff7f4,
    200: #fecdbd,
    300: #fc9977,
    400: #fc8259,
    500: #fb6c3b,
    600: #fa551d,
    700: #f44205,
    800: #d63a04,
    900: #b83204,
    A100: #ffffff,
    A200: #fff7f4,
    A400: #fc8259,
    A700: #f44205,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent:  mat-palette($bv-orange);

// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);

// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);

위 코드에 대한 설명

왼쪽에있는 숫자는 밝기의 “레벨”을 설정합니다. 기본값은 500 (내 브랜드 색상 / 악센트 색상의 실제 음영)입니다. 이 예에서 제 브랜드 색상은 #5282c1입니다. 나머지는 해당 색상의 다른 음영입니다 (숫자가 낮을수록 더 밝은 음영을 의미하고 높은 숫자가 더 어두운 음영을 의미 함). 는 AXXX다른 그늘이다. (아직) 어디에 사용되는지 확실하지 않습니다. 다시 말하지만, 낮은 숫자는 더 밝음을 의미하고 높은 숫자는 더 어둡다는 것을 의미합니다.

는 contrast그 배경 색상을 통해 글꼴 색상을 설정합니다. 글꼴이 밝거나 (흰색) 어둡거나 (불투명도가 0.87 인 검은 색) CSS를 통해 계산하는 것은 매우 어렵거나 불가능하므로 색맹 인 사람들도 쉽게 읽을 수 있습니다. 따라서 이것은 수동으로 설정되고 팔레트 정의에 하드 코딩됩니다. 위에서 링크 한 팔레트 생성기에서도 얻을 수 있습니다 (이전 Material1 형식으로 출력되고 있으며 여기에 게시 한 것처럼 수동으로 Material2 형식으로 변환해야합니다).

브랜드 색상 팔레트를 색상으로 사용하도록 테마를 설정하고 primary액센트를 위해 가지고있는 모든 것을 accent색상 으로 사용하십시오 .

3 단계 : 가능한 곳에서 앱 전체에서 테마 사용

일부 요소는 테마 색, 같은 걸릴 수 있습니다 <md-toolbar>, <md-input>, <md-button>, <md-select>등을. primary기본적으로 사용 하므로 브랜드 색상 팔레트를 기본으로 설정해야합니다. 색상을 변경하려면 color지시문을 사용하십시오 (Angular 지시문입니까?).

예를 들면 :

<button mat-raised-button color="accent" type="submit">Login</button>