我希望它与主题垫的颜色相匹配，主题垫在这里(并且在导航栏设置中选择的选项会更改)@import '~@angular/material/theming';@include mat-core();$candy-app-primary: mat-palette($mat-red);$candy-app-accent: mat-palette($mat-deep-orange, A200, A100, A400);$candy-app-warn: mat-palette($mat-red);$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);// Include theme styles for core and each component used in your app.// Alternatively, you can import and @include the theme mixins for each component// that you are using..default { @include angular-material-theme($candy-app-theme);}.light { $light-primary: mat-palette($mat-blue, 200,300, 900); $light-accent: mat-palette($mat-light-blue, 600, 100, 800); $light-warn: mat-palette($mat-red, 600); $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); @include angular-material-theme($light-theme);}@include angular-material-theme($candy-app-theme);解决方案我发现了一个很棒的解决方法！！！我很高兴向大家展示这个，因为它困扰了我很久以来如何实现它.因此，这里去了；首先，将所有css文件更改为scss； 对于现有项目 在控制台ng set defaults.styleExt=scss 中运行(ng set似乎已被贬值，但是由于用户@wlyles 获取/设置已弃用，转而使用config命令)将所有现有的.css文件重命名为.scss将.angular-cli.json中styles的文件扩展名从.css手动更改为.scss如果您未使用WebStorm Refactor之类的工具进行重命名，请手动将所有styleUrls从.css更改为.scss 用于将来的项目 只需为您的新项目使用ng new your-project-name --style=scss 对于所有要使用scss的新项目，请使用ng set defaults.styleExt=scss --global现在，您需要在应用程序根目录中有一个theme.scss文件，如下所示:现在，您要在style.scss文件中添加以下内容(如您所见，我引用了background-color，但是您可以根据需要将其更改为任何元素，以使您的网站主题化): 编辑:您无需将此自定义@mixin元素放入styles.scss中，您可以将其放入任何*name*.component.scss中，然后以与导入相同的方式进行导入和添加用给出的例子做！@import '~@angular/material/theming';// Define a custom mixin that takes in the current theme@mixin theme-color-grabber($theme) { // Parse the theme and create variables for each color in the pallete $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); // Create theme specfic styles .primaryColorBG { background-color: mat-color($primary); } .accentColorBG { background-color: mat-color($accent); } .warnColorBG { background-color: mat-color($warn); }}现在转到用于将材料2项目作为主题的theme.scss文件，如果需要有关主题的帮助，请查看以下内容:材料2 Github-主题指南现在打开您的theme.scss并导入您的style.scss，因为我的theme.scss位于/src/app/theme.scss文件夹的根目录下，因此我必须首先退出它以引用我的/src/styles.scss全局样式文件； @import '../styles';然后，我们实际上必须包括我们在 ALL 主题中创建的新自定义@mixin(如果您像我一样有多个主题，那么它会根据当前选定的主题改变颜色). 将其包含在实际的角材料主题包含的上方，如下所示:@include theme-color-grabber($theme);@include angular-material-theme($theme);如果您有像我这样的主题，请将其添加到相同的位置:.light { $light-primary: mat-palette($mat-blue, 200,300, 900); $light-accent: mat-palette($mat-light-blue, 600, 100, 800); $light-warn: mat-palette($mat-red, 600); $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); @include theme-color-grabber($light-theme); @include angular-material-theme($light-theme);}您可以看到我在包含内容的上方添加了theme-color-grabber，它在实际主题之上还是之下都没有关系，因为它获得主题颜色是重点.我的整个theme.scss看起来像这样:@import '~@angular/material/theming';//We import our custom scss component here@import '../styles';@include mat-core();$theme-primary: mat-palette($mat-red);$theme-accent: mat-palette($mat-deep-orange, A200, A100, A400);$theme-warn: mat-palette($mat-red);$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);//@include theme-color-grabber($theme);@include angular-material-theme($theme);.light { $light-primary: mat-palette($mat-blue, 200,300, 900); $light-accent: mat-palette($mat-light-blue, 600, 100, 800); $light-warn: mat-palette($mat-red, 600); $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); @include theme-color-grabber($light-theme); @include angular-material-theme($light-theme);}最后，我们现在可以为背景ANYWHERE调用主题颜色了，例如，我给mat-grid-tile指定了'primary'颜色(它不使用color =''参数，就像其他元素一样，例如mat-toolbar)，只需将其类设置为适当的类名即可，如下所示: 编辑:在每个组件的scss文件中，您都需要import '<path-to>/theme.scss'才能将您的主题应用于该组件.不要在styles.scss中导入theme.scss，因为这会创建一个导入循环！<mat-grid-list cols="4" rows="4" rowHeight="100px"> <mat-grid-tile colspan="4" rowspan="5" class="primaryColorBG"> <div fxLayout="column" fxLayoutAlign="center center"> <h1 class="title-font">Callum</h1> <h1 class="title-font">Tech</h1> </div> <p> Ambitious and ready to take on the world of Information Technology,<br> my love for programming and all things I.T. has not wavered since I first got access<br> to my fathers computer at age 9. </p> </mat-grid-tile></mat-grid-list>最后，我们的结果将如下所示: 红色主题处于活动状态 蓝色主题处于活动状态 I am building an application but I want to keep a consistent color scheme that can be changed with settings so im using Material (2) with angular(2+), but I am not sure how to get the color scheme on elements that dont directly offer the ability to color them with color="primary" so im left with trying to figure out how to obtain the color/color scheme that my Material 2 theme uses.And i want it to change when the theme changes, for instance my navbar will adapt to the theme change because its set to <mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">But a grid element from Material 2 doesnt take the same argument so Im left to attempt to style it in a close enough color or simply not match it at all (and it wont adjust to theme changes) as seen here:I want it to match the color with the theme mat, which is here (and gets changed on options selected in navbar settings)@import '~@angular/material/theming';@include mat-core();$candy-app-primary: mat-palette($mat-red);$candy-app-accent: mat-palette($mat-deep-orange, A200, A100, A400);$candy-app-warn: mat-palette($mat-red);$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);// Include theme styles for core and each component used in your app.// Alternatively, you can import and @include the theme mixins for each component// that you are using..default { @include angular-material-theme($candy-app-theme);}.light { $light-primary: mat-palette($mat-blue, 200,300, 900); $light-accent: mat-palette($mat-light-blue, 600, 100, 800); $light-warn: mat-palette($mat-red, 600); $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); @include angular-material-theme($light-theme);}@include angular-material-theme($candy-app-theme); 解决方案 I found an awesome workaround!!!!I'm so excited to show this because its been bugging me how to implement this for ages.So here goes;First, change all of your css files to scss;For existing projects Run in console ng set defaults.styleExt=scss(ng set seems to have been depreciated, but you can check out this for a fix thanks to user @wlyles get/set have been deprecated in favor of the config command )Rename all existing .css files to .scssManually change the file extention of styles in .angular-cli.json from .css to .scssIf you didnt use a tool like WebStorm Refactor to rename then manually change all the styleUrls from .css to .scssFor future projectsJust for your new project simply use ng new your-project-name --style=scssFor all new projects to use scss use ng set defaults.styleExt=scss --globalNow you will need to have a theme.scss file in your app root like so:Now in your style.scss file you want to add the following (as you can see I referrence background-color but you can change this to any element to theme your site however you want):EDIT: You dont NEED to put this custom @mixin element in your styles.scss you can put it in any one of your *name*.component.scss and then simply import and include it the same way you do with the example given!@import '~@angular/material/theming';// Define a custom mixin that takes in the current theme@mixin theme-color-grabber($theme) { // Parse the theme and create variables for each color in the pallete $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); // Create theme specfic styles .primaryColorBG { background-color: mat-color($primary); } .accentColorBG { background-color: mat-color($accent); } .warnColorBG { background-color: mat-color($warn); }}Now go to your theme.scss file that you use to theme your Material 2 items, if you need help theming check this out: Material 2 Github - Theming guideNow open your theme.scss and import your style.scss, since my theme.scss is within the root of the /src/app/theme.scss folder I must first go out of it to reference my /src/styles.scss global styling file like so;@import '../styles';Then we must actually include our new custom @mixin we created in ALL our themes (if you have multiple like I do, so it changes color according to current selected theme). Include it above the actual angular-material-theme include, like so:@include theme-color-grabber($theme);@include angular-material-theme($theme);If you have any themes like me add it in the same position like so:.light { $light-primary: mat-palette($mat-blue, 200,300, 900); $light-accent: mat-palette($mat-light-blue, 600, 100, 800); $light-warn: mat-palette($mat-red, 600); $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); @include theme-color-grabber($light-theme); @include angular-material-theme($light-theme);}You can see I added my theme-color-grabber above the include, it doesnt really matter if its above or below the actual theme because its getting the themes colors which is the main point.My whole themes.scss looks like this:@import '~@angular/material/theming';//We import our custom scss component here@import '../styles';@include mat-core();$theme-primary: mat-palette($mat-red);$theme-accent: mat-palette($mat-deep-orange, A200, A100, A400);$theme-warn: mat-palette($mat-red);$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);//@include theme-color-grabber($theme);@include angular-material-theme($theme);.light { $light-primary: mat-palette($mat-blue, 200,300, 900); $light-accent: mat-palette($mat-light-blue, 600, 100, 800); $light-warn: mat-palette($mat-red, 600); $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn); @include theme-color-grabber($light-theme); @include angular-material-theme($light-theme);}And finally we can now call on our themes color for a background ANYWHERE!, for instance I give a mat-grid-tile the 'primary' color (it doesn't take the color='' argument, like other elements such as mat-toolbar) by simply setting its class to the appropriate class name like so:EDIT: In each of your components scss files, you will need to import '<path-to>/theme.scss' in order for your theme to apply to that component. Don't import theme.scss in styles.scss because that will create an import loop!<mat-grid-list cols="4" rows="4" rowHeight="100px"> <mat-grid-tile colspan="4" rowspan="5" class="primaryColorBG"> <div fxLayout="column" fxLayoutAlign="center center"> <h1 class="title-font">Callum</h1> <h1 class="title-font">Tech</h1> </div> <p> Ambitious and ready to take on the world of Information Technology,<br> my love for programming and all things I.T. has not wavered since I first got access<br> to my fathers computer at age 9. </p> </mat-grid-tile></mat-grid-list>Finally our result will look like this!:Red theme activeBlue theme active 这篇关于获取其他元素的Material 2主题配色方案/调色板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
