Question

当我在https://material.angularjs.org/#/demo/material.components.input

阅读演示时

app.config( function($mdThemingProvider){
// Configure a dark theme with primary foreground yellow
$mdThemingProvider.theme('docs-dark', 'default')
    .primaryPalette('yellow')
    .dark();   });

.dark（）的含义是什么？如果我想将背景颜色设置为蓝色，红色或其他？

，该怎么办？

Answer 1

如上所述，它交换调色板以使用暗值。我将它基于0.10版本的theming.js中的代码。

首先，在主题上设置dark（）会更改背景值：

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 DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)';

如果主题定义中未指定，则“主要”，“重音”，“警告”和“背景”的默认色调也会更改。如果未在主题定义中显式设置值，这将导致应用程序看起来略有不同。光主题的值为

var LIGHT_DEFAULT_HUES = {
  'accent': {
    'default': 'A200',
    'hue-1': 'A100',
    'hue-2': 'A400',
    'hue-3': 'A700'
  },
  'background': {
    'default': '50',
    'hue-1': 'A100',
    'hue-2': '100',
    'hue-3': '300'
  }
};

黑暗主题的值为：

var DARK_DEFAULT_HUES = {
  'background': {
    'default': 'A400',
    'hue-1': '800',
    'hue-2': '900',
    'hue-3': 'A200'
  }
};

如果主题没有“主要”，“重音”，“警告”或“背景”的定义，则这些条目的默认值为：

var defaultDefaultHues = {
  'default': '500',
  'hue-1': '300',
  'hue-2': '800',
  'hue-3': 'A100'
};

如果要创建自定义调色板，还可以通过设置：

指定对比色

'contrastDefaultColor': 'dark'

并使用'contrastLightColors'和'contrastStrongLightColors'定义一些对比色。

我个人并没有真正能够让好的看起来很黑暗的主题，并且还发现文档在黑暗主题方面有点缺乏。您可以做的另一件事是查看palette definitions以帮助理解对比色的映射。

Answer 2

我认为它会使背景变暗，不一定是高光颜色。您是否尝试过应用它并看看会发生什么？另外，是否有其他高亮颜色出现在你想要的地方，或者这只是演示代码？

如果其他主题无效，请确保在应用的配置中插入了正确的依赖项。你必须

ngMaterial

角度材质，定义主题颜色时如何使用dark（）函数？

2 个答案: