问题描述
.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某个变量 来改变主题吗？
问题解答
回答1：参考问题刚才看了下最新的material源码，貌似没有reload这个函数，如果要使用下面的方法还是需要修改material的源码。如果不改源码的话，请忽略这个答案。
可以按如下步骤尝试下：1.按照参考问题里面的答案修改material的源码
2.在configure阶段，注册$mdThemingProvider供controller使用
angular.module('yourModule',[’whateverDependencies’]).config(function($provide, $mdThemingProvider) { $provide.value(’themeProvider’, $mdThemingProvider); })
3.在controller中重新加载theme
.controller(’someController’, function(themeProvider, $injector) { themeProvider.theme(’default’).dark(); themeProvider.reload($injector);}回答2：
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。
但这样做很累，对吧。
所以 最好是选一个主题之后，新窗口打开预览。或者 有个单独设置主题的页面，列出所有主题的样子。 供选择就好。毕竟在原有网站上预览界面是个很烦的事情。
