How do I change colors on a Vue Material theme

僤鯓⒐⒋嵵緔 提交于 2019-12-23 16:10:18

问题


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...

  1. Removed the import
  2. 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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!