Angular Material 2 自定义主题
最新回答
我是太阳啊
2026-10-28 08:00:40
调色板是代表颜色空间一部分的颜色集合，每个值称为色调，调色板内的色调从最亮到最暗排序。Angular Material使用Sass map对象表示调色板，包含调色板的色调和对比色。您可通过定义结构匹配调色板部分描述的Sass映射创建自定义调色板，或使用预定义调色板。
主题是颜色、排版和密度选项的集合，包含三个用于确定组件颜色的调色板。通过Sass定义自定义主题或导入预构建主题CSS文件在应用中包含主题样式。Angular Material提供了一个名为core的mixin，其中包含多个组件使用的常见功能。主题表示为Sass map，包含颜色、排版和密度选择，以及设计系统设置。
构建主题需要定义主要调色板和强调调色板，以及可选的警告调色板。每个主题必须包缓孝含core mixin一次。主题内容分为基础、颜色、排版和密度四个维度，每个组件都有一个针对每个主题维度的mixin，以及一个主题mixin生成依赖于主题配置的所有样式。应用主题到组件需要包含每个主题Sass mixins。
Angular Material包括四个预构建主题CSS文件，每个文件选择了不同的调色板，可以使用这些预构建主题之一，或定义多个主题。在单个文件或单独文件中定义多个主题允许支持多个主题。自定义样式范围可通过包含Sass mixin在应用程序的特定范围内自定义组件样式。
从调色板中读取色调用顷哪丛于自定义组件样式，定制密度基于Material Design密度指南。可调整密度系统比例以获得更高或更低的密度。强焦点指示可通过启用高度可见轮廓在聚焦元素上渲染，通过配置映射自定义外观和颜雀樱色。
在使用Shadow DOM时，需在包含Angular Material组件的每个Shadow root中加载主题样式。Angular Material不会根据用户偏好媒体查询应用样式，而是提供灵活的API根据用户条件应用主题样式。
参考文档包含更多Angular相关文章及最新更新。
热门标签
