生成Material風格顏色樣式_html/css

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 16:40:06

生成Material風格顏色樣式_html/css

生成Material風格顏色樣式_html/css_WEB-ITnose: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

推薦度：

點擊下載本文 文檔為doc格式

導讀生成Material風格顏色樣式_html/css_WEB-ITnose: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

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