v1 Documentation  |   Discord

---

Easy, flexible styling in the browser console.

...for the rest of us (and only 500 bytes).

Example

// keep it simple
chroma.red.log('This will be red.')

// or play a little
chroma.log(
  chroma.green,                // set the color to green
  'This is green',
  '{ foo: 'bar' }',
  chroma.blue.underline.bold,  // now switch to blue
  'Now this is blue.',
)

Quick Start

Option 1: Import

import { chroma } from 'itty-chroma'

Option 2: Just copy this snippet:

let t=(e="",o)=>new Proxy((...t)=>{if(!t.length&&!e)return;let r,i=[e],n="%c",l=e.match(/pad|dec/);for(let e of t)e?.zq&&(e=e()),e?.[0]?.startsWith?.("%c")?(r=e[1].match(/pad|dec/),l&&(n=n.slice(0,-1)),l&&!r&&(n+="%c ",i.push("")),n+=e[0],i.push(...e.slice(1)),l=r):(n+="object"==typeof e?"%o ":"%s ",i.push(e));return o?console[o](n.trim(),...i):[n,...i]},{get(r,i){let n=r=>i=>t(e+(r?r+":"+i:i)+";",o);return"color"==i?n(i):"bold"==i?n("font-weight")(i):"italic"==i?n("font-style")(i):"underline"==i?n("text-decoration")(i):"strike"==i?n("text-decoration")("line-through"):"font"==i?n("font-family"):"size"==i?n("font-size"):"bg"==i?n("background"):"radius"==i?n("border-radius"):"padding"==i||"border"==i?n(i):"style"==i?n(""):"log"==i||"warn"==i||"error"==i?t(e,i):n("color")(i)}}),chroma=t();

Note: This will lose TypeScript support, but is great for adding to your browser console (via script extensions, etc).

How it Works

Chroma is just a passthrough for console, handling the style assembly, shorthand style props, and chaining. This means you can pass in any number of args, of any type. However, only non-objects (strings, numbers, etc) will be colored.

If used with log/warn/error, it will assemble and print the statement, just like console.log/warn/error. If you don't include log/warn/error, it will output a style token instead.

With that in mind:

1. Use chroma instead of console to print something

chroma.log('text') // console.log('text')
chroma.warn('text') // console.warn('text')
chroma.error('text') // console.error('text')

2. Add styles by chaining style properties

// call a segment directly, using .log
chroma.bold.red.log('This will be red.')

3. Or compose using chroma segments

chroma.log(
  chroma.bold.green,
  'This will be green.'
)

These can be saved for re-use:

const blue = chroma.bold.blue

chroma.log(
  blue,
  'This will be blue.'
)

They can also be saved with the .log as a custom logger:

const ittyLogger = chroma.bold.color("#f0c").log

ittyLogger('This will be itty-colored.')

4. Any valid CSS color name works (100% support)

chroma.salmon.log('This is salmon.')
chroma.cornflowerblue.log('This is cornflowerblue.')
chroma.cornFlowerBlue.log('Case does not matter here...')

5. All valid CSS works within properties that expect a value

chroma
  .color('rgba(255,0,100,0.4)')
  .log('This works just fine')

6. ...or use your own custom CSS with .style(css: string)

chroma
  .size('2em')
  .padding('0.5em')
  .style('text-transform:uppercase; text-shadow:0 0 0.5em magenta;')
  .log('So does this')

7. A style will continue until replaced, or cleared using chroma.clear

chroma.log(
  chroma.red('this will be red'),
  '...but so will this',
  chroma.clear,
  'back to unformatted text'
)

8. Example: Creating custom log functions

// we define a curried function to accept some args now, some later
const createLogger = (type = 'log', label, badge = 'grey', text = 'grey') =>
  (...args) =>
    chroma[type](
      chroma.bg(badge).white.bold.padding('2px 5px 1px').radius('0.2rem')(label),
      chroma.color(text).italic,
      ...args,
    )

// our loggers are partial executions
const info = createLogger('log', 'INFO', 'green')
const warning = createLogger('warn', 'WARNING', 'orange', 'brown')

// and we finally call them to log messages
info('This is just a helpful bit of info!')
warning('But this is a more serious warning text...')

Supported Properties

PROPERTY	DESCRIPTION	EXAMPLE(s)
.log	once executed, will output to console.log	chroma.log('hello')
.warn	once executed, will output to console.warn	chroma.warn('warning text')
.error	once executed, will output to console.error	chroma.error('error text')
.bold	bold text	chroma.bold('this is bold'), chroma.bold.red('this is bold and red')
.italic	italicized text	chroma.italic('this is italic')
.underline	underlined text	chroma.underline('text')
.strike	text with a line through it	chroma.strike('this text was removed')
.{colorName}	sets text color, supports any valid CSS color name	chroma.magenta, chroma.lightGreen
.color(value)	sets font color, supports any valid CSS color	chroma.color('white'), chroma.color('rgba(255,0,0,0.2)')
.font(value)	sets font, supports any valid CSS font-family	chroma.font('Georgia')
.size(value)	sets font size	chroma.size('0.8rem')
.bg(value)	sets background, supports any valid CSS background	chroma.bg('salmon')
.radius(value)	sets border-radius (for badges)	chroma.radius('4px')
.border(value)	sets border style	chroma.border('double 5px red')
.padding(value)	sets padding	chroma.padding('2px 5px')
.style(value)	sets custom CSS, allowing any valid sequence	chroma.style('text-transform:uppercase;text-shadow:0 0 0.5rem rgba(255,0,100,0.5)')
.none1	clears styling for subsequent arguments	chroma.red('red text', chroma.clear, 'plain text')