如何在angular material中定义一个自定义主题来控制按钮文字的颜色？

Question

您好，我正在使用 angular material 并且我已经定义了一个自定义主题，我想将其用作我的重点主题：

$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 class 的按钮的文本仍然是标准白色，而不是我在主题中定义为对比色的黑色。

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

Answer 1

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

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

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

如何在angular material中定义一个自定义主题来控制按钮文字的颜色？

How to define a custom theme in angular material as to control the color of the button text?

css

themes

angularjs

angular-material