生成 Material 风格颜色样式_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

WBOY

Release： 2016-06-21 08:48:01

Original

1627 people have browsed it

theme-color

Material theme color generator.

DEMO

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

Install

$ npm i theme-color -S

Copy after login

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";  } */

Copy after login

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')

Copy after login

API

get()

theme color object. like

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

Copy after login

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'})

Copy after login

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;}

Copy after login

CLI

-c --config

config file. like

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

Copy after login

-o --output

output css file.

-d --demo

output demo html file.

License

WTFPL