Vue-material: [MdButton][MdAppToolbar] Primary background color not working

[davidhoeck]

In my app.scss I put the following code to customize the default theme.

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary: #d3af72, // The primary color of your application
  accent: #333, // The accent or secondary color
));

@import "~vue-material/dist/theme/all"; // Apply the theme

What is expected?

Primary components should have the primary background.

What is actually happening?

The components have a transparent background. Because the background color is set to

 background-color: var(--md-theme-default-primary, #d3af72); 

[Samuell1]

Toolbar is default white, you need to set md-primary class.

[davidhoeck]

@Samuell1 I know that. It already worked. And it is not white .. it is transparent.

[Samuell1]

@davidhoeck oh yeah, then md-primary works for you?

[Nevenall]

I have the same issue.
My app.vue contains

<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

@import "~vue-material/dist/theme/engine";

@include md-register-theme("default", (
   primary: #200a33, 
   accent: rgb(245, 214, 11), 
   theme: dark
));

@import "~vue-material/dist/theme/all";

The colors didn't work until I added scoped to the <style> element. However, scoped is interfering with my other styling.

[Samuell1]

@Nevenall best is to have theme things in separate .scss file

[wonderful-panda]

I faced similar problem, and it seems to be a problem depends on node-sass version.

var sass = require("node-sass");
var source = `
@import "node_modules/vue-material/dist/theme/engine";
@include md-register-theme("default", (
  primary: #d3af72,
  accent: #333,
));
@import "node_modules/vue-material/dist/theme/all"; 
`;
var css = sass.renderSync({ data: source }).css.toString();
var start = css.indexOf(":root");
var end = css.indexOf("}", start) + 1;;
console.log(css.slice(start, end));

Above code outputs this result with node-sass 4.7.2

:root {
  --md-theme-default-primary: #d3af72;
  --md-theme-default-accent: #333;
  --md-theme-default-theme: "light"; }

And outputs this with node-sass 4.8.3

:root {
  --md-theme-default-primary: $value
    ;
  --md-theme-default-accent: $value
    ;
  --md-theme-default-theme: $value
    ; }
...

[VdustR]

@wonderful-panda #1619

[humblecoder]

I'm having a similar issue. Backgrounds are transparent I've tried:

node-sass 4.7.2
node-sass 4.8.3
node-sass 4.9.3

Nothing matters. My import looks like:

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

UPDATE:
Never mind. Apparently I must also include import 'vue-material/dist/theme/default.css'

[rayfoss]

node-sass 4.11.0 ... I gave up in over rode the vars with good values somewhere high up. 4.10 won't even compile it's node gyp pain with node 12.

.md-app {   
  // node-sass 4.8+ broke md-material
  --md-theme-default-primary: #006064;
  --md-theme-default-accent: #ffb300;
  --md-theme-default-theme: "light";
}