[英]Angular Material: How can I create a stlyes.scss after I did set up the project so I am able to change the theme/colours?
My problem: I have created a project with Webstorm.我的问题:我用 Webstorm 创建了一个项目。 Sadly, apparently, there is only an empty styles.css file.
可悲的是,显然,只有一个空的 styles.css 文件。 I have installed angular material with ng.
我已经用 ng 安装了 angular 材料。
I want to change the theme (colours and maybe typeface).我想更改主题(颜色和字体)。
All guides I have found online just open up the styles.scss file under src and change some parameters.我在网上找到的所有指南都只是打开 src 下的 styles.scss 文件并更改一些参数。 I mean, I would be able to do that as well, but sadly, I do not have a styles.scss file.
我的意思是,我也可以这样做,但遗憾的是,我没有 styles.scss 文件。
Any ideas how to progress from here?任何想法如何从这里取得进展? Is there an ng command that automatically generates the styles.scss file so that I can follow the tutorials I found on the inte.net?
是否有自动生成 styles.scss 文件的 ng 命令,以便我可以按照我在 inte.net 上找到的教程进行操作?
I gooogled for solutions, couldn't find any.我谷歌搜索解决方案,找不到任何。
You just need an example?你只需要一个例子?
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
@import "@angular/material/theming";
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();
/*
Theme Light or dark? Palettes (primary, accent, warn)
deeppurple-amber.css Dark deep-purple, amber, red
indigo-pink.css Light indigo, pink, red
pink-bluegray.css Dark pink, bluegray, red
purple-green.css Light purple, green, red
*/
$angular-warn: mat.define-palette(mat.$red-palette);
$angular-default-theme: mat.define-light-theme(
(
color: (
primary: mat.define-palette(mat.$purple-palette, 500, 700, 800),
accent: mat.define-palette(mat.$amber-palette, 200, 100, 400),
warn: $angular-warn,
),
)
);
// Include theme styles for core and each componentAttributes used in your app.
$angular-light-theme-purple: mat.define-light-theme(
(
color: (
primary: mat.define-palette(mat.$deep-purple-palette, 500, 100, 900),
accent: mat.define-palette(mat.$blue-gray-palette, 700, 100, 400),
warn: $angular-warn,
),
)
);
$angular-dark-theme-purple: mat.define-dark-theme(
(
color: (
primary: mat.define-palette(mat.$purple-palette, 500, 100, 900),
accent: mat.define-palette(mat.$amber-palette, 400, 100, 900),
warn: $angular-warn,
),
)
);
$angular-light-theme-teal: mat.define-light-theme(
(
color: (
primary: mat.define-palette(mat.$teal-palette, 500, 100, 900),
accent: mat.define-palette(mat.$blue-gray-palette, 700, 100, 400),
warn: $angular-warn,
),
)
);
$angular-dark-theme-teal: mat.define-dark-theme(
(
color: (
primary: mat.define-palette(mat.$teal-palette, 500, 100, 900),
accent: mat.define-palette(mat.$amber-palette, 500, 100, 900),
warn: $angular-warn,
),
)
);
@include mat.all-component-themes($angular-default-theme);
.lightModePurple {
@include mat.all-component-colors($angular-light-theme-purple);
}
.darkModePurple {
@include mat.all-component-colors($angular-dark-theme-purple);
}
.lightModeTeal {
@include mat.all-component-colors($angular-light-theme-teal);
}
.darkModeTeal {
@include mat.all-component-colors($angular-dark-theme-teal);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.