如何建立在物质的角度多个主题？ [英] How to create multiple theme in material angular?

问题描述

我想在我的appication.I适用蓝色，淡蓝色，绿色和ornage灯罩现在用的材料角度主题part.But得不到究竟如何use..i必须创建CSS？或者JS或指令。

I want apply blue, light blue, green and ornage shade in my appication.I am using material angular theme part.But not getting exactly how to use..i have to create css ?? or js or directive..

推荐答案

1）。首先通过主题文件放在这里

2）选择从调色板中的颜色（链接）

2.) Pick colors from palette (link)

3）你想要的色彩营造出自己的年自定义主题，并将其定义内的app.config。

3.) Create yr own custom theme with colors you want and define it inside app.config.

app.config(function($mdThemingProvider) {

    $mdThemingProvider.theme('default')
          .primaryPalette('blue')
          .accentPalette('indigo')
          .warnPalette('red')
          .backgroundPalette('grey');

    $mdThemingProvider.theme('custom')
          .primaryPalette('grey')
          .accentPalette('deep-purple')
          .warnPalette('green')

    //create yr own palette 
    $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('custom2')
        .primaryPalette('amazingPaletteName')

}

4）然后在HTML年U可以只使用这些主题

4.) Then on yr html u can just use these theme

<div>
   <md-button class="md-primary">I will be blue (by default)</md-button>
   <div md-theme="custom">
      <md-button class="md-primary">I will be grey(custom)</md-button>
   </div>
   <div md-theme="custom2">
      <md-button class="md-primary">I will be red(custom2)</md-button>
   </div>
</div>

这篇关于如何建立在物质的角度多个主题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！