如何在材料角度创建多个主题? [英] How to create multiple theme in material angular?

问题描述

我想在我的应用程序中应用蓝色、浅蓝色、绿色和橙色阴影.我正在使用材料角度主题部分.但不知道如何使用..我必须创建 css ??或 js 或指令..

解决方案

1.) 首先浏览这里的主题文档

2.) 从调色板中选择颜色(link)

3.) 用你想要的颜色创建你自己的自定义主题，并在 app.config 中定义它.

app.config(function($mdThemingProvider) {$mdThemingProvider.theme('默认').primaryPalette('蓝色').accentPalette('靛蓝').warnPalette('红色').backgroundPalette('灰色');$mdThemingProvider.theme('自定义').primaryPalette('灰色').accentPalette('深紫色').warnPalette('绿色')//创建你自己的调色板$mdThemingProvider.definePalette('amazingPaletteName', {'50': '咖啡豆','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',//默认情况下是否为文本(对比度)//在这个调色板上应该是深色或浅色'contrastDarkColors': ['50', '100',//默认情况下对比度应为暗"的色调'200', '300', '400', 'A100'],'contrastLightColors': undefined//如果默认值为 'dark'，也可以指定此项});$mdThemingProvider.theme('custom2').primaryPalette('amazingPaletteName')}

4.) 然后在 yr html 上你可以使用这些主题

<md-button class="md-primary">我会是蓝色的(默认)</md-button><div md-theme="自定义"><md-button class="md-primary">我会是灰色的(自定义)</md-button>
<div md-theme="custom2"><md-button class="md-primary">我会变红(custom2)</md-button>

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.) First go through theme documentation here

2.) Pick colors from palette (link)

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.) 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屋！