title: How do I change colors on a Vue Material theme
body: <p>I am using the Vue Material default-dark theme by adding the following into my index.js file...</p>
  
  <pre><code>// 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');
  </code></pre>
  
  <p>This works great but now I want to change the colors on the theme. To do this I added the following to my template...</p>
  
  <pre><code>// viewport/Viewport.vue
  
  &lt;styles src="./Viewport.scss" lang="scss"&gt;&lt;/styles&gt; 
  </code></pre>
  
  <p>and in Viewport.scss (per the docs)...</p>
  
  <pre><code># 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";
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/ZzrPu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZzrPu.png" alt="enter image description here"></a></p>
  
  <p>What am I missing?</p>