소개

세상에 어두운 모드가 유행하고 있는 가운데, 어두운 모드를 구현하는 방법은 여러 가지가 있지만 이번에는 Angular에서 앱 테마(배경, 색)를 관리해 보았다.

이번 앱에 사용한 것은 이런 느낌입니다.

Angular 9

Angular Material 9.2.1

Angular Material에 의한 컬러 관리

Angular Material의 설치와 설정이 끝나면, 먼저 테마 작성용 scss 파일을 작성한다.

처음에는 Angular Material의 테마 기능을 가져와서 코어 maxin을 include한다.
이제 Angular 부품의 테마 작성 기능을 사용할 수 있게 되었습니다.

컬러 팔레트 설정

Angular Material의 컬러 팔레트는 primary(기본), accent(악센트), warn(경고)의 3색으로 구성되어 있습니다. SCSS 변수에서 각각을 설정하고 mat-light-theme maxin에 붓습니다.

Material 팔레트는 여기에서 참고해 주세요( htps // 마테리아 l. 이오 / 레소 r세 s / 코 r / )


위의 구성으로 결국 이런 느낌이 듭니다.

다른 부품을 보면 ....

필수 항목의 색이 제대로 warn의 색이 되고 있군요!

변경 테마 만들기

지금까지 기본 테마를 설정할 수 있었으므로 여기에서 변경용 테마를 또 하나 만들겠습니다.

지금까지의 방식과 다르게 어두운 테마에 대한 SCSS 변수를 설정하여 mat-dark-theme에 붓습니다.


이런 느낌이 듭니다.


그리고는 이렇게 좋아하는 클래스로 둘러싸겠습니다. 이렇게하면 "unicorn-dark-theme"의 DOM 요소가이 테마에 적용됩니다.


테마 변경 버튼 (맨 오른쪽 버튼)을 메뉴에 추가

버튼을 누르면 테마 서비스에서 대상 테마 적용


테마 서비스가 처리되면 이벤트를 App 컴포넌트로 보내고 해당 클래스를 DOM 요소에 추가합니다. 이것으로 완성입니다.

결국 이렇게

기본 테마

테마 버튼 누르기 후

요약

Angular Material의 Theming 기능을 소개했습니다.
Stackblitz에 셋업 없이 시험할 수 있으므로, 꼭 여러분도 해 봅시다!
이번 성품을 stackblitz에 실려 있으므로, 좋으면 참고해 보세요!
( ｈｔｐｓ：／／あんぐぁｒｃロッスコｍポネンｔ． s ckb ぃ t ... 이오 / )