我想在整个应用程序中使用我公司的品牌颜色.
我发现了这个问题:AngularJS 2 - 材质设计 - 设置调色板,我可以构建一个所谓的自定义主题,但它基本上只是使用预制调色板的不同部分.我不想使用Material2的预定义颜色.我想要我独特的特殊品牌颜色.是否有更好的方式(更好？)来创建我自己的主题,而不仅仅是黑客攻击_palette.scss？
我是否需要为我的品牌调色板制作mixin？如果是的话 - 任何有关如何正确操作的指南？不同色调的含义是什么(标有数字如:50,100,200,A100,A200 ......)？
有关这方面的任何信息将不胜感激!
在我的index.js文件中,我theme用我公司的颜色手动覆盖了Vuetify 对象:
Vue.use(Vuetify, {
theme: {
primary: '#377ef9',
secondary: '#1b3e70',
accent: '#ff643d',
error: '#ff643d'
...
}
现在,我可以使用我的模板中的这些颜色,如下所示:
<my-text-field name="input text"
label="text"
value="text text text text..."
type="text"
color="primary">
</my-text-field>
我在我的模板样式中使用上面定义primary的theme对象中的任何其他变量:
<script>
import { VTextField } from 'vuetify'
export default {
extends: VTextField
}
</script>
<style scoped lang="stylus">
label
color: <seconday color> <-- this is what I'm after
color: #1b3e70 <-- this works, but not quite good enough for me
</style>
我可以很容易地在样式部分中编写我的颜色的十六进制值,但我不想重复自己,而是宁愿使用我的theme对象,这样我也可以更容易地在各处轻松更改颜色,并避免拼写错误这会导致颜色定义出错.
我正在使用角度材料2构建angular2应用程序.我试图将我的应用程序的背景设置为"正确的方法",但我无法弄清楚如何.
我找到了一个可以在我的<body>元素上使用的类:mat-app-background我可以添加,它给了我一个默认颜色(取决于我是使用浅色还是暗色主题).
我希望定义这种背景颜色以使用我的品牌颜色,但我无法弄清楚如何做到这一点.
在_theming.scss它中定义如下:
// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme) {
@include mat-ripple-theme($theme);
@include mat-option-theme($theme);
@include mat-pseudo-checkbox-theme($theme);
// Wrapper element that provides the theme background when the
// user's content isn't inside of a `md-sidenav-container`.
.mat-app-background {
$background: map-get($theme, background);
background-color: mat-color($background, background);
}
...
}
所以我认为尝试将背景颜色添加到我的自定义主题是有意义的,不知何故,但我无法理解如何这样做.
在Material2 主题文档中,它只说:
"在Angular Material中,主题是通过组合多个调色板创建的.特别是,主题包括:
如何将我的背景添加到主题中,或以其他任何方式执行此操作？