.config(CoreTheme)
function CoreTheme($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue',{
'default' : '500',
'hue-1' : '900',
'hue-2' : 'A100',
'hue-3' : '400'
})
.accentPalette('green',{
'default' : '600',
'hue-1' : '900',
'hue-2' : 'A100',
'hue-3' : '400'
})
.warnPalette('deep-orange',{
'default' : '500',
});
$mdThemingProvider.alwaysWatchTheme(true)
}
CoreTheme.$inject = ['$mdThemingProvider'];
export default CoreTheme;
module.js
export default angular.module('theme',['ngMaterial']);
controller.js
class ThemeCtrl{
constructor($scope,$rootScope,$mdThemingProvider){
$scope.changeTheme = changeTheme;
function changeTheme(theme_name){
$mdThemingProvider.theme('default').dark()
}
}
}
ThemeCtrl.$inject = ['$scope','$rootScope','$mdThemingProvider'];
export default ThemeCtrl;
我想在这个控制器中 动态改变主题样式 可是注入这个Provider报错!应该怎么做?
我能想到的是(1)可以在.config()中$watch某个变量 来改变主题吗?
参考问题
刚才看了下最新的material源码,貌似没有reload这个函数,如果要使用下面的方法还是需要修改material的源码。如果不改源码的话,请忽略这个答案。
可以按如下步骤尝试下:
1.按照参考问题里面的答案修改material的源码
2.在configure阶段,注册$mdThemingProvider供controller使用
3.在controller中重新加载theme
Configuring of the default theme is done by using the $mdThemingProvider during application configuration.
官网说了,请在configuration配置。
angular material 在生成页面的时候已经 给好主题了。 比如 md-button 生成之后 是 md-button md-default-theme 。 如果要修改主题的话可以遍历页面 md-default-theme 替换成你想要的主题 md-dark-theme。
但这样做很累,对吧。
所以 最好是选一个主题之后,新窗口打开预览。
或者 有个单独设置主题的页面,列出所有主题的样子。 供选择就好。毕竟在原有网站上预览界面是个很烦的事情。