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

-o --output

output css file.

-d --demo

output demo html file.

License

WTFPL