CODEWITHSUNDEEP
angular-material
Pythagorean
Pythagorean

Reputation: 33

angular material, how to use dark() function when define theme colors?

When I read the demo at https://material.angularjs.org/#/demo/material.components.input 

app.config( function($mdThemingProvider){
// Configure a dark theme with primary foreground yellow
$mdThemingProvider.theme('docs-dark', 'default')
    .primaryPalette('yellow')
    .dark();   });

What's the meaning of .dark()?
What if I want to make the background color to blue, red or sth else?

Upvotes: 3

Views: 3960

Answers (2)

laughingpine
laughingpine

Reputation: 1049

As mentioned, it swaps the palette to use dark values. I am basing this on code in theming.js from the 0.10 release.

First, setting dark() on a theme changes the background values:

var DARK_FOREGROUND = {
  name: 'dark',
  '1': 'rgba(0,0,0,0.87)',
  '2': 'rgba(0,0,0,0.54)',
  '3': 'rgba(0,0,0,0.26)',
  '4': 'rgba(0,0,0,0.12)'
};

This makes the most noticeable change by changing the background. You also get this shadow around some text elements:

var DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)';

Default hues for 'primary', 'accent', 'warn', and 'background' are also changed if not specified in the theme definition. This will cause the application to look slightly differently if you do not explicitly set values in the theme definition. Light themes have a value of 

var LIGHT_DEFAULT_HUES = {
  'accent': {
    'default': 'A200',
    'hue-1': 'A100',
    'hue-2': 'A400',
    'hue-3': 'A700'
  },
  'background': {
    'default': '50',
    'hue-1': 'A100',
    'hue-2': '100',
    'hue-3': '300'
  }
};

And dark themes have a value of: 

var DARK_DEFAULT_HUES = {
  'background': {
    'default': 'A400',
    'hue-1': '800',
    'hue-2': '900',
    'hue-3': 'A200'
  }
};

If theme has no definition for 'primary', 'accent', 'warn', or 'background' the default for those entries will be:

var defaultDefaultHues = {
  'default': '500',
  'hue-1': '300',
  'hue-2': '800',
  'hue-3': 'A100'
};

If you are creating a custom palette, you can also specify contrast colours by setting:

'contrastDefaultColor': 'dark'

and defining some contrasting colours with 'contrastLightColors' and 'contrastStrongLightColors'.

I personally haven't really been able to make a good looking dark theme, and have also found the documentation a little bit lacking regarding dark themes. Another thing you could do is check out the palette definitions to help understand the mapping for contrasting colours.

Upvotes: 2

Eleanor Zimmermann
Eleanor Zimmermann

Reputation: 1

I believe it darkens the background itself, not necessarily the highlight colors. Have you tried just applying it and seeing what happens? Separately, are the other highlight colors appearing as you intend, or is this just the demo code?

If other theming isn't working, make sure you inserted the correct dependencies in the configuration for your app. You have to have 

ngMaterial

Upvotes: 0

Related Questions