Search code examples
asp.netmaterialize

How to change default colors in materializecss?

I just added materializecss to my ASP.NET MVC project, but I can't seem to change the default color scheme. Referring to here, I need to change the default color scheme from green to blue.

I added this to my '_project_variables.scss' file, but it doesn't work:

$primary-color: color("materialize-blue", "lighten-2") !default;

Is there another step that is not outlined on their website? What else do I need to do?

Solution

  • There a few ways to do this.

    1) Edit _variables.scss directly

    Change the color values on lines 37 & 41 for primary and secondary (currently teal and pink).

    2) Override with _custom-variables.scss

    In materialize.scss, add a link to your own custom scss file BEFORE _variables.scss:

    // Variables;
@import "../custom-components/custom-variables";
@import "components/variables";