2

マテリアル デザインのベース テンプレートにカスタム カラーを追加しようとしていますが、

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');
});

概要.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 が表示されています。この色の由来と、他の色のテンプレートを使用するにはどうすればよいですか。この 16 進数の色は、amazingpalletname テーマのどこにもありません

これらの 50、100、およびすべての数字は何ですか? それらをどのように使用できますか?

4

1 に答える 1

0

左側の数字 (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 カラー デザイン ガイドライン

于 2015-11-04T16:59:46.787 に答える