DEV Community

Cover image for Add colors to your terminal!
Unarray
Unarray

Posted on

Add colors to your terminal!

Tintify is an NPM package that brings you all you need to add colors and effects to your terminal!

This package isn't a simple list of ANSI escape sequences.
It brings you utilities functions that permit you to use custom RGB colors or the HEXADECIMAL notations.
In future update, we will bring you others functions like new formatters. Current formatters permit you to transform your message into an rainbow text, a linear gradient between two colors, a matrix style text or a format function where you can pass flags to replace with a color (ie: flag §3 or §b will be transformed to a color or effect according to the config)


Installation

npm install tintify
Enter fullscreen mode Exit fullscreen mode

OR

pnpm install tintify
Enter fullscreen mode Exit fullscreen mode

Updates

Want to see new content? Open an issue!


Overview

Basic usage

Usage of constants

import { forground, brightBackground } from "tintify";

console.log(`${forground.blue}Hello ${forground.red}${brightBackground.blue}World!`);
Enter fullscreen mode Exit fullscreen mode

basic usage

Usage of functions

import { forgroundRGBColor, backgroundRGBColor, hexToRgb } from "tintify";

const helloFgColor = forgroundRGBColor({red: 63, green: 112, blue: 84});
const worldFgColor = forgroundRGBColor(hexToRgb("#9d19c2"));
const worldBgColor = backgroundRGBColor({red: 63, green: 112, blue: 84});

console.log(`${helloFgColor}Hello ${worldFgColor}${worldBgColor}World!`);
Enter fullscreen mode Exit fullscreen mode

RGB/Hex values

Formatters usage

Linear gradient effect

import { hexToRgb, linearGradient } from "tintify";

console.log(linearGradient("Tintify tints your untinted terminal", hexToRgb("#40db21"), {red: 255, green: 0, blue: 0}));
Enter fullscreen mode Exit fullscreen mode

linear gradient

Matrix effect

import { hexToRgb, matrix } from "tintify";

console.log(matrix("Tintify tints your untinted terminal", hexToRgb("#00FF00")));
console.log(matrix("Tintify tints your untinted terminal", hexToRgb("#00FF00"), 200));
Enter fullscreen mode Exit fullscreen mode

matrix

Rainbow effect

import { hexToRgb, rainbow } from "tintify";

console.log(rainbow("Tintify   tints   your   untinted   terminal"));
console.log(rainbow("Tintify   tints   your   untinted   terminal", hexToRgb("#00FF00")));
console.log(rainbow("Tintify   tints   your   untinted   terminal", hexToRgb("#00FF00"), 100));
console.log(rainbow("Tintify   tints   your   untinted   terminal", hexToRgb("#00FF00"), 100, false));
Enter fullscreen mode Exit fullscreen mode

rainbow

Format

import { defaultFormatConfig, forground, format } from "tintify";

console.log(format("§2Hello §b§4World!"));
console.log(format("§2Hello §b§4World!", {
  ...defaultFormatConfig,
  "§2": forground.blue
}));
Enter fullscreen mode Exit fullscreen mode

format

Links

Top comments (3)

Collapse
 
bluzzi profile image
Bluzzi

Amazing work, nice to use!

Collapse
 
pipaliyachirag profile image
chirag pipaliya

what is the difference between chalk and this package?

Collapse
 
unarray profile image
Unarray • Edited

Chalk 5.0.0 is ESM, while this one supports ESM as well as CJS. So most people can use it without problems.

To continue, if you want create a message like this:
Image description

You will have to write with Chalk:

import chalk from "chalk";

const log = console.log;

log(`${chalk.blue("Hel")}${chalk.underline(`${chalk.blue("lo ")}${chalk.bgBlueBright(chalk.red("Wor"))}`)}${chalk.bgBlueBright(chalk.red("ld!"))}`);
// OR
log(chalk.blue("Hel" + chalk.underline("lo " + chalk.bgBlueBright.red("Wor")) + chalk.bgBlueBright.red("ld!")));
// OR
log(`${chalk.blue("Hel")}${chalk.underline.blue("lo ")}${chalk.underline.bgBlueBright.red("Wor")}${chalk.bgBlueBright.red("ld!")}`);
// OR ...
Enter fullscreen mode Exit fullscreen mode

The reading can become very quickly laborious just because:

  • Chalk uses methods
  • There are several ways to write the same formatting
  • Formatting is not very clear...
  • We have duplicates in some places

If we compare to Tintify which does not use functions but constants:

import { brightBackground, effect, effectReset, forground } from "tintify";

console.log(`${forground.blue}Hel${effect.underline}lo ${forground.red}${brightBackground.blue}Wor${effectReset.underline}ld!${effectReset.all}`);
Enter fullscreen mode Exit fullscreen mode

Of course, you can use aliases in the imports to shorten the naming if you wish:

import { brightBackground as bgB, effect as e, effectReset as eR, forground as f } from "tintify";

console.log(`${f.blue}Hel${e.underline}lo ${f.red}${bgB.blue}Wor${eR.underline}ld!${eR.all}`);
Enter fullscreen mode Exit fullscreen mode

So now we have:

  • One way to write formatting
  • Much more readable
  • No duplication due to a non-functional approach
  • Much more controllable (put my text in bold at this place: add effect.bold in my string. If I want to remove it: effectReset.bold)

In addition, it also brings you formatting functions that allow you to create cool effects like linear gradients, rainbow text, or even simpler formatting where you pass a string like "§aHello §bWorld!" which will return your Hello World! in green with the World! in bold depending on the flags you choose! (return equivalent to ${forground.green}Hello ${effect.bold}World!)

For the moment these functions are waiting for feedback for future improvements. For example currently the effects you put in the parameters of a formatting function will be removed. In future updates I plan to put the possibility to pass effects in this type of functions.
So if you have any other suggestion/idea for new features or improvements, don't hesitate to propose !

Otherwise Tintify also brings you utility functions like conversion of hexadecimal values to RGB, or validators of RGB/hex values.