基于 Material Design 动态颜色程序的 CSS 生成模块。采用实时更新 CSS 和 CSS 变量引用的方式让网页实现动态颜色变得更简单。

效果网页

开始

npm i material-color-css

将生成的 CSS 移动到根目录

windows

move "./node_modules/material-color-css/public" "."

Unix/Linux/macOS

mv "./node_modules/material-color-css/public" "."

将 CSS 写到 /public/css/style.css 并引入 index.html 或 将 /public/css/material-colors.css 直接引入你的 css 文件

使用

material-colors.css 中 CSS 变量名如下构成

--< light / dark>-< default / medium / high >-< color name>
// --模式-对比度-颜色名

如果网页没有切换深/浅模式 和 对比度 的需求，建议保持前两个参数不变，选择同一类下的颜色

具体颜色选择方法，请参考 Material Design 中 color roles一节

将变量引入 CSS 文件，即可使用

//your css
@import url("material-colors.css");

body {
    background-color: var(--token-name);
    color: var(--token-name);
  }

更新颜色

//your js
import { updateColors,updateColorFromImage } from "material-color-css"

updateColors(sourceColor, scheme)
// sourceColor 应该为 十六进制格式颜色 如 "#431104"
// scheme 为可选项， 默认为"tonalspot", 该参数是使用不同的颜色模板，作为参数时需要去除空格

updateColorFromImage(file, scheme)
//file 为图片文件

e.g.
const button = document.querySelector("button");
button.addEventListener("click", () => {
  console.log("clicked");
  updateColors("#ffffff");
});

document.querySelector("input[type='file']").addEventListener("change", (e) => {
  const file = e.target.files[0];
  updateColorFromImage(file);
});

颜色模板

共有九种不同的颜色模板，官方介绍如下，可通过网页查看效果

• Content

  A scheme that places the source color in Scheme.primaryContainer.

  • Primary Container is the source color, adjusted for color relativity.
  • It maintains constant appearance in light mode and dark mode.
  • This adds ~5 tone in light mode, and subtracts ~5 tone in dark mode.
  • Tertiary Container is the complement to the source color, using
  • TemperatureCache. It also maintains constant appearance.

• Expressive

  A Dynamic Color theme that is intentionally detached from the source color.

• Fidelity

  A scheme that places the source color in Scheme.primaryContainer.

  • Primary Container is the source color, adjusted for color relativity.
  • It maintains constant appearance in light mode and dark mode.
  • This adds ~5 tone in light mode, and subtracts ~5 tone in dark mode.
  • Tertiary Container is the complement to the source color, using
  • TemperatureCache. It also maintains constant appearance.

• Fruit salad

  A playful theme - the source color's hue does not appear in the theme.

• Monochrome

  A Dynamic Color theme that is grayscale.

• Neutral

  A Dynamic Color theme that is near grayscale.

• Rainbow

  A playful theme - the source color's hue does not appear in the theme.

• Tonal spot

  A Dynamic Color theme with low to medium colorfulness and a Tertiary

  • TonalPalette with a hue related to the source color.
  • The default Material You theme on Android 12 and 13.

• Vibrant

  A Dynamic Color theme that maxes out colorfulness at each position in the Primary Tonal Palette.

注意

Material Design 动态颜色程序 的 NPM 包已经长时间没有更新，在使用 Rainbow 和 FruitSalad 模板时存在未定义问题，参见issue

解决方案：

// 参考 issue 修改模块中的引用 或 采用 git clone方式使用本库。

已创建依赖项分支，本模块可直接使用