首页 文章

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

提问于
浏览 次
8

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

Have anyone good suggestion to archive readable content on dark theme without many additional coding?
如果这不打破整个应用程序的动态更改主题（通过从js代码调用$ mdThemeProvider），那将是非常好的 .

angular-material

1 回答

  • 11

    我也遇到了这个问题，通过设置主题的 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的内部，事实上它将改变你的 entire app 的前景，即使你使用多个主题 .

    前景有四种阴影，它们对于浅色和深色主题有不同的值 . 以下是默认值（来自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 使用的阴影，我通过反复试验找到了它 .

    回复于

相关问题