问题标签 [angular-material-theming]

是否可以使用您自己的十六进制代码在角度材料中创建主题？

而不是这样的

做这样的事情

基本上我有用户创建自己的主题

在 Angular Material 自定义主题文档中，我们将原色设置为靛蓝，如下所示：

我在哪里可以引用该mat-palette()函数的所有可接受的参数？我想知道$mat-indigo上面例子中所有可能的颜色名称。在文档中找不到它。

谢谢。

我在角 7 中使用角材料。

我之前在 angular-1 中使用过 angular-material，它提供了一种方式（md-colors）来使用所有颜色。

但是对于 angular-material-7，我找不到这些属性。

当我们在像按钮这样的组件中使用颜色时

在颜色方面，我们只能使用主要、重点和警告托盘。但我想使用更多的颜色而不是这 3 种颜色。我想要一种方法来使用我们在 angular-material-1 中使用的所有材料主题颜色

谁能告诉我我在这里想念什么。所有颜色变量都存在于@angular/material/theming.scss. 但我不确定如何使用这些颜色。

我正在尝试实现 Angular Material Typography，但是我遇到了一些困难，我不确定可能是什么问题。

我按照 Angular在这里提供的说明进行操作，但是遇到了问题。问题是，看起来应用程序中的所有内容都受到了影响，但是有些内容被默认排版覆盖，我不确定我做错了什么。

创建和使用的排版

正如您在排版中看到的那样，我故意将第一个参数（字体大小）设置为100px，以便我可以查看应用程序上的所有内容是否都受到影响。

示例 #1：材质按钮

对于 Angular Material 按钮（在 html 元素 'button' 上使用 'mat-button'），我看到了我所期望的，如下所示。文本设置为 100px。

示例 #2：工具栏

但是对于 Mat 工具栏，我没有看到字体大小设置为 100 像素。在我看来，如下所示的默认字体大小覆盖了 100px 大小：

示例 #3：具有多个覆盖的不同工具栏

对于另一个工具栏上的最后一个示例，我们可以看到 100px 被添加了几次，每次都相互覆盖，直到最后一个覆盖的也是 20px，所以字体大小不是 100px。

细节：

此处找到的 Angular Material 指南显示我们有 3 种在应用程序中使用排版的方法：

据我了解，我使用的第三个选项应该适用于您使用的任何内容class="mat-typography"。所以我将它添加到body应用程序中，并在app-root. 然而，正如我们在上面看到的，只有一些应用程序受到了正确的影响。

我尝试将它添加到组件中应用程序的较小部分，但结果是一样的。

我不确定我的理解是否错误并且我没有正确使用它或者其他地方是否存在问题，我假设我使用它错误但是我无法找到其他人创建的任何教程和示例令人惊讶。

我尝试将自己的类附加到诸如class="mat-display-1"似乎工作正常的项目中，但是如果我必须在整个应用程序的任何地方应用它，这似乎不是一个好的解决方案。

如果可能的话，我希望它可以在整个应用程序中应用，而不必单独为排版设置 100 个类。

我知道我可以按照这里的建议将其应用于我自己在 sass 中的元素，但我认为他们自己会这样做。

I'm using Angular Material theming for my project. I have created a custom theme, with a primary, accent and warn color. Everything is working fine, and I'm switching to material-dark-theme with a class on the root of the project.

As I am looking at the dark-mode, I am tweaking the scss theme for custom component - some elements should have been colored using background - and things are going smoothly.

The problem is, as I was looking at Material Theming guidelines, I came across this image :

Here, it seems obvious that the app bar (where "Analytics" is written) uses the primary (purple) as background for the light theme. Then, for the dark theme... Suddenly, it seems as though the color used is a background color (perhaps card, or any other variant).

I would absolutely love to be able to do the same : less primary/colors in the dark mode for some components (many are custom) of my project. The issue is I have no idea how to best achieve this.

I've followed this awesome guide to apply the theme to my application, so my theme files are separated from my components, and their mixin included in my main.scss file.

Does someone have a suggestion for me ? I would like to do the least code duplication possible. Thank you !

Edit

I'm trying something out to have different colors (background vs primary) on some parts of my components. So far it looks something like this :

component's theme file

main scss file extract

It creates a bit of duplication, but so far it's the best way I found. Any thoughts ?

我正在尝试为 Angular Material 创建自定义主题，但是当我应用排版时，某些元素会更改其自己的字体，但并非在所有应用程序中都会更改。例如，对于链接不起作用，对于网格列表元素也不起作用（我没有注意到它是否与更多材料组件一起出现）。这是我的代码：

字体.scss

主题.scss

样式.scss

任何的想法？

我需要从包含基于域的颜色的配置文件中获取调色板。

配置文件是放在项目根目录下的json文件。

在 angular material 1 中，有一种方法可以通过lazy-generate-theme按需生成主题

有什么方法可以在角度 8 的角度材料中做类似的事情吗？

我正在尝试编写一个函数来动态地将一些转换应用于先前定义的角度材质主题的颜色映射。问题是函数的结果是错误的，不知何故。

我已经通过调试日志打印了结果，它看起来与原始地图完全一样，但无法通过键进行比较，如果我尝试将其提供给角度材料函数，则会导致错误。

这是该问题的简化演示-您可以看到

• $eenie并且$meenie是等价的
• 函数 ($miney和$mo) 的结果也是等价的
• 通过调试，所有 4 个看起来都相同

我需要在函数内部完成的$eenie是相当于$miney经过map_merge

我怀疑可能是因为密钥看起来是一个数字，它存在某种数据类型危机，但我对 SASS 的了解还不够，无法弄清楚是否是这种情况或如何解决它。我试过使用引号，但这似乎不是角度材料函数的可接受输入，所以我需要它$eenie完全匹配。

我试图通过处理两个主题来为我自己的组件设置主题。

所以我写了下面的代码。这是主题.scss

我写了一个简单的组件。这是hello.component.scss

这里的问题是，无论我是否更改主题，颜色都是固定的。

我想使用某种色调的颜色，当我切换到深色主题模式时，它会变成另一种颜色。

是否可以 ？如何 ？

感谢您的帮助

我为我的 Angular 应用程序制作了一个深色主题，但有一个问题。一切都按预期改变颜色，但材料表标题颜色保持不变。我在没有改变的样式中缺少什么？

如何更改标题的颜色？