变量定义在“node_modules/@angular/material/”下的“_theming.scss”中。要定义自定义变量,我们需要修改以下函数。
// Creates a container object for a light theme to be given to individual component theme mixins.
@function mat-light-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
@return (
success:$success,
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: false,
foreground: $mat-light-theme-foreground,
background: $mat-light-theme-background,
);
}
// Creates a container object for a dark theme to be given to individual component theme mixins.
@function mat-dark-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
@return (
success:$success,
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: true,
foreground: $mat-dark-theme-foreground,
background: $mat-dark-theme-background,
);
}
在同一个文件中,我们还可以像对按钮进行应用一样对新引入的变量应用到组件中。
// Applies a focus style to an md-button element for each of the supported palettes.
@mixin _mat-button-focus-color($theme) {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
&.mat-success .mat-button-focus-overlay {
background-color: mat-color($success, 0.12);
}
&.mat-primary .mat-button-focus-overlay {
background-color: mat-color($primary, 0.12);
}
&.mat-accent .mat-button-focus-overlay {
background-color: mat-color($accent, 0.12);
}
&.mat-warn .mat-button-focus-overlay {
background-color: mat-color($warn, 0.12);
}
&[disabled] .mat-button-focus-overlay {
background-color: transparent;
}
}
@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
&.mat-success .mat-ripple-element {
background-color: mat-color($success, $hue, $opacity);
}
&.mat-primary .mat-ripple-element {
background-color: mat-color($primary, $hue, $opacity);
}
&.mat-accent .mat-ripple-element {
background-color: mat-color($accent, $hue, $opacity);
}
&.mat-warn .mat-ripple-element {
background-color: mat-color($warn, $hue, $opacity);
}
}
// Applies a property to an md-button element for each of the supported palettes.
@mixin _mat-button-theme-color($theme, $property, $color: 'default') {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
&.mat-success {
#{$property}: mat-color($success, $color);
}
&.mat-primary {
#{$property}: mat-color($primary, $color);
}
&.mat-accent {
#{$property}: mat-color($accent, $color);
}
&.mat-warn {
#{$property}: mat-color($warn, $color);
}
&.mat-success ,&.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {
&[disabled] {
$palette: if($property == 'color', $foreground, $background);
#{$property}: mat-color($palette, disabled-button);
}
}
}
@mixin mat-button-theme($theme) {
$success: map-get($theme, success);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.mat-button, .mat-icon-button {
background: transparent;
@include _mat-button-focus-color($theme);
@include _mat-button-theme-color($theme, 'color');
}
新的自定义变量可以在“theme.scss”文件中添加。
@import '~@angular/material/_theming';
@include mat-core();
$primary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-blue);
$success: mat-palette($mat-blue);
$theme: mat-light-theme($success,$primary, $accent,$warn);
@include angular-material-theme($theme);
.dark-theme {
$dark-success: mat-palette($mat-light-blue);
$dark-primary: mat-palette($mat-light-blue);
$dark-accent: mat-palette($mat-green);
$dark-theme: mat-dark-theme($dark-success, $dark-primary, $dark-accent);
@include angular-material-theme($dark-theme);
}
现在我们可以在html中使用新变量:
<button md-button color="success">Primary</button>
以下是修改后的_theming.scss链接:
https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates
注意:在升级angular-material包时,我们需要注意_theming.scss文件。