Unarray

Posted on Apr 25, 2023

Add colors to your terminal!

#npm #node #typescript #javascript

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

pnpm install tintify

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!`);

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!`);

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}));

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

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

Format

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

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

Top comments (3)

Bluzzi • Apr 25 '23

Amazing work, nice to use!

chirag pipaliya • Apr 26 '23

what is the difference between chalk and this package?

Unarray • Apr 26 '23 • 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:

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 ...

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}`);

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}`);

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.

DEV Community