使用深色主题时如何为文本设置浅色前景色? [英] How to set light foreground colors for text when using dark theme?

问题描述

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

I'm start experimenting with Angular Material (0.8.3 version to be specific).
From code of theming related directives and mdThemingProvider source code I'm found that light foreground is defined for dark theme. But text for text paragraphs remains dark as for default.
Even with their example code for Input Demo there color problem. When you delete content of title and e-mail input field placeholder text turns into dark grey so it is almost invisible.
I'm only starting looking through their library source code and can not find out how to active changing text for paragraphs and placeholders to contrast one.
From briefly looking at core/services/theming/theme.palette.js file I found some palettes properties with name prefix contrast. So I think they defines colors to be visible on dark theme. But how to active theme to using them?

有什么好的建议可以在不进行许多额外编码的情况下以深色主题存档可读内容吗?
如果这不会破坏整个应用程序的动态变化主题(通过从 js 代码调用 $mdThemeProvider)，那就太好了.

Have anyone good suggestion to archive readable content on dark theme without many additional coding?
If this do not breaks dynamic changing theme of entire application (through calling $mdThemeProvider from js code) it would be wonderful.

推荐答案

我也遇到了这个问题，通过设置 foregroundPalette:

I ran into this as well and I was able to solve in satisfactorily in my case (Angular Material v0.9.6) by setting the foregroundPalette of the theme:

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

您可以在此处查看演示并将其与原始前景.这似乎没有公开记录，所以它可能是 AM 内部的，实际上它会改变你整个应用的前景，即使你使用多个主题.

You can see a demo here and compare it to the original foreground. This doesn't seem to be publicly documented, so it might be internal to AM and in fact it will change the foreground for your entire app, even if you are using multiple themes.

前景有四种色调，它们对于浅色和深色主题具有不同的值.以下是默认值(来自 AM 来源):

There are four shades for foreground, and they have different values for light vs. dark themes. Here are the defaults (from AM source):

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使用的阴影，这是我通过反复试验发现的.

As for why I picked 3, it happens to be the shade used by md-input-container, which I found by trial and error.

这篇关于使用深色主题时如何为文本设置浅色前景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！