CODEWITHSUNDEEP
angularjsmaterial-designangular-material
wlingke
wlingke

Reputation: 4799

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>

Upvotes: 5

Views: 3794

Answers (1)

Chris G
Chris G

Reputation: 245

 .config(function ($mdThemingProvider) {
     $mdThemingProvider.theme('default')
        .backgroundPalette('indigo',{
            'default':'900',
         });
  });

Upvotes: 2

Related Questions