Angular에서 사용자 지정 테마 팔레트를 사용하려면 어떻게 해야 합니까?

Angular에서 사용자 지정 테마 팔레트를 사용하려면 어떻게 해야 합니까?

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

이 문제를 발견했습니다.각진JS 2 - 재료 설계 - 색상 팔레트를 설정하여 사용자 지정 테마를 만들 수 있지만 기본적으로 사전 제작된 팔레트의 다른 부분을 사용합니다.저는 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);

위의 코드에 대한 몇 가지 설명

왼쪽의 숫자는 밝기의 "레벨"을 설정합니다.기본값은 500(내 브랜드 색상/강조 색상의 진정한 색조)입니다. 이 예에서 제은 그서이예에제서브색깔은랜드래▁is색은깔▁so▁color브입니다.#5282c1나머지는 해당 색상의 다른 색조입니다(여기서 숫자가 작으면 밝은 색조를 의미하고 숫자가 크면 어두운 색조를 의미함). 그AXXX다른 색조입니다.어디에서 사용되고 있는지는 아직 알 수 없습니다.다시 말하지만, 숫자가 작으면 더 밝고 숫자가 크면 더 어둡다는 것을 의미합니다.

그contrast배경색 위에 글꼴 색을 설정합니다.글꼴이 밝은(흰색) 또는 어두운(불투명도가 0.87인 검은색)이어야 하는 CSS를 통해 계산하는 것은 매우 어려우며(또는 불가능하기도 합니다), 그래서 색맹인 사람들도 쉽게 읽을 수 있습니다.따라서 수동으로 설정하고 팔레트 정의에 하드 코드화합니다.위에 링크한 팔레트 생성기에서도 확인할 수 있습니다(이전 재료 1 형식으로 출력되고 있으며, 여기에 게시한 것처럼 수동으로 재료 2 형식으로 변환해야 합니다).

브랜드 색상 팔레트를 사용할 테마를 설정합니다.primary색깔, 그리고 당신이 가지고 있는 억양은 무엇이든 당신의 것입니다.accent색.

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

어떤 요소들은 테마 색상을 취할 수 있습니다.<md-toolbar>,<md-input>,<md-button>,<md-select>등등.다음을 사용합니다.primary기본적으로 브랜드 색상 팔레트를 기본으로 설정해야 합니다.색상을 변경하려면 다음을 사용합니다.color지시(Angular 지시입니까?).

예:

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

아래 웹사이트를 이용해 보세요, 이것은 각진 테마를 쉽게 사용할 수 있는 것처럼 보입니다.https://material테마.arcsine.dev/

Angular Material v12를 사용하는 경우 재료 테마는 다음과 같이 표시되며 다음 사람이 가져와야 합니다.styles.scss

@use '~@angular/material' as mat;
@import './custom-palettes';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.define-palette(mat.$gray-palette, 900, 800, 900);
$candy-app-accent: mat.define-palette(mat.$green-palette, 900, 800, 900);
$candy-app-warn: mat.define-palette($wfs-blue-palette, 800, 700, 900);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($candy-app-theme);

./custom-palettes다음과 같이 표시됩니다.

// see http://mcg.mbitson.com

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$wfs-blue-palette: (
  50: #eaeef3,
  100: #cad6e0,
  200: #a7bacc,
  300: #849eb7,
  400: #698aa7,
  500: #4f7598,
  600: #486d90,
  700: #3f6285,
  800: #36587b,
  900: #26456a,
  A100: #add1ff,
  A200: #7ab5ff,
  A400: #4798ff,
  A700: #2e8aff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

상위 답변과 마찬가지로 http://mcg.mbitson.com 을 사용하여 색상을 생성합니다.

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