[](https://npmjs.com/package/itty-chroma)
[](https://deno.bundlejs.com/?q=itty-chroma)
[](https://coveralls.io/github/kwhitley/itty-chroma)
[](https://coveralls.io/github/kwhitley/itty-chroma)
[](https://discord.gg/53vyrZAu9u)
### [v1 Documentation](https://itty.dev/itty-chroma) | [Discord](https://discord.gg/53vyrZAu9u)
---
# Easy, flexible styling in the browser console.
...for the rest of us (and only 500 bytes).
### Example
```ts
// 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
```ts
import { chroma } from 'itty-chroma'
```
### Option 2: Just copy this snippet:
```ts
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
```ts
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
```ts
// call a segment directly, using .log
chroma.bold.red.log('This will be red.')
```
### 3. Or compose using chroma segments
```ts
chroma.log(
chroma.bold.green,
'This will be green.'
)
```
These can be saved for re-use:
```ts
const blue = chroma.bold.blue
chroma.log(
blue,
'This will be blue.'
)
```
They can also be saved with the `.log` as a custom logger:
```ts
const ittyLogger = chroma.bold.color("#f0c").log
ittyLogger('This will be itty-colored.')
```
### 4. Any valid CSS color name works (100% support)
```ts
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
```ts
chroma
.color('rgba(255,0,100,0.4)')
.log('This works just fine')
```
### 6. ...or use your own custom CSS with `.style(css: string)`
```ts
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`**
```ts
chroma.log(
chroma.red('this will be red'),
'...but so will this',
chroma.clear,
'back to unformatted text'
)
```
### 8. Example: Creating custom log functions
```ts
// 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)')` |
| **.none**1 | clears styling for subsequent arguments | `chroma.red('red text', chroma.clear, 'plain text')` |