angular - 如何在 node_modules 主题文件之外使用自定义材质颜色?
问题描述
我添加了一个自定义材质主题,其中包含我在 node_modules/angular/material/_theming.scss 中定义的新主/强调/警告颜色。我可以在其他地方声明我的新颜色,以便我可以在 Github 上为我的同事推送主题吗?
主要问题是在颜色变量成为 node_modules 文件的一部分之前,循环 CI 测试不会通过。
这是我的 theme.scss 文件
@import '~@angular/material/theming';
$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);
$blockframes-theme: mat-light-theme(
$blockframes-theme-primary,
$blockframes-theme-accent,
$blockframes-theme-warn
);
theme.scss 像这样导入我的全局 style.scss
@import "theme.scss";
@include mat-core();
@include angular-material-theme($blockframes-theme);
@import '~@angular/material/theming';
...
我的自定义颜色在 _theming.scss 中以这种方式声明
$mat-bf-purple: (
50: #ece0fd,
100: #d0b3fa,
200: #b080f6,
300: #904df2,
400: #7926f0,
500: #6100ed,
600: #5900eb,
700: #4f00e8,
800: #4500e5,
900: #3300e0,
A100: #ffffff,
A200: #dbd4ff,
A400: #b1a1ff,
A700: #9b88ff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
$mat-bf-crimson: (
50: #fde8eb,
100: #fbc5ce,
200: #f99eae,
300: #f6778d,
400: #f45974,
500: #f23c5c,
600: #f03654,
700: #ee2e4a,
800: #ec2741,
900: #e81a30,
A100: #ffffff,
A200: #ffe8ea,
A400: #ffb5bc,
A700: #ff9ca4,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
提前感谢您的帮助和建议。
解决方案
好吧,我对自己的问题有一个非常简单的解决方案,只需在 theme.scss 文件的开头声明新颜色,它就可以完成这项工作。
@import '~@angular/material/theming';
$mat-bf-purple: (
50: #ece0fd,
100: #d0b3fa,
200: #b080f6,
300: #904df2,
400: #7926f0,
500: #6100ed,
600: #5900eb,
700: #4f00e8,
800: #4500e5,
900: #3300e0,
A100: #ffffff,
A200: #dbd4ff,
A400: #b1a1ff,
A700: #9b88ff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
$mat-bf-crimson: (
50: #fde8eb,
100: #fbc5ce,
200: #f99eae,
300: #f6778d,
400: #f45974,
500: #f23c5c,
600: #f03654,
700: #ee2e4a,
800: #ec2741,
900: #e81a30,
A100: #ffffff,
A200: #ffe8ea,
A400: #ffb5bc,
A700: #ff9ca4,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);
$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);
$blockframes-theme: mat-light-theme(
$blockframes-theme-primary,
$blockframes-theme-accent,
$blockframes-theme-warn
);
推荐阅读
- arrays - 使用 mongodb 获得条件总和
- python - decorator on slot (PyQt)
- git - 在 android studio 中签出 Gitlab 的私有项目时身份验证失败
- c++ - 是否允许用不同的类型替换 `this`?
- email - php中邮件配置错误
- sql - 根据两列的组合选择count Distinct
- javascript - 如何在 Node.js 中找到我的浏览器的操作系统、架构类型等详细信息?
- ios - 应用因应用内购买而被拒绝
- linux-kernel - .config 和 kconfig 之间的区别
- node.js - 反应中的标签不显示适当的内容