Зміна теми Angular Material 19 за допомогою SCSS та CSS - javascript.org.ua

текст перекладу

У цьому короткому посібнику ми дізнаємось, як змінювати тему для Angular Material 19 за допомогою SCSS міксинів та змінних CSS.

Якщо вам подобається дивитись відео, ви можете переглянути відео-версію цієї статті на YouTube.

Створення проекту з Angular Material 19

Розпочнемо з створення нового проекту Angular з Angular Material 19.

npm i -g @angular/cli@19  
ng new angular-material-19-theming --style scss --skip-tests --defaults  
cd angular-material-19-theming  
ng add @angular/material@19

І вибираємо відповіді, як показано нижче:

? Виберіть попередньо створену тему, або "custom" для власної теми: Custom  
? Налаштувати глобальні стилі типографіки Angular Material? Так  
? Включити модуль анімацій Angular? Включити та активувати анімації

Створення демонстраційних компонентів

ng generate @angular/material:navigation navigation  
ng generate @angular/material:dashboard dashboard  
ng generate @angular/material:address-form address-form  
ng generate @angular/material:table table

Додавання ng-content в компонент навігації

Додавання slide toggle в панель інструментів



 light_mode  

 dark_mode  

 ```  ``` .theme-toggle {    margin-left: auto;    display: flex;    align-items: center;    justify-content: center;   } ```  

## Додавання класу dark в body при зміні перемикача

onThemeChange(event: MatSlideToggleChange) {
this.document.body.classList.toggle('dark');
}
```

Імпортуємо все в компонент App

                 ```  

## Новий міксин теми

Подивімося на `src/styles.scss`. Зверніть увагу на використання функції `mat.theme`:

@use '@angular/material' as mat;
html {
@include mat.theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: 0,
));
}
```

Міксин mat.theme приймає карту, яка визначає значення кольору, типографіки та щільності, і виводить набір змінних CSS, які контролюють вигляд та макет компонента. Ці змінні базуються на Design Tokens.

Кольорові змінні визначені за допомогою CSS-функції кольору light-dark, щоб ваша тема могла перемикатися між світлим і темним режимами за допомогою CSS-властивості color-scheme.

Міксин mat.theme оголосить лише ті змінні CSS, які включені в вхідні параметри. Наприклад, якщо typography не визначена, то змінні CSS типографіки не будуть включені в результат.

Кольорові палітри

Angular Material надає дванадцять попередньо створених кольорових палітр, які можна використовувати для теми вашого додатку.

Щоб створити власні кольорові палітри, можна використати схему генерації палітри. Вона створює кастомні палітри кольорів на основі одного кольору для основної палітри і, за бажанням, додаткових кольорів для вторинної, третинної та нейтральної палітри:

ng generate @angular/material:theme-color

І вибираємо відповіді, як показано нижче:

Який HEX колір слід використовувати для генерації теми M3? Він буде представляти вашу основну палітру кольорів. #6750a4
Який HEX колір слід використовувати для вторинної палітри кольорів? Залиште порожнім
Який HEX колір слід використовувати для третинної палітри кольорів? Залиште порожнім
Який HEX колір слід використовувати для нейтральної палітри кольорів? Залиште порожнім
У яку директорію ви хочете помістити згенерований файл теми? src/styles/

Ця схема згенерує SCSS файл під назвою _theme-colors.scss.
текст перекладу

Давайте використовувати $primary-palette та $tertiary-palette, щоб змінити тему.

@use "./styles/_theme-colors.scss" as theme-colors;  
html {  
  @include mat.theme(  
    (  
      color: (  
        primary: theme-colors.$primary-palette,  
        tertiary: theme-colors.$tertiary-palette,  
      ),  
      typography: Roboto,  
      density: 0,  
    )  
  );  
}

Тепер ви повинні побачити нову тему, застосовану до додатку.

Системні змінні

Змінні CSS, згенеровані міксином mat.theme, також відомі як Системні змінні.

У цій статті ми зосередимося на кольорових змінних. Angular Material 19 в основному залежить від таких кольорових змінних:

Primary --mat-sys-primary, --mat-sys-on-primary
Surface --mat-sys-surface, --mat-sys-on-surface
Error --mat-sys-error, --mat-sys-on-error
Outline --mat-sys-outline, --mat-sys-outline-variant

Колір за замовчуванням для body

Давайте застосуємо деякі стандартні фонові та шрифтні кольори до нашого body, щоб вони відповідали темі Material.

// styles.scss  
body {  
  background: var(--mat-sys-surface);  
  color: var(--mat-sys-on-surface);  
}

Зміна системних змінних

Ми побачили, що міксин mat.theme генерує системні змінні, тому цілком зрозуміло, що ми також можемо змінювати ці змінні, щоб досягти налаштування теми. Наприклад, ми можемо закоментувати кольорову конфігурацію, щоб вона не генерувала системні змінні, і потім призначити власні значення для системних змінних primary, щоб побачити, як вони застосовуються до компонентів.

По-перше, давайте закоментуємо цю кольорову карту і додамо змінні mat-sys-primary та mat-sys-on-primary і призначимо їм будь-які валідні кольорові значення.

// styles.scss  
html {  
  @include mat.theme((  
    // color: (  
    //   theme-type: light,  
    //   primary: mat.$azure-palette,  
    //   tertiary: mat.$blue-palette,  
    // ),  
    typography: Roboto,  
    density: 0,  
  ));  
  --mat-sys-primary: #6750a4;  
  --mat-sys-on-primary: #ffffff;  
}

Тепер ви повинні побачити новий основний колір, застосований до додатку. Не забудьте скасувати ці зміни після того, як завершите.

Ще один і рекомендований спосіб змінити тему — це використовувати міксин перевизначень.

Міксин перевизначень

Міксин mat.theme використовується для генерації теми. Але якщо ви хочете перевизначити системні змінні, ви можете використовувати міксин mat.theme-overrides.

Наприклад, давайте змінимо основний колір перемикача слайду:

// navigation.component.scss  
@use "./styles/_theme-colors.scss" as theme-colors;  
// решта залишається такою ж  
.theme-toggle {  
  @include mat.theme-overrides((  
    primary: red,  
    on-primary: yellow  
  ))  
}

Використання Theme Builder

Ви також можете використовувати Theme Builder, щоб отримати токени для вашої бажаної теми.

Що це таке?

Theme Builder — це інструмент для розробників Angular, які використовують Angular Material 15, 16, 17, 18 або 19 у своєму проекті. Цей інструмент дозволяє створювати, переглядати та експортувати теми для Angular Material.

Ви також можете легко ділитися темами, використовуючи унікальне посилання з вашою командою розробників або дизайнерів.

Як його використовувати?

Просто перейдіть на themes.angular-material.dev
Виберіть початкові кольори для створення теми Material
Перевірте згенеровану тему та змініть її за потреби
Експортуйте тему для отримання токенів
Скопіюйте та вставте токени у файл, скажімо tokens.scss або tokens.css. Не забудьте налаштувати селектор :root, :host за потреби.
Додайте path/to/tokens.scss або path/to/tokens.css у масив стилів вашого angular.json, після файлу теми Angular Material.
Просто додайте .dark до елементу html або body, щоб застосувати темну тему.

Висновок

У цій статті ми почали з створення нового проекту Angular з Angular Material 19. Потім ми дізналися, як створити власну тему за допомогою міксину mat.theme. Також ми дізналися, як створювати кастомні кольорові палітри за допомогою схеми mat.theme-color.
текст перекладу

Згодом ми дізналися, як перевизначити тему для конкретного компонента за допомогою міксину mat.theme-overrides. Нарешті, ми дізналися, як змінювати тему, використовуючи змінні CSS.

І наостанок, ми дізналися, як використовувати Theme Builder, щоб отримати токени для бажаної теми.

Живий пісочниця

[

Angular-material-dev - Тема Angular Material 19 з токенами - StackBlitz

Запустіть Angular Material 19 Тему з токенами, створену Angular Material Dev на StackBlitz

stackblitz.com

](https://stackblitz.com/github/Angular-Material-Dev/angular-material-19-theming-w-tokens?embed=1&file=src%2Fstyles.scss&source=post_page-----bb6a852bb82c--------------------------------)

Шукаєте більше?

Якщо ви шукаєте більш складні теми, незабаром я випущу новий курс про Angular UI, підписуйтеся на розсилку, щоб отримати сповіщення, коли він буде готовий.

Оригінально опубліковано на https://angular-material.dev/

Перекладено з: Modify Angular Material 19 Theme with SCSS & CSS