DEV Community
·
使用SCSS和CSS修改Angular Material 19主题
内容提要
本文介绍了如何使用SCSS混合宏和CSS变量修改Angular Material 19主题，包括创建新项目、生成演示组件、添加主题切换功能，使用mat.theme混合宏定义颜色和排版，生成CSS变量，创建自定义调色板，使用Theme Builder生成主题，以及覆盖特定组件的主题。
关键要点
-
使用SCSS混合宏和CSS变量修改Angular Material 19主题的指南。
-
创建新Angular项目并添加Angular Material 19。
-
生成演示组件，包括导航、仪表板、地址表单和表格。
-
在导航组件中添加主题切换功能。
-
使用mat.theme混合宏定义颜色、排版和密度。
-
生成CSS变量以控制组件外观和布局。
-
创建自定义调色板，使用主题颜色生成工具。
-
应用默认背景和字体颜色以符合Material主题。
-
修改系统变量以实现主题自定义。
-
使用mat.theme-overrides混合宏覆盖特定组件的主题。
-
使用主题生成器获取所需主题的令牌。
延伸问答
如何创建一个新的Angular项目并添加Angular Material 19？
使用命令npm i -g @angular/cli@19创建新项目，然后运行ng new angular-material-19-theming --style scss --skip-tests --defaults，接着使用ng add @angular/material@19添加Angular Material 19。
如何在Angular Material中实现主题切换功能？
在导航组件中添加一个mat-slide-toggle，并在其change事件中调用onThemeChange方法来切换主题，例如通过添加或移除dark类。
mat.theme混合宏的作用是什么？
mat.theme混合宏用于定义颜色、排版和密度，并生成控制组件外观和布局的CSS变量。
如何创建自定义调色板？
使用命令ng generate @angular/material:theme-color生成自定义调色板，并根据主色生成其他颜色。
如何使用Theme Builder生成主题？
访问themes.angular-material.dev，选择种子颜色生成主题，预览并导出主题以获取所需的令牌。
如何覆盖特定组件的主题？
使用mat.theme-overrides混合宏来覆盖特定组件的主题，例如在导航组件中改变滑动开关的主色。
