转载

生成 Material 风格颜色样式

theme-color

生成 Material 风格颜色样式

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 red var tc = new ThemeColor('blue', 'red')  // random var tc = new ThemeColor()  // random accent color var 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"   } }