Создание темы Angular для Angular 15?

В различных учебниках я видел темы, сгенерированные следующим образом:

//======================================
// 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  

Как мы создаем темы, не дублируя общедоступные стили, такие как типографика?

Возможно, вам следует упомянуть, что ваш вопрос относится к Angular Material 15. Похоже, что некоторые пользователи все еще придумывают решения для Material 14, потому что они не знают о критических изменениях, внесенных в последнюю версию.

kellermat 29.01.2023 20:37

Хороший звонок... Только что обновил заголовок...

Ole 30.01.2023 01:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
185
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я считаю, что это должно работать Также я считаю, что 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

Ole 29.01.2023 18:31
Ответ принят как подходящий

Согласно их документации 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

Ole 06.02.2023 02:58

Другие вопросы по теме