使用角度材质和$ mdThemingProvider更改调色板颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用角度材质和$ mdThemingProvider更改调色板颜色相关的知识，希望对你有一定的参考价值。
我正在尝试使用自定义调色板更改主题，但我在控制台中收到此错误：
VM229057 angular-material.js:6739 Uncaught Error: You supplied an invalid color palette for theme pink's accent palette. Available palettes: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, cyanPalette, amberPalette, redPalette, pinkPalette, purplePalette, limePalette, tealPalette, yellowPalette
at checkValidPalette (VM229057 angular-material.js:6739)
at parseRules (VM229057 angular-material.js:6525)
at VM229057 angular-material.js:6715
at Array.forEach (<anonymous>)
at generateTheme (VM229057 angular-material.js:6714)
at VM229057 angular-material.js:6641
at Object.forEach (VM229038 angular.js:339)
at generateAllThemes (VM229057 angular-material.js:6639)
at Object.invoke (VM229038 angular.js:4762)
at VM229038 angular.js:4569
这是我的代码：
mainApp.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('blue')
.warnPalette('red', {
'default': '700' // use shade 200 for default, and keep all other shades the same
});
$mdThemingProvider.definePalette('cyanPalette', {
'50': 'E0F7FA',
'100': 'B2EBF2',
'200': '80DEEA',
'300': '4DD0E1',
'400': '26C6DA',
'500': '00BCD4',
'600': '00ACC1',
'700': '0097A7',
'800': '00838F',
'900': '006064',
'A100': '84FFFF',
'A200': '18FFFF',
'A400': '00E5FF',
'A700': '00B8D4',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// Amber palette
$mdThemingProvider.definePalette('amberPalette', {
'50': 'FFF8E1',
'100': 'FFECB3',
'200': 'FFE082',
'300': 'FFD54F',
'400': 'FFCA28',
'500': 'FFC107',
'600': 'FFB300',
'700': 'FFA000',
'800': 'FF8F00',
'900': 'FF6F00',
'A100': 'FFE57F',
'A200': 'FFD740',
'A400': 'FFC400',
'A700': 'FFAB00',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// Red palette
$mdThemingProvider.definePalette('redPalette', {
'50': 'FFEBEE',
'100': 'FFCDD2',
'200': 'EF9A9A',
'300': 'E57373',
'400': 'EF5350',
'500': 'F44336',
'600': 'E53935',
'700': 'D32F2F',
'800': 'C62828',
'900': 'B71C1C',
'A100': 'FF8A80',
'A200': 'FF5252',
'A400': 'FF1744',
'A700': 'D50000',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// Pink palette
$mdThemingProvider.definePalette('pinkPalette', {
'50': 'FCE4EC',
'100': 'F8BBD0',
'200': 'F48FB1',
'300': 'F06292',
'400': 'EC407A',
'500': 'E91E63',
'600': 'D81B60',
'700': 'C2185B',
'800': 'AD1457',
'900': '880E4F',
'A100': 'FF80AB',
'A200': 'FF4081',
'A400': 'F50057',
'A700': 'C51162',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// Purple palette
$mdThemingProvider.definePalette('purplePalette', {
'50': 'F3E5F5',
'100': 'E1BEE7',
'200': 'CE93D8',
'300': 'BA68C8',
'400': 'AB47BC',
'500': '9C27B0',
'600': '8E24AA',
'700': '7B1FA2',
'800': '6A1B9A',
'900': '4A148C',
'A100': 'EA80FC',
'A200': 'E040FB',
'A400': 'D500F9',
'A700': 'AA00FF',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// Lime palette
$mdThemingProvider.definePalette('limePalette', {
'50': 'F9FBE7',
'100': 'F0F4C3',
'200': 'E6EE9C',
'300': 'DCE775',
'400': 'D4E157',
'500': 'CDDC39',
'600': 'C0CA33',
'700': 'AFB42B',
'800': '9E9D24',
'900': '827717',
'A100': 'F4FF81',
'A200': 'EEFF41',
'A400': 'C6FF00',
'A700': 'AEEA00',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// Teal palette
$mdThemingProvider.definePalette('tealPalette', {
'50': 'E0F2F1',
'100': 'B2DFDB',
'200': '80CBC4',
'300': '4DB6AC',
'400': '26A69A',
'500': '009688',
'600': '00897B',
'700': '00796B',
'800': '00695C',
'900': '004D40',
'A100': 'A7FFEB',
'A200': '64FFDA',
'A400': '1DE9B6',
'A700': '00BFA5',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// Yellow palette
$mdThemingProvider.definePalette('yellowPalette', {
'50': 'FFFDE7',
'100': 'FFF9C4',
'200': 'FFF59D',
'300': 'FFF176',
'400': 'FFEE58',
'500': 'FFEB3B',
'600': 'FDD835',
'700': 'FBC02D',
'800': 'F9A825',
'900': 'F57F17',
'A100': 'FFFF8D',
'A200': 'FFFF00',
'A400': 'FFEA00',
'A700': 'FFD600',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// red selection
$mdThemingProvider.theme('red')
.primaryPalette('redPalette')
.accentPalette('amberPalette')
.warnPalette('redPalette');
// pink selection
$mdThemingProvider.theme('pink')
.primaryPalette('pinkPalette')
.accentPalette('default')
.warnPalette('pinkPalette');
// purple selection
$mdThemingProvider.theme('purple')
.primaryPalette('purplePalette')
.accentPalette('default')
.warnPalette('purplePalette');
// lime selection
$mdThemingProvider.theme('lime')
.primaryPalette('limePalette')
.accentPalette('tealPalette')
.warnPalette('limePalette');
$mdThemingProvider.theme('cyan')
.primaryPalette('cyanPalette')
.accentPalette('amberPalette')
.warnPalette('amberPalette');
$mdThemingProvider.alwaysWatchTheme(true);
});
在我的index.html中，我在md-theme="{{theme}}" md-theme-watch="true"标签中使用了这两个属性body。
答案
正如错误所说，主题粉红色的重点调色板是错误的。
这是你的代码：
// pink selection
$mdThemingProvider.theme('pink')
.primaryPalette('pinkPalette')
.accentPalette('default')
.warnPalette('pinkPalette');
将上面的重音调色板部分更改为错误消息中列出的有效调色板例如：
$mdThemingProvider.theme('pink')
.primaryPalette('pinkPalette')
.accentPalette('red')
.warnPalette('pinkPalette');
可用调色板：
red,
pink,
purple,
deep-purple,
indigo,
blue,
light-blue,
cyan,
teal,
green,
light-green,
lime,
yellow,
amber,
orange,
deep-orange,
brown,
grey,
blue-grey,
cyanPalette,
amberPalette,
redPalette,
pinkPalette,
purplePalette,
limePalette,
tealPalette,
yellowPalette
以上是关于使用角度材质和$ mdThemingProvider更改调色板颜色的主要内容，如果未能解决你的问题，请参考以下文章