angular 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

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

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

ngMaterial

Answer 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' 定义一些对比色。

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

angular material, 定义主题色时如何使用dark()函数？

angular material, how to use dark() function when define theme colors?

angular-material