Skip to content
Permalink
Browse files

update(docs): improve docs for extending an existing theme

Changing the default text color (black/white) on buttons is a common question that keeps coming up.
Hopefully this will help people better understand how to do that.
  • Loading branch information...
Splaktar committed Apr 11, 2016
1 parent 96d5df6 commit 126f4fd67602f48212eff182e271f5775bc09bbd
Showing with 9 additions and 5 deletions.
  1. +9 −5 docs/content/Theming/03_configuring_a_theme.md
@@ -110,25 +110,29 @@ angular.module('myApp', ['ngMaterial'])
});
</hljs>

Sometimes it is easier to extend an existing color palette to overwrite a few
colors than define a whole new one. You can use `$mdThemingProvider.extendPalette`
### Extending Existing Palettes

Sometimes it is easier to extend an existing color palette to change a few properties
than to define a whole new palette. You can use `$mdThemingProvider.extendPalette`
to quickly extend an existing color palette.

<hljs lang="js">
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {

// Extend the red theme with a few different colors
// Extend the red theme with a different color and make the contrast color black instead of white.
// For example: raised button text will be black instead of white.
var neonRedMap = $mdThemingProvider.extendPalette('red', {
'500': 'ff0000'
'500': '#ff0000',
'contrastDefaultColor': 'dark'
});

// Register the new color palette map with the name `neonRed`
$mdThemingProvider.definePalette('neonRed', neonRedMap);

// Use that theme for the primary intentions
$mdThemingProvider.theme('default')
.primaryPalette('neonRed')
.primaryPalette('neonRed');

});
</hljs>

0 comments on commit 126f4fd

Please sign in to comment.
You can’t perform that action at this time.