在角材料设计中添加和更改颜色？答案

【问题标题】：Adding and changing color in angular material design?在角材料设计中添加和更改颜色？
【发布时间】：2023-03-21 04:23:01
【问题描述】：

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

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，这种颜色来自哪里以及如何使用其他颜色模板。我在惊人的palletname 主题中的任何地方都没有看到这种十六进制颜色

这些 50、100 是什么以及我们如何使用它们的所有数字，

【问题讨论】：

标签： javascript angularjs angularjs-material

【解决方案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
        })

您在使用中看到的数字，对应于左侧数字以设置颜色。然后，您可以像我一样将默认色调设置为“700”，这是比正常默认色调更暗的色调。

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

Google Color Design Guidelines

【讨论】：