В различных учебниках я видел темы, сгенерированные следующим образом:
//======================================
// SHARED THEME STYLES
//======================================
@include mat.core();
.dark-theme {
//======================================
// THEME INITIALIZATION
//======================================
@include mat.core-theme($theme);
@include mat.all-component-themes($theme);
}
.light-theme {
//======================================
// THEME INITIALIZATION
//======================================
@include mat.core-theme($theme);
@include mat.all-component-themes($theme);
}
Если я правильно понимаю, это также то, как документация Angular говорит нам об этом. Однако, когда я запускаю сборку, я получаю эти предупреждения.
./projects/playground/src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
The same typography styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md
../../../../node_modules/@angular/material/core/theming/_theming.scss 360:7 private-check-duplicate-theme-styles()
../../../../node_modules/@angular/material/core/_core-theme.scss 77:3 theme()
../../../elytra/src/lib/styles/themes/dark-theme.scss 139:5 @use
../styles.scss 9:1
Как мы создаем темы, не дублируя общедоступные стили, такие как типографика?
Хороший звонок... Только что обновил заголовок...
Я считаю, что это должно работать
Также я считаю, что mat.all-component-themes
использует каждый компонент, это создаст ненужный CSS.
@use './node_modules/@angular/material' as mat;
@import './node_modules/@angular/material/_theming.scss';
@include mat-core();
//THEME INISTALIZATION
// ======== Light theme ========
$my-custom-primary: mat-palette($mat-pink, 500);
$my-custom-accent: mat-palette($mat-pink, 50);
$my-custom-theme: mat-light-theme($my-custom-primary, $my-custom-accent);
// ======== Dark theme ========
$my-custom-dark-primary: mat-palette($mat-deep-orange, 50);
$my-custom-dark-accent: mat-palette($mat-grey, 600);
$my-custom-dark-theme: mat-dark-theme($my-custom-dark-primary, $my-custom-dark-accent);
.light-theme {
@include angular-material-theme($my-custom-theme);
}
.dark-theme {
@include angular-material-theme($my-custom-dark-theme);
}
Привет - это работает ... наверное ... Я использовал его ... однако новый API Angular с версией 15 говорит all-component-themes
... поэтому я пытаюсь понять, как это сделать правильно ... ️ 🔁 material.angular.io/guide/theming
Согласно их документации https://material.angular.io/guide/theming#multiple-themes-in-one-file
Вы увидите, что при определении двух тем вы должны использовать core-color
для всех тем, кроме основной.
Более подробное объяснение также можно найти в их документах https://material.angular.io/guide/duplicate-theming-styles
Основная концепция заключается в том, что миксины *-theme применяют всю тему (то есть дублируют ее каждый раз, когда вызывается *-theme), тогда как миксины *-color изменяют только цвет соответствующих компонентов, оставляя остальные в покое.
Я внес изменения в ваш пример ниже, чтобы отразить чтение.
//Say this is your primary
.dark-theme {
//======================================
// THEME INITIALIZATION
//======================================
@include mat.core-theme($theme);
@include mat.all-component-themes($theme);
}
//and this being your secondary theme
.light-theme {
//======================================
// THEME INITIALIZATION
//======================================
@include mat.core-color($theme); <---- This is the magic
@include mat.all-component-colors($theme); <---- This is the magic
}
Я также попросил разъяснений по определенному аспекту этого у Angular. github.com/angular/components/issues/26573
Возможно, вам следует упомянуть, что ваш вопрос относится к Angular Material 15. Похоже, что некоторые пользователи все еще придумывают решения для Material 14, потому что они не знают о критических изменениях, внесенных в последнюю версию.