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

发布时间：2020-12-17 07:30:43 所属栏目：安全来源：网络整理

导读：我开始尝试使用Angular Material(0.8.3版本具体). 从主题相关指令和mdThemingProvider源代码的代码我发现光前景是为黑暗主题定义的.但是默认情况下,文本段落的文本仍然是黑暗的. 即使他们的输入演示的示例代码有颜色问题.当您删除标题和电子邮件输入字段的内

我开始尝试使用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使用的阴影,我通过反复试验找到了它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!