Как изменить цвета в теме материала Vue

Question

Я использую тему Vue Material default-dark, добавив в файл index.js следующее:

// 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";

Но когда я строю цветане меняйте, как я ожидал.Я вижу, что элемент помечен как основной, но он все еще показывает синий цвет.

Чего мне не хватает?

Answer 1

Я понял ...

1. Удален импорт

2. Обновлен sass для следующего ...

   @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";
   

Answer 2

Как выглядит ваш основной компонент?

Используете ли вы где-нибудь в компоненте vue-материала 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">