.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。
但這樣做很累,對吧。
所以 最好是選一個主題之後,新視窗開啟預覽。
或 有個單獨設定主題的頁面,列出所有主題的樣子。 供選擇就好。畢竟在原網站上預覽介面是個很煩的事情。