Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the correct way to make a "dark" theme in Angular Material?

I want to make a theme where the bg is dark indigo and font is white. I am having trouble making the font white... How would one do this with the angular material themes? I know this can be done with CSS, but I thought this would be configurable as part of the theming

This is my config:

var inversePurple = $mdThemingProvider.extendPalette('indigo', {
        'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
        // on this palette should be dark or light
        'contrastDarkColors': "light",
        'contrastLightColors': 'light'    // could also specify this if default was 'dark'
    });

    $mdThemingProvider.definePalette('inversePurple', inversePurple)
    $mdThemingProvider.theme('inverse')
        .backgroundPalette('inversePurple', {
            'default': '500',
        })
        .dark()

My HTML:

<md-content md-theme="inverse" layout-fill flex>
    <p>This is not white</p>
</md-content>
like image 498
wlingke Avatar asked Nov 01 '22 05:11

wlingke


1 Answers

 .config(function ($mdThemingProvider) {
     $mdThemingProvider.theme('default')
        .backgroundPalette('indigo',{
            'default':'900',
         });
  });
like image 195
Chris G Avatar answered Nov 15 '22 07:11

Chris G