angular-material - 角度 Material ，定义主题颜色时如何使用 dark() 函数？

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

如果主题没有定义“primary”、“accent”、“warn”或“background”，那么这些条目的默认值将是:

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

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

'contrastDefaultColor': 'dark'

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

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