Question

我正在尝试在材质设计基础模板中添加一些自定义颜色

module.js

var app = angular.module('AppTool', ['ngMaterial', 'ui.router', 'ngCookies', 'ngResource','ngRoute', 'satellizer', 'myConfig.config', 'ngMdIcons'])
    .config(function($mdThemingProvider) {
         $mdThemingProvider.definePalette('amazingPaletteName', {
        '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'
    });

   $mdThemingProvider.theme('myTheme')
        .primaryPalette('amazingPaletteName');
});

overview.html

 <md-content>
            <md-tabs md-dynamic-height md-border-bottom class="md-primary md-hue-2" style="" >
                <md-tab class="overview_tabs" label="Overview" style="">
                    <md-content class="md-padding details-tab">
                        <ng-include src="'templates/overview.html'"></ng-include>
                    </md-content>
                </md-tab>

            </md-tabs>
        </md-content>

当我看到标签页眉的颜色时，它显示： rgb（40,53,147）或＃283593，此颜色来自何处以及如何使用其他颜色模板。我没有在amazingpalletname主题中的任何地方看到这种十六进制颜色

这些50,100和所有数字是什么，我们如何使用它们，

Answer 1

左侧数字（50,100等）可用于在Angular-Material中指定主题颜色。

    $mdThemingProvider.theme('default')
        .primaryPalette('purple', {
            'default': '700', // by default use shade from the palette for primary intentions
            'hue-1': 'A400', // use shade for the <code>md-hue-1</code> class
            'hue-2': '600', // use shade for the <code>md-hue-2</code> class
            'hue-3': 'A100' // use shade for the <code>md-hue-3</code> class
        })
        // If you specify less than all of the keys, it will inherit from the default shades
        .accentPalette('deep-purple', {
            'default': '200' // use shade 200 for default, and keep all other shades the same
        })

您在使用中看到的数字与左侧数字对应以设置颜色。然后，您可以将默认色调设置为＆＃39; 700＆＃39;就像我一样，这是一个比正常默认值更暗的色调。

我的网站在此示例中使用紫色主题的变体，我可以将色调设置为与Google设置不同。

Google Color Design Guidelines

在角材料设计中添加和改变颜色？

1 个答案: