Skip to content

Commit

Permalink
update(docs): improve docs for extending an existing theme
Browse files Browse the repository at this point in the history
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 126f4fd
Showing 1 changed file with 9 additions and 5 deletions.
14 changes: 9 additions & 5 deletions docs/content/Theming/03_configuring_a_theme.md
Expand Up @@ -110,25 +110,29 @@ angular.module('myApp', ['ngMaterial'])
}); });
</hljs> </hljs>


Sometimes it is easier to extend an existing color palette to overwrite a few ### Extending Existing Palettes
colors than define a whole new one. You can use `$mdThemingProvider.extendPalette`
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. to quickly extend an existing color palette.


<hljs lang="js"> <hljs lang="js">
angular.module('myApp', ['ngMaterial']) angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) { .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', { var neonRedMap = $mdThemingProvider.extendPalette('red', {
'500': 'ff0000' '500': '#ff0000',
'contrastDefaultColor': 'dark'
}); });


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


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


}); });
</hljs> </hljs>

0 comments on commit 126f4fd

Please sign in to comment.