如何在角度材质中定义自定义主题以控制按钮文本的颜色?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在角度材质中定义自定义主题以控制按钮文本的颜色?相关的知识,希望对你有一定的参考价值。

你好我使用角度材料,我已经定义了一个自定义主题,我想用它作为我的重点主题:

$mdThemingProvider.definePalette('gold', {
    '50': '#333333',
    '100': '#333333',
    '200': '#333333',
    '300': '#333333',
    '400': '#333333',
    '500': '#FFB000',
    '600': '#FFB000',
    '700': '#FFB000',
    '800': '#FFB000',
    '900': '#FFB000',
    'A100': '#333333',
    'A200': '#FFB000',
    'A400': '#FFB000',
    'A700': '#FFB000',
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50', '100',
     '200', '300', '400', 'A100'],
    'contrastLightColors': undefined
  });

$mdThemingProvider.theme('default')
    .accentPalette('gold');

我已经设置了一个codepen here,你可以看到它在行动,我的问题是我的按钮的文本有md-accent类仍然是标准的白色而不是我定义为主题中的对比色的黑色。

有没有人知道我需要如何定义我的主题,以便在#333333按钮的文本上使用黑色md-accent

答案

有两种方法可以做到这一点:

  1. 您可以将contrastDefaultColor更改为dark而不是light。这将控制调色板中所有颜色的默认对比色。
  2. 你可以更新你的contrastDarkColors以包括A200,这是按钮使用的颜色。

你可以在这里阅读更多:https://material.angularjs.org/latest/Theming/03_configuring_a_theme

以上是关于如何在角度材质中定义自定义主题以控制按钮文本的颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何在其他 scss 文件中使用角度材质主题颜色变量

创建自定义角度材质主题时最好的方法是啥?

使用角度材质和$ mdThemingProvider更改调色板颜色

主题颜色材料设计与角度材料

Angular 材质 io 预定义主题颜色

Angular 材质自定义组件主题