微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angular-material – 使用黑暗主题时如何为文本设置浅色前景色?

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

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

我也遇到了这个问题,通过设置主题的foregroundPalette,我能够在我的案例中满意地解决(Angular Material v0.9.6):
myApp.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .dark()
    .foregroundPalette['3'] = 'rgba(255,1)';
})

您可以看到一个演示here并将其与the original foreground进行比较.这似乎没有公开记录,因此它可能是AM的内部,事实上它将改变整个应用程序的前景,即使您使用多个主题.

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

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

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

原文地址:https://www.jb51.cc/angularjs/142221.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐