且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用深色主题时如何为文本设置浅色前景色?

更新时间:2023-01-27 17:35:16

我也遇到了这个问题,通过设置 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.