マテリアル スタイル カラーの生成 style_html/css_WEB-ITnose

テーマカラー

マテリアル テーマ カラー ジェネレーター。

デモ

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

インストール

$ npm i theme-color -S

クイックスタート

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

オプション

• primaryColor: String
• accentColor: String

マテリアルの色: ['red'、'pink'、'purple'、'deepPurple'、'indigo'、'blue'、 'lightBlue'、'シアン'、'ティール'、'グリーン'、'ライトグリーン'、'ライム'、'イエロー'、'アンバー'、'オレンジ'、'ディープオレンジ'、'ブラウン'、'グレー'、'ブルーグレー']

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

API

get()

テーマカラーオブジェクト。 like

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

css(options: Object)

CSS 文字列を返します。

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

出力

.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

設定ファイル。 like

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

-o --output

CSS ファイルを出力します。

-d --demo

デモ HTML ファイルを出力します。

ライセンス

WTFPL