Question

我开始尝试Angular Material（0.8.3版本具体）从主题相关指令和mdThemingProvider源代码的代码我发现光前景是为黑暗主题定义的。但是文本段落的文本在默认情况下仍然是黑暗的即使他们的输入演示的示例代码有颜色问题。当您删除标题和电子邮件输入字段的内容时，占位符文字会变为深灰色，因此几乎不可见。
我只是开始查看他们的库源代码，但无法找到如何激活更改段落和占位符的文本以对比一个。
通过简要查看 core / services / theming / theme.palette.js 文件，我发现了一些名称前缀对比的调色板属性。所以我认为他们定义了在黑暗主题上可见的颜色。但是如何主动使用它们呢？

有没有人建议在黑暗主题上存档可读内容而无需额外编码？
如果这不会破坏整个应用程序的动态更改主题（通过从js代码调用$ mdThemeProvider），那将是非常棒的。

Answer 1

我也遇到了这个问题，通过设置主题的foregroundPalette，我能够在我的案例中满意地解决（Angular Material v0.9.6）：

myApp.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .dark()
    .foregroundPalette['3'] = 'rgba(255,0,0,1)';
})

您可以看到演示here并将其与the original foreground进行比较。这似乎不是公开记录的，因此它可能是AM的内部信息，实际上它会改变整个应用的前景，即使您使用的是多个主题。

前景有四种阴影，它们对于浅色和深色主题有不同的值。以下是默认值（来自AM源）：

var DARK_FOREGROUND = {
  name: 'dark',
  '1': 'rgba(0,0,0,0.87)',
  '2': 'rgba(0,0,0,0.54)',
  '3': 'rgba(0,0,0,0.26)',
  '4': 'rgba(0,0,0,0.12)'
};
var LIGHT_FOREGROUND = {
  name: 'light',
  '1': 'rgba(255,255,255,1.0)',
  '2': 'rgba(255,255,255,0.7)',
  '3': 'rgba(255,255,255,0.3)',
  '4': 'rgba(255,255,255,0.12)'
};

至于为什么我选择了3，它恰好是md-input-container使用的阴影，我通过反复试验找到了它。

使用黑暗主题时如何为文本设置浅色前景色？

1 个答案: