在项目中使用Material UI的颜色库 (Color Palette)

在个人项目中本来打算自定义一套属于自己的调色方案,一开始的方法是Copy Flat UI Colors上的十六进制色值,然后写入Sass的变量中去。

后来在开发过程中发现,由于该方案的颜色跳动太大,有时候并不需要这么强的对比,于是慢慢自己在Pinterest上找ColorPalette,找着找着发现好像直接引入一个颜色分类比较全的颜色库比较省时省力。于是找到了sass-material-colors

sass-material-colors添加到你的项目中

npm安装


$ npm install --save-dev sass-material-colors

在Sass中引用


@import'sass-material-colors'

在stylesheet中使用

在Sass文件中直接使用material-color($color-name, $color-variant)调用。

其中,
$color-name 为颜色在Material UI Color Palette中对应的颜色名称。 (e.g.'pink','amber','blue-grey','deep-orange', etc.)
$color-variant 为颜色在Material UI Color Palette中对应的色值。 (e.g.'300','200','a100','a400', etc.)

e.g.


.content{

    color: material-color('Teal', '50');

    background: material-color('Cyan', '500');

}

当然,这个颜色库还支持Gem/ Bower等包管理器,还可以使用Class直接调用,有兴趣的同学可以到项目的GitHub上看一看。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容