现在,我似乎只允许在提供程序中定义3种色调,而不允许创建一个名为hue-4
的新色调,该色调可以用作class="md-primary md-hue-4"
。我认为只允许定义色调1-3和默认值,这是正确的吗?
$mdThemingProvider.definePalette('hc', {'50':'#000000','100':'#ff0000','200':'#ffc285','300':'#ff9e3d','400':'#ff8f1f','500':'#ff8000','600':'#e07100','700':'#c26100','800':'#a35200','900':'#854300','A100':'#ffffff','A200':'#ffdebd','A400':'#ff8f1f','A700':'#c26100'});
$mdThemingProvider.definePalette('other', {'50':'#aff8f2','100':'#ff0000','200':'#34eede','300':'#11cbba','400':'#0eaea0','500':'#0c9286','600':'#0a766c','700':'#075952','800':'#053d38','900':'#03211e','A100':'#aff8f2','A200':'#68f3e6','A400':'#0eaea0','A700':'#075952'});
$mdThemingProvider.theme('hc-thing')
.primaryPalette('hc',{
'default': '100', // by default use shade 400 from the pink palette for primary
// intentions
'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
'hue-3': '50'
})
.accentPalette('other');
$mdThemingProvider.setDefaultTheme('hc-thing');
简短的回答:不。
基于angular mateiral官方文件(v1.0):
为颜色意图指定自定义色调
您可以从调色板中指定将由默认情况下的意向组,适用于md-hue-1、md-hue-2、md-hue-3类。
默认情况下,阴影500、300、800和A100用于主要和警告意图,而A200、A100、A400和A700用于重音。
因此,基本上,angular material只会将class应用于元素,直到md-hue-3
,如果您尝试使用md-hue-4
或更高的数字,它将被忽略,因为框架中没有定义相关的css。
请注意,如果您尝试将hue-4
添加到调色板,它将抛出错误:
// Don't do this, it will break
$mdThemingProvider.theme('default')
.primaryPalette('pink', {
'default': '400', // by default use shade 400 from the pink palette for primary intentions
'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
'hue-3': 'A100', // use shade A100 for the <code>md-hue-3</code> class
'hue-4': 'A400', // I know you really want this but it won't work
})
最好的方法是添加一个自定义css类并覆盖其中的颜色。
请记住,材料设计指南