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

当我在

.dark（）的含义是什么？

---

如果我想把背景颜色改成蓝色、红色或其他颜色怎么办？

我相信它会使背景本身变暗，而不一定是高光颜色。你试过应用它，看看会发生什么吗？ 另外，其他突出显示颜色是按照您的意愿显示的，还是这只是演示代码

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

ngMaterial

---

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

并使用

'ContractLightColor'

和

'ContractStrongLightColor'

定义一些对比色

---

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

Hi@laughingpine，但我还不太清楚，在应用深色（）后，什么保持不变（）。据我所知，某些值被替换（如添加阴影、某些背景等），但这样做看起来就像完全改变了主题。你能帮我澄清一下吗？也许简短介绍一下主题是由哪些组件组成的会有所帮助。如果我错过了一些东西，请道歉。检查setDark（与.dark（）相同）：。快速总结：除了常规的暗变化外，md背景的默认色调也会发生变化，默认md强调色也会有所不同。背景从50、A100、100、300到A400、800、900、A200，重音从A200、A100、A400、A700到500、300、800、A100。还请注意，只有在主题定义中未指定自己的值时，才会应用这些更改！因此，更简洁地说，.dark（）应该使用/启用较暗的颜色，而不是较亮的颜色：）

'contrastDefaultColor': 'dark'