在运行时在config函数之外定义主要/警告调色板

时间:2017-03-14 03:53:28

标签: angularjs material-design angular-material

您好我正在尝试使用角度材料$ mdthemingprovider动态地将主题应用到我的网站。

我在配置函数中注入了 $ mdThemingProvider ,如下所示。

    angular.module('my-module').
config(function ($provide, $mdThemingProvider) {
    $provide.value('themeProvider', $mdThemingProvider);})

现在我在dynamic theme中说过,我在控制器中注入了 themeProvider 。我首先尝试定义主要,重音,警告,调色板然后注册主题,然后尝试以下列方式设置新注册的主题。

     var customPrimary = {
        '50': '#ff7b82',
        '100': '#ff626a',
        '200': '#ff4852',
        '300': '#ff2f3a',
        '400': '#ff1522',
        '500': '#fb000d',
        '600': '#e1000c',
        '700': '#c8000a',
        '800': '#ae0009',
        '900': '#950008',
        'A100': '#ff959a',
        'A200': '#ffaeb3',
        'A400': '#ffc8cb',
        'A700': '#7b0006'
    };

    themeProvider
        .definePalette('customPrimary', 
                        customPrimary);

    var customAccent = {
        '50': '#000a08',
        '100': '#00231d',
        '200': '#003d31',
        '300': '#005646',
        '400': '#00705a',
        '500': '#00896f',
        '600': '#00bc97',
        '700': '#00d6ac',
        '800': '#00efc0',
        '900': '#0affcf',
        'A100': '#00bc97',
        'A200': '#00a383',
        'A400': '#00896f',
        'A700': '#23ffd4'
    };
    themeProvider
        .definePalette('customAccent', 
                        customAccent);

    var customBackground = {
        '50': '#737373',
        '100': '#666666',
        '200': '#595959',
        '300': '#4d4d4d',
        '400': '#404040',
        '500': '#333',
        '600': '#262626',
        '700': '#1a1a1a',
        '800': '#0d0d0d',
        '900': '#000000',
        'A100': '#808080',
        'A200': '#8c8c8c',
        'A400': '#999999',
        'A700': '#000000'
    };

    themeProvider.definePalette('customBackground',customBackground);
    themeProvider.theme('custom')
`.primaryPalette('customPrimary'')
   accentPalette('customAccent')
 .backgroundPalette('customBackground');`
 `themeProvider.setDefaultTheme('custom');`

我可以看到' 自定义'主题在div等元素级别应用于firebug模式。但颜色没有得到应用。

但是,如果我使用以下任何颜色直接设置 primaryPalette accentPalette backgroundPalette ,颜色会反映在网页中。

  `  themeProvider.theme('custom')
  .primaryPalette('red')
  .accentPalette('yellow')
  .backgroundPalette('blue');

themeProvider.setDefaultTheme('custom');

所以似乎definePalette方法不适用于实例themeProvider。

themeProvider.definePalette('customBackground',customBackground);`

并且调色板没有定义。

任何人都可以指导我如何在控制器中定义自定义调色板。

0 个答案:

没有答案