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

Materialize comes with a color palette based on the material design base colors.

I recommend you to use these to set theme colors, to follow the Material Design color system.

To be able to do so, you have to import the file which defines these colors first, then set your theme color variables, then import the rest of materialize files. Not sure about our npm setup, but in Rails with materialize-sass it works like this:

@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';

Answer 2

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