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') |