PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

生成 Material 风格颜色样式_html/css_WEB-ITnose

原创
2016-06-21 08:48:01 1307浏览

theme-color

Material theme color generator.

DEMO

http://qingwei-li.github.io/theme-color/

Install

$ npm i theme-color -S

Quick Start

import ThemeColor from 'theme-color'const tc = new ThemeColor('blue', 'red')tc.get()/*{  "lightPrimary": "#BBDEFB",  "primary": "#2196F3",  "darkPrimary": "#1976D2",  "accent": "#FF5252"}*/tc.css({  prefix: 'color-'})/*  .color-light-primary: {    background-color: "#BBDEFB";  }  .color-primary: {    background-color: "#2196F3";  }  .color-dark-primary: {    background-color: "#1976D2";  }  .color-accent {    background-color: "#FF5252";  } */

Options

  • primaryColor: String
  • accentColor: String

Material color: ['red', 'pink', 'purple', 'deepPurple', 'indigo', 'blue', 'lightBlue', 'cyan', 'teal', 'green', 'lightGreen', 'lime', 'yellow', 'amber', 'orange', 'deepOrange', 'brown', 'grey', 'blueGrey']

// primary color blue, accent color redvar tc = new ThemeColor('blue', 'red')// randomvar tc = new ThemeColor()// random accent colorvar tc = new ThemeColor('blue')

API

get()

theme color object. like

{  "lightPrimary": "#BBDEFB",  "primary": "#2196F3",  "darkPrimary": "#1976D2",  "accent": "#FF5252"}

css(options: Object)

return css string.

const tc = new ThemeColor('blue', 'red')tc.css({  prefix: 'tc-',  suffix: '-color',  primary: 'main',  lightPrimary: 'light-main',  darkPrimary: 'dark-main',  accent: 'second'})

output

.tc-light-main-color: {background-color: #BBDEFB;}.tc-main-color: {background-color: #2196F3;}.tc-dark-main-color: {background-color: #1976D2;}.tc-second-color: {background-color: #FF5252;}

CLI

-c --config

config file. like

{  "color": ["blue", "red"],  "css": {    "prefix": "tc-",    "suffix": "-color",    "primary": "main",    "darkPrimary": "dark-main",    "lightPrimary": "light-main",    "accent": "second"  }}

-o --output

output css file.

-d --demo

output demo html file.

License

WTFPL

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。