[英]How do I change colors on a Vue Material theme
I am using the Vue Material default-dark theme by adding the following into my index.js file... 我通过在index.js文件中添加以下内容来使用Vue Material default-dark主题...
// index.js Where the vue instance is instantiated
import 'vue-material/dist/theme/default-dark.css';
...
import Vue from "vue";
...
Vue.use(VueRouter);
const routes = [
{
path: '/',
component: Viewport,
...
}
]
...
window.app.$mount('#jg-app');
This works great but now I want to change the colors on the theme. 这很好但现在我想改变主题的颜色。 To do this I added the following to my template...
为此,我在模板中添加了以下内容......
// viewport/Viewport.vue
<styles src="./Viewport.scss" lang="scss"></styles>
and in Viewport.scss (per the docs)... 并在Viewport.scss(根据文档)...
# viewport/Viewport.scss
@import "~vue-material/dist/theme/engine"; // Import the theme engine
@include md-register-theme("default-dark", (
primary: md-get-palette-color(green, A200), // The primary color of your application
accent: md-get-palette-color(yellow, A200) // The accent or secondary color
));
@import "~vue-material/dist/theme/all";
But when I build the colors do not change as I would expect. 但是当我构建颜色时,并没有像我期望的那样改变。 I see that the element is marked as primary but it still shows blue.
我看到该元素被标记为主要元素,但它仍然显示为蓝色。
What am I missing? 我错过了什么?
I got it... 我知道了...
Updated sass to the following... 更新了以下内容......
@import "~vue-material/dist/theme/engine"; @include md-register-theme("default", ( primary: md-get-palette-color(green, A200), // The primary color of your application accent: md-get-palette-color(red, A200), // The accent or secondary color theme: dark // This can be dark or light )); @import "~vue-material/dist/theme/all";
What is your main component looking like? 您的主要组件是什么样的?
Do you use somewhere in a vue-material component md-theme="default-dark"? 你在vue-material组件中使用某个地方md-theme =“default-dark”吗?
<template>
<div class="page-container">
<md-app md-theme="default-dark">
<md-app-toolbar class="md-primary">
<span class="md-title">My Title</span>
</md-app-toolbar>
....
</md-app>
</div>
</template>
or otherwise you just add it to a part like: 或者你只是将它添加到以下部分:
<md-content md-theme="default-dark">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.