Material-color-css NPM

基于 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.