html - 如何在不使用 Material UI 中的自定义 CSS 的情况下将默认主题颜色青色更改为蓝色

Question

我正在使用 materialize，我尽量不碰你的代码，这样我就可以在新版本到来时升级它，但我想更改原色，但我找不到简单的方法只是将整个事情切换为蓝色调色板。

听说过sass但是不知道怎么用

这是我的 CSS 和 JS 文件，如何重用它

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="sass/materialize.scss">
<script src="js/bin/materialize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 1

使用sass非常简单，在你的系统中安装sass cli

gem install sass

您要更改的基色在以下文件夹中

materialize-src/sass/components/_color.scss

• 做必要的改变

• 只需在终端中运行下面的代码

  sass materialize.scss materialize.css

在 ma​​terialize-src 的 scss 文件夹中运行时运行

materialize-src/sass/

替换现有元素中新创建的ma​​terialize.css文件。

您甚至可以使用 https://cssminifier.com/ 创建新文件的缩小版本并保存名为 materialize.min.css 的文件

有关 sass 的更多引用，请查看以下链接 SASS Simple DOC

更新 - 根据要求

通过替换下面的代码，根据您的要求给我颜色代码，我将按照上面解释的相同程序生成您的文件。

$teal: (
  "base":       #009688,
  "lighten-5":  #e0f2f1,
  "lighten-4":  #b2dfdb,
  "lighten-3":  #80cbc4,
  "lighten-2":  #4db6ac,
  "lighten-1":  #26a69a,
  "darken-1":   #00897b,
  "darken-2":   #00796b,
  "darken-3":   #00695c,
  "darken-4":   #004d40,
  "accent-1":    #a7ffeb,
  "accent-2":    #64ffda,
  "accent-3":    #1de9b6,
  "accent-4":    #00bfa5
);