使用深色主题时如何为文本设置浅色前景色? [英] 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令人满意地解决我的问题(Angular Material v0.9.6). :

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)';
})

您可以在此处观看演示，并将其与

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屋！