I am working on a design for my webapp, and I need a dark theme similar to the one that was visible here .
Unfortunately, I found the Angular Material Theming Docs very hard to raise my head; it is not mentioned where each color will be used, how to set the background color or text color, etc.
I am currently using:
.config(function($mdThemingProvider) { $mdThemingProvider.definePalette('coolpal', {"50":"#d9ddec","100":"#a6b1d2","200":"#8190bf","300":"#5468a5","400":"#495b90","500":"#252830","600":"#354168","700":"#2a3453","800":"#20283f","900":"#161b2b","A100":"#252830","A200":"#a6b1d2","A400":"#495b90","A700":"#2a3453"}); $mdThemingProvider.definePalette('accentpal', {"50":"#ffffff","100":"#bfe7f7","200":"#8dd5f1","300":"#4ebee9","400":"#32b4e5","500":"#1ca8dd","600":"#1993c2","700":"#157fa7","800":"#126a8c","900":"#0e5570","A100":"#ffffff","A200":"#bfe7f7","A400":"#32b4e5","A700":"#157fa7"}); $mdThemingProvider.definePalette('warnpal', {"50":"#f0fdf9","100":"#adf4dc","200":"#7bedc7","300":"#3ce5ac","400":"#21e1a0","500":"#1bc98e","600":"#17ae7b","700":"#149368","800":"#107855","900":"#0d5d42","A100":"#f0fdf9","A200":"#adf4dc","A400":"#21e1a0","A700":"#149368"}); $mdThemingProvider.theme('default') .primaryPalette('coolpal').dark() .accentPalette('accentpal') .warnPalette('warnpal') .backgroundPalette('coolpal') })
With a bit of hacking colors this works fine, but if I look at the colors in the md-toolbar , the text will be set to rgba(0,0,0,0.87); , and I do not know how to change it; I assumed that this would happen from somewhere in my coolpal tag, but it is not. Here's how my text elements get erased:
How to change $mdThemingProvider so that the text is light rather than opaque black?