3

当我在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() 的含义是什么？
如果我想将背景颜色设置为蓝色、红色或其他颜色怎么办？

4

2 回答 2

2

如前所述，它交换调色板以使用暗值。我基于 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)';

如果主题定义中未指定，“primary”、“accent”、“warn”和“background”的默认色调也会更改。如果您没有在主题定义中明确设置值，这将导致应用程序看起来略有不同。轻主题的价值为

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

如果主题没有“primary”、“accent”、“warn”或“background”的定义，则这些条目的默认值为：

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

如果您正在创建自定义调色板，您还可以通过设置指定对比色：

'contrastDefaultColor': 'dark'

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

我个人还没有真正能够制作出好看的深色主题，并且还发现有关深色主题的文档有点缺乏。您可以做的另一件事是查看调色板定义，以帮助理解对比色的映射。

于 2015-06-16T23:14:24.327 回答
0

我相信它会使背景本身变暗，而不一定是突出显示的颜色。您是否尝试过应用它并查看会发生什么？另外，其他突出显示颜色是否如您所愿，或者这只是演示代码？

如果其他主题不起作用，请确保您在应用程序的配置中插入了正确的依赖项。你必须有

ngMaterial
于 2015-04-06T16:16:57.210 回答