-
-
Save rschmukler/c29e3ca2d454b2d8830e to your computer and use it in GitHub Desktop.
Theming Syntaxes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
app.config(function($mdThemingProvider) { | |
// Allow defining of custom palettes (see below for usage) | |
$mdThemingProvider | |
.definePalette('customPaletteName', { | |
'50': '#FFFFFF', | |
'100': '#FFFFFF', | |
'200': '#FFFFFF', | |
'300': '#FFFFFF', | |
'400': '#FFFFFF', | |
'500': '#FFFFFF', | |
'600': '#FFFFFF', | |
'700': '#FFFFFF', | |
'800': '#FFFFFF', | |
'900': '#FFFFFF', | |
'A100': '#FFFFFF', | |
'A200': '#FFFFFF', | |
'A400': '#FFFFFF', | |
'A700': '#FFFFFF' | |
}) | |
// Provide an extendPalette method to make it easy to change a few colors in an existing palette | |
.definePalette('extendedPaletteName', $mdThemingProvider.extendPalette('blue', { | |
'A100': '#777777' | |
}); | |
// Blue, pink, red, etc. built in (based on material spec) | |
var defaultTheme = $mdThemingProvider.theme('default'); | |
defaultTheme | |
.primaryColor('blue', { | |
default: '500', | |
'hue-1': '100', | |
'hue-2': '300', | |
'hue-3': 'A100' | |
}) | |
.accentColor('customPaletteName') | |
.warnColor('red'); | |
var secondTheme = $mdThemingProvider.theme('second', defaultTheme); // second argument to inherit from a theme | |
// could also do $mdThemingProvider.theme('second', 'default') where 'default' is theme name. | |
secondTheme.primaryColor('green'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- md-theme directive is used much less as you should be using default, one theme per app --> | |
<div> | |
<md-button class="md-hue-1"> | |
Click Me | |
</md-button> | |
<md-button class="md-fab md-accent md-hue-3"> | |
<md-icon src="you-wish.svg"></md-icon> | |
</md-button> | |
<md-button class="md-warn"> | |
Click Me | |
</md-button> | |
</div> | |
<!-- still allow specifying a second theme, but should really only be used | |
for advanced applications. Most applications will not need this --> | |
<div md-theme="second"> | |
<md-button class="md-primary hue-1">This will be green</md-button> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment