您好我正在尝试使用角度材料$ 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);`
并且调色板没有定义。
任何人都可以指导我如何在控制器中定义自定义调色板。