问题
I am using the Vue Material default-dark theme by adding the following into my index.js file...
// 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/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?
回答1:
I got it...
- Removed the import
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";
回答2:
What is your main component looking like?
Do you use somewhere in a vue-material component 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">
来源:https://stackoverflow.com/questions/50767551/how-do-i-change-colors-on-a-vue-material-theme