获取其他元素的Material 2主题配色方案/调色板 [英] Get Material 2 theme color scheme/palette for other elements
问题描述
我正在构建应用程序,但我想保持一致的配色方案,可以通过设置进行更改,因此即时消息将Material(2)与angular(2+)结合使用,但是我不确定如何在元素上获得配色方案不能直接提供使用color="primary"
为其着色的功能,因此我不得不尝试弄清楚如何获得我的Material 2主题使用的颜色/配色方案.
而且我希望它在主题更改时更改,例如,我的导航栏将适应主题更改,因为它设置为
<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">
但是,材料2中的网格元素没有采用相同的参数,因此我留下了尝试以足够接近的颜色对其样式进行设置或根本不匹配(并且不会适应主题更改)的样式,如下所示:>
我希望它与主题垫的颜色相匹配,主题垫在这里(并且在导航栏设置中选择的选项会更改)
@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 材料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.scss
- Manually change the file extention of
styles
in.angular-cli.json
from .css to.scss
- If you didnt use a tool like WebStorm Refactor to rename then manually change all the
styleUrls
from.css
to.scss
For future projects
Just for your new project simply use
ng new your-project-name --style=scss
For all new projects to use scss use
ng set defaults.styleExt=scss --global
Now 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 guide
Now 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 active
Blue theme active
这篇关于获取其他元素的Material 2主题配色方案/调色板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!