Hi, Passing you custom variable to 'color' property doesn't work because our custom css classes are applied to the element. I wouldn't encourage you to change our css classes to suit your needs - it could cause trouble while updating to the new version of mdbvue. If you are not satisfied by any color from our color palette, I suggest adding your custom css styles to the element between tags. Kind regards, Magdalena

On the css side of it I just add to the _colors.scss file (after making a backup) following Sass syntax and the established MDB syntax. I don't use Vue but would assume Css the same across platforms. In that file is all the colors and I just add mine right at line 1 and bump the mdb stuff down but don't delete any of the colors in there. You delete a color and you will be chasing errors downstream in the Sass files for days...so my _colors.scss file (for jquery version is in the core folder) looks like this:

// Colors

// My colors added on mm/dd/yyyy

$cmmg-tahoe-blue-dark: #hexcode !default;

$cmmg-tahoe-blue-base: #hexcode !default; //base is used to generate text colors .... I hardly ever have from dark-5 to light-5. pay close attention to the use of ; - semi colon and , - comma and when not used.

$mdb-color-lighten-5: #d0d6e2 !default;

$mdb-color-lighten-3: #929fba !default;

$mdb-color-base: #45526e !default;

$mdb-color-darken-1: #3b465e !default;

then around line 340 starts the map-merge. Again I just follow the syntax setup

"cmmg-color" (

"tahoe-blue-dark": $tahoe-blue-dark, //the name input up by line 1

etc.

"mdb-color": ( "lighten-5": $mdb-color-lighten-5, "lighten-4": $mdb-color-lighten-4, "lighten-3": $mdb-color-lighten-3, "lighten-2": $mdb-color-lighten-2, "lighten-1": $mdb-color-lighten-1, "base": $mdb-color-base,

When gulp runs or any Sass preprocessor you prefer you can then refer to your colors in the MDB files like they do. ie nav nav-dark cmmg-tahoe-blue or whatever name you gave them. The syntax the folks here use is good as it is much easier to remember. I would advise to group colors as much as possible and not give each color a special name. Use a base color in the middle and lighter darker out. Farther into the file is also where the gradients are generated so if careful you can add you own in.

As an fyi I have tried with every version released to use the _custom_variables.scss file for my colors and typography to no avail. It works ok to add them in with $name: #hexcode in custom_styles.scss and use the variable name minus the $ in components. For just a few I go that route but have more consistent, dependable results bootstrapping on to their file (funny pun there right?). Sass partials load order very important.