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

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

---

앱 전체에서 회사의 브랜드 색상을 사용하고 싶습니다.

이 문제를 발견했습니다. AngularJS 2-Material design- 사용자 지정 테마를 만들 수있는 색상 팔레트를 설정 했지만 기본적으로 미리 빌드 된 팔레트의 다른 부분을 사용하고 있습니다. Material2의 사전 정의 된 색상을 사용하고 싶지 않습니다. 저만의 독특하고 특별한 브랜드 색상을 원합니다. 그냥 해킹하는 것보다 나만의 테마를 만드는 더 좋은 방법이 _palette.scss있습니까?

브랜드 팔레트를 위해 믹스 인을 만들어야합니까? 그렇다면-올바르게 수행하는 방법에 대한 가이드가 있습니까? 색상의 다양한 음영 (50, 100, 200, A100, A200 ...과 같은 숫자로 표시)의 의미는 무엇입니까?

이 지역에 대한 모든 정보는 대단히 감사하겠습니다!

---

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

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

위 코드에 대한 설명

The numbers on the left side set the "level" of brightness. The default is 500 (which is the true shade of my brand color/accent color). So in this example, my brand color is #5282c1. The rest are other shades of that color (where lower numbers mean brighter shades and higher numbers mean darker shades). The AXXX are different shades. Not sure (yet) where they are in use. Again, a lower number means brighter and higher numbers means darker.

The contrast sets the font color over those background colors. It's very hard (or even impossible) to calculate via CSS where the font should be bright (white) or dark (black with 0.87 opacity) so it is easily readable even to color blind people. So this is set manually and hard-coded into the palette definition. You get this also from the palette generator I linked above (although it's being outputted in the old Material1 format, and you'll have to manually convert this to Material2 format like I posted here).

Set the theme to use the brand color palette as the primary color, and whatever you have for accent as your accent color.

Step3: Use the theme throughout the app wherever you can

Some elements can take the theme colors, like <md-toolbar>, <md-input>, <md-button>, <md-select> and so on. They will use primary by default so make sure you set the brand color palette as primary. If you want to change the color, use the color directive (is it an Angular directive?).

For example:

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

참고URL : https://stackoverflow.com/questions/41440998/how-can-i-use-custom-theme-palettes-in-angular