如何在materializecss中更改颜色主题

Question

我已经创建了 nodejs 项目。这是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"
  }
}

我只想将我的应用程序的颜色从默认颜色更改为蓝色。所以我创建了theme.scss文件并使用node-sass模块尝试生成 CSS 文件。这是我的theme.scss

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

但这是显示

{
  "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"
}

有没有简单干净的方法来修改主题？在文档页面上，它是通过直接更改_variables.scss文件来表示的。

Answer 1

Materialise 带有一个基于 Material Design基色的调色板。

我建议你使用这些来设置主题颜色，遵循 Material Design颜色系统。

为此，您必须首先导入定义这些颜色的文件，然后设置主题颜色变量，然后导入其余的实体化文件。不确定我们的 npm 设置，但在带有 materialize-sass 的 Rails 中，它的工作方式如下：

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

Answer 2

尝试这个

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

传递给函数的参数应该是颜色和数字。不是字符串。

并且scss中没有颜色功能。您可以使用其他函数（如 hsl 或 rgb）创建颜色。在此处查看 scss 函数的完整列表