Sto lavorando a un progetto per la mia webapp e mi piacerebbe un tema scuro simile a quello visto here.Configurazione di un tema scuro per materiale angolare
Purtroppo ho trovato il Angular Material Theming Docs molto difficile da capitare; non si parla di dove verrà utilizzato ogni colore, come impostare un colore di sfondo o un colore di testo ecc
Attualmente sto usando:
.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')
})
Con un po 'di pirateria di colori questo funziona bene, ma se guardo i colori in un md-toolbar
, il testo è impostato su rgba(0,0,0,0.87);
e non ho idea di come cambiarlo; Ho pensato che sarebbe venuto da qualche parte nel mio tema coolpal
, ma non lo è. Ecco come i miei elementi di testo sono arredate:
Come posso alterare $mdThemingProvider
per garantire il testo è un colore chiaro piuttosto che nero opaco?
Grazie per aver postato questo. Stavo solo prototipando qualcosa e non volevo passare molto tempo a configurare i colori. Vorrei che ci fosse un posto con diverse tavolozze definite per le persone da copiare e incollare per temi diversi. –