[英]How do I change colors on a Vue Material theme
我通過在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');
這很好但現在我想改變主題的顏色。 為此,我在模板中添加了以下內容......
// viewport/Viewport.vue
<styles src="./Viewport.scss" lang="scss"></styles>
並在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";
但是當我構建顏色時,並沒有像我期望的那樣改變。 我看到該元素被標記為主要元素,但它仍然顯示為藍色。
我錯過了什么?
我知道了...
更新了以下內容......
@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";
您的主要組件是什么樣的?
你在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>
或者你只是將它添加到以下部分:
<md-content md-theme="default-dark">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.