AngularCLI自定义主题

AngularCLI自定义主题&＃xff08;一&＃xff09;

1.自定义主题

1.创建自定义主题文件theme.scss
1.1.1 引入自定义主题支持和material公用的主题风格

// 引入material自定义主题支持
&＃64;import &＃39;~&＃64;angular/material/theming&＃39;;
// 引入material公用的主题风格
&＃64;include mat-core();


1…1.2 根据material公用的主题设定自己的主题颜色

// 自定义颜色
$my-app-primary: mat-palette($mat-blue);
$my-app-accent: mat-palette($mat-teal, A200, A100, A400);
$my-app-warn: mat-palette($mat-red);


附加&＃xff1a;
1.my-app-primary是一个变量
2.mat-palette充当的是一个调色器的角色&＃xff0c;mat-blue表示使用material主题风格中的blue这种颜色
3.material提供的颜色 网址&＃xff1a;https://www.materialui.co/colors

1.1.3使用自己定义的主题颜色封装成一个自定义主题

// 利用自定义颜色组装自定义主题
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);


附加&＃xff1a;
1.mat-light-theme和mat-dark-theme是相对的&＃xff0c;一个是亮系主题&＃xff0c;一个是暗系主题&＃xff0c;可以自由选择
2.mat-light-theme和mat-dark-theme的 $ my-app-primary、$ my-app-accent、$my-app-warm三个参数的位置可以随意替换&＃xff0c;但是数量不能超过三个&＃xff0c;依次对应primary、accent和warm三种状态&＃xff0c;不写或在组件参数写错时&＃xff0c;则取上一个样式。

1.1.4 设置主题颜色使其生效

// 设置自定义主题&＃xff0c;使其生效
&＃64;include angular-material-theme($my-app-theme);


2.把style.css文件改为style.scss文件&＃xff0c;并且引用其theme.scss文件

&＃64;import "./theme.scss";


上述代码&＃xff0c;引用的路径为相对路径&＃xff0c;需要将默认引入的materi内建主题注释掉

3.修改angular,json文件

"styles": ["src/styles.scss","src/theme.scss"],


应该修改angular-cli.json&＃xff0c;但是6.x以后就用angular.json替代了angular-cli.json&＃xff0c;所有不用纠结于此

2.自定义主题包含的5色调色板

1. A primary palette: colors most widely used across all screens and
   components.常规状态下的所有屏幕样式与组件样式
2. An accent palette: colors used for the floating action button and
   interactive elements.鼠标浮于上方或激活状态
3. A warn palette: colors used to convey error state.表示错误状态
4. A foreground palette: colors for text and icons.字体与按钮
5. A background palette: colors used for element backgrounds.元素背景

3.Input和AutoComplete控件自定义主题

Input组件的主题是根据自定义主题中进行变化的,修改$my-app-theme来修改input主题。

/*引入material自定义主题支持*/
&＃64;import &＃39;~&＃64;angular/material/theming&＃39;;
/*引入material公用的主题风格*/
&＃64;include mat-core();/* 自定义颜色*/
/*主调色板中&＃xff1a;在所有屏幕和组件中使用最广泛的颜色*/
$my-app-primary: mat-palette($mat-pink,800);
/*重音调色板&＃xff1a;用于浮动按钮和交互式原色的颜色*/
$my-app-accent: mat-palette($mat-teal,600);
/*警告调色板&＃xff1a;用于传达错误状态的颜色*/
$my-app-warn: mat-palette($mat-red,700);
$my-app-warn: mat-palette($mat-red,600);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
&＃64;include angular-material-theme($my-app-theme);


4.Checkbox控件自定义主题

$my-chekbox-primary : mat-palette($mat-yellow,600);
$my-chekbox-accent : mat-palette($mat-blue,600);
$my-chekbox-warm : mat-palette($mat-pink,600);
$my-app-theme: mat-light-theme($my-chekbox-primary, $my-chekbox-accent,$my-chekbox-warm);
&＃64;include mat-checkbox-theme($my-app-theme);


CheckBox控件默认用color属性来更改主题颜色&＃xff0c;默认情况下&＃xff0c;CheckBox使用主题的accent颜色&＃xff0c;可以将其更改为primary和warm

5.Datepicker控件自定义主题

与Input控件相同&＃xff0c;
&＃64;include angular-material-theme($my-app-theme);
来控制主题颜色

6.Radio控件自定义主题

$my-radio-primary : mat-palette($mat-yellow,600);
$my-radio-accent : mat-palette($mat-blue,600);
$my-radio-warm : mat-palette($mat-pink,600);
$my-radio-theme: mat-light-theme($my-radio-primary, $my-radio-accent,$my-radio-warm);
&＃64;include mat-radio-theme($my-radio-theme);


Radio控件默认用color属性来更改主题颜色&＃xff0c;默认情况下&＃xff0c;Radio使用主题的accent颜色&＃xff0c;可以将其更改为primary和warm

7.Select控件自定义主题

与Input控件相同&＃xff0c;
&＃64;include angular-material-theme($my-app-theme);
来控制主题颜色

8.Slider控件自定义主题

$my-slider-primary : mat-palette($mat-yellow,600);
$my-slider-accent : mat-palette($mat-blue,600);
$my-slider-warm : mat-palette($mat-pink,600);
$my-slider-theme: mat-light-theme($my-slider-primary, $my-slider-accent,$my-slider-warm);
&＃64;include mat-slider-theme($my-slider-theme);


Slider控件默认用color属性来更改主题颜色&＃xff0c;默认情况下&＃xff0c;Slider使用主题的accent颜色&＃xff0c;可以将其更改为primary和warm

9.SliderToggle控件自定义主题

Slider Toggle控件默认用color属性来更改主题颜色&＃xff0c;默认情况下&＃xff0c;Slider Toggle使用主题的accent颜色&＃xff0c;可以将其更改为primary和warm。

10. ToolBar控件自定义主题

$my-toolbar-primary: mat-palette($mat-yellow,800);
$my-toolbar-accent: mat-palette($mat-yellow,600);
$my-toolbar-warm: mat-palette($mat-blue,600);
$my-toolbar-theme: mat-light-theme($my-toolbar-primary,$my-toolbar-accent,$my-toolbar-warm);
&＃64;include mat-toolbar-theme($my-toolbar-theme);


mat-toolbar可以使用color属性更改颜色。默认情况下&＃xff0c;工具栏使用基于当前主题&＃xff08;浅色或深色&＃xff09;的中性背景色。这可以改变
‘primary’&＃xff0c;‘accent’或’warn’。

在ToolBar中如果想要把两边的元素放在两侧&＃xff0c;可以使用flex

Custom ToolbarSecond Lineverified_userThird Linefavoritedelete



.example-icon {padding: 0 14px;
}.example-spacer {flex: 1 1 auto;
}


11.为组件定制自定义主题

&＃64;include mat-button-theme($my-app-theme);


&＃64;include mat-checkbox-theme($my-app-theme);


&＃64;include mat-radio-theme($my-app-theme);


&＃64;include mat-slider-theme($my-app-theme);


&＃64;include mat-slide-toggle-theme($my-app-theme);


&＃64;include mat-toolbar-theme($my-app-theme);


&＃64;include mat-stepper-theme($my-app-theme);


&＃64;include mat-tabs-theme($my-app-theme);


&＃64;include mat-button-toggle-theme($my-app-theme);


&＃64;include mat-menu-theme($my-app-theme);


等等…

新手小白一枚&＃xff0c;如有错误请多多指教