Home

📖 Preamble

Crayon provides color API which is fully compatible* with chalk API.

_{* - using @crayon.js/chalk-aliases if it's not please submit an issue}

Installation

npm install crayon.js #yarn add crayon.js

Usage

Basic

Syntax: <style|function(<argument>...)>[.<style|function(<argument>...)>...](value*...)

_{* - value needs to be able to be converted to string}

import crayon from 'crayon.js'

console.log(crayon.red('This is red text'))
console.log(crayon.bgBlue.red('This is red text on blue background'))

CSS Keywords

Crayon supports using css keywords via @crayon.js/keywords extension package.
Install package and then import it instead of crayon.js.
In contrast to chalk you can call them directly and crayon provides full autocompletion for them.

npm install @crayon.js/keywords #yarn add @crayon.js/keywords

import crayon from '@crayon.js/keywords'
console.log(crayon.bgKhaki.orange('This text has khaki background and orange text'))

ES6 Template Literals

Crayon also has support for ES6 Tagged Template Literals.

Syntax for defining color: {<style|function(<argument>...)>[.<style|function(<argument>...)>...] <value...>}

// Examples
console.log(crayon`{red.bgRgb(125,0,125) Hello there! }`
// nesting works too
console.log(crayon`{hex('#FF00FF') {bold xo}{italic xo}}`

Methods

bg equivalent example: rgb -> bgRgb

Method	Syntax	Has bg equivalent	Example
rgb	(0-255, 0-255, 0-255)	Yes	crayon.rgb(255,100,50)("text")
hex	(#[0-F]{6})	Yes	crayon.hex("#0AFF0B")("text")
hsl	(0-360, 0-100, 0-100)	Yes	crayon.hsl(123,100,70)("text")
ansi3	(0-7)	Yes	crayon.ansi3(4)("text")
ansi4	(0-15)	Yes	crayon.ansi4(13)("text")
ansi8	(0-255)	Yes	crayon.ansi8(158)("text")
keyword	(style | bgStyle)	Yes	crayon.keyword("olive")("text")
strip	(string)	No	crayon.strip(crayon.red("text"))
instance	(preserve, cache)	No	crayon.instance(true, '')
clone	(clear, addCache)	No	crayon.clone(true, '')
clearCache	()	No	crayon.red.clearCache()

Styles

Word style in this Wiki refers to any of:

• Attributes (Modifiers)
• Basic Colors (4bit)
• CSS Keywords

Attributes

reset	bold	dim	italic*	underline*
blink	fastBlink	invert	hidden	strikethrough*

_{* - not widely supported}

Colors

You can prefix color with bg to make it background color and with light to make it light.
examples: lightBlue, bgBlue, bgLightBlue

black	red	green	yellow
blue	magenta	cyan	white

Config

You can access and modify it via crayon.config.
Config is global, this means if you modify it in whatever instance it'll affect all of them.

interface CrayonConfig {
  colorSupport: {
    trueColor: boolean // 24bit colors (16.7m)
    highColor: boolean // 8bit colors (256)
    fourBitColor: boolean // 4bit colors (16)
    threeBitColor: boolean // 3bit colors (8)
  }
  optimizeStyles: { // Whether to automatically optimize styles
    chain: boolean
    literal: boolean
  }
  errors: { // Crayon configuration for error handling
    throw: boolean // Whether to throw error on spotted problem
    log: boolean // Whether to console.log message on spotted problem
  }
}

To automatically detect terminal color support you can use @crayon.js/color-support extension package.
Install it and then use it to detect colors.

npm install @crayon.js/color-support #yarn add @crayon.js/color-support

import crayon from 'crayon.js' // it'll also work with @crayon.js/keywords
import { getColorSupport } from '@crayon.js/color-support'

crayon.config.colorSupport = getColorSupport()