how to change color theme in materializecss

Question

I have created nodejs project. Here is package.json

{
  "name": "materializecssdemo",
  "version": "1.0.0",
  "description": "Use of material design components",
  "main": "index.js",
  "scripts": {
    "prestart": "node-sass ./scss/theme.scss ./css/materialize-theme.css",
    "start": "lite-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sunil Kumar",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.3.0"
  },
  "dependencies": {
    "materialize-css": "^0.100.2",
    "node-sass": "^4.7.2"
  }
}

I just want to change the colour of my app from its default colour to blue. So I have created theme.scss file and using node-sass module trying to generate CSS file. Here is my theme.scss

$primary-color: color("blue", "lighten-2") !default;
@import "../node_modules/materialize-css/sass/materialize";

but this is showing

{
  "status": 1,
  "file": "D:/SK/Study/MaterializeCSSDemo/node_modules/materialize-css/sass/components/_variables.scss",
  "line": 39,
  "column": 23,
  "message": "argument `$color` of `lighten($color, $amount)` must be a color\n\nBacktrace:\n\tnode_modules/materialize-css/sass/components/_variables.scss:39, in function `lighten`\n\tnode_modules/materialize-css/sass/components/_variables.scss:39",
  "formatted": "Error: argument `$color` of `lighten($color, $amount)` must be a color\n\n       Backtrace:\n       \tnode_modules/materialize-css/sass/components/_variables.scss:39, in function `lighten`\n       \tnode_modules/materialize-css/sass/components/_variables.scss:39\n        on line 39 of node_modules/materialize-css/sass/components/_variables.scss\n>> $primary-color-light: lighten($primary-color, 15%) !default;\n   ----------------------^\n"
}

is there any simple and clean way to make modifications to the theme? On the documentation page, it is saying by changing the _variables.scss file directely.

Answer 1

Try this

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

Args passed to function should be a color and number. Not a string.

And there is no color function in scss. You can create color using other function like hsl or rgb. Check full list of scss functions here