使用角度材质和$ mdThemingProvider更改调色板颜色

时间:2018-03-02 14:36:10

标签: javascript html angularjs angular-material theming

我尝试使用自定义调色板更改主题,但我在控制台中收到此错误:

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

1 个答案:

答案 0 :(得分:1)

正如错误所说,粉红色主题的重点调色板是错误的。

这是你的代码:

// 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