앱 전체에서 회사의 브랜드 색상을 사용하고 싶습니다.
이 문제를 발견했습니다. AngularJS 2-Material design- 사용자 지정 테마를 만들 수있는 색상 팔레트를 설정 했지만 기본적으로 미리 빌드 된 팔레트의 다른 부분을 사용하고 있습니다. Material2의 미리 정의 된 색상을 사용하고 싶지 않습니다. 저만의 독특하고 특별한 브랜드 색상을 원합니다. 그냥 해킹하는 것보다 나만의 테마를 만드는 더 좋은 방법이 _palette.scss있나요?
내 브랜드 팔레트를 위해 믹스 인을 만들어야합니까? 그렇다면-올바르게 수행하는 방법에 대한 가이드가 있습니까? 다양한 색상 음영의 의미는 무엇입니까 (50, 100, 200, A100, A200 ...과 같은 숫자로 표시됨)?
이 지역에 대한 모든 정보는 대단히 감사하겠습니다!
답변:
몇 가지 연구 끝에 나는이 결론을 내렸고 나를 위해 해결했습니다. 당신도 도움이되기를 바랍니다.
브랜드 색상을 입력하는이 멋진 웹 사이트를 찾았고 해당 브랜드 색상의 다양한 음영으로 완전한 팔레트를 생성합니다 : http://mcg.mbitson.com
이 도구를 내 primary색상 (내 브랜드 색상)과 색상 모두에 사용했습니다 accent.
다음은 이러한 .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색상 으로 사용하십시오 .
일부 요소는 테마 색, 같은 걸릴 수 있습니다 <md-toolbar>, <md-input>, <md-button>, <md-select>등을. primary기본적으로 사용 하므로 브랜드 색상 팔레트를 기본으로 설정해야합니다. 색상을 변경하려면 color지시문을 사용하십시오 (Angular 지시문입니까?).
예를 들면 :
<button mat-raised-button color="accent" type="submit">Login</button>
@import '~@angular/material/theming'; @include mat-core();
아래 웹 사이트를 사용해보세요. 각도 테마를 쉽게 사용자 지정할 수 있습니다. https://materialtheme.arcsine.dev/