Doesn’t your terminal get overfilled with logged messages? They just get so many that you can easily miss what you are looking for. Don’t you wish you could somehow color them? Well, luckily for you, there are NodeJS libraries that help you do that.
Chalk.js
Chalk is an actively maintained library for terminal styling. Its expressive API and high performance are some of the reasons why it’s chosen by many developers.
Installation
npm install chalk
Usage
First, we need to import the library in the file in which we’ll use it:
const chalk = require('chalk');
Or in case you use ES6 modules:
import chalk from 'chalk';
Chalk’s API is simple to use because you can just chain or nest the styles you want. It doesn’t extend the String.prototype.
Example of chaining styles:
console.log(chalk.blue.italic('This text is blue and italic.'));
Example of nesting styles:
console.log( chalk.bold( chalk.blue("This is bold blue") + " " + chalk.red("This is bold red") ) );
Example of using template literal:
console.log(` White: ${chalk.whiteBright("This is white.")} Green: ${chalk.greenBright("This is green.")} Red: ${chalk.redBright("This is red.")} `);
You also have the option to change the background color of your logs:
console.log(chalk.blue.bgWhite('Blue text on white background.'));
You can take advantage of RGB colors if your terminal supports them:
console.log(chalk.keyword('lime')('Lime colored text.')); console.log(chalk.rgb(233, 36, 116)('Pink colored text.')); console.log(chalk.hex('#5cc6ff')('Sky blue colored text.'));
Define your own themes of styles you plan to reuse:
const success = chalk.bold.keyword('lime'); const error = chalk.bold.red; console.log(success('Success message!')); console.log(error('Error message!'));
Here is a list of all the colors included in chalk.js:
Text colors | Bright text colors |
|
|
Background colors |
Bright background colors |
|
|
And a list of the text modifiers:
reset | Resets the current styles chain |
bold | Bolds the text |
dim | Dims the text |
italic | Makes text italic |
underline | Underlines the text |
strikethrough | Puts a horizontal line through the text |
inverse | Inverses background and text color |
hidden | Makes the text invisible |
Colors.js – an alternative
The syntax and the opportunities colors.js provides are very similar to those of chalk. Therefore if you think chalk is easy you won’t have to worry about learning colors.
Installation
npm install colors
Usage
Colors comes with two types of usages:
- You can call the styles directly on the string, but you would be extending the String.prototype that way:
const colors = require('colors'); console.log('Blue text.'.blue); console.log('Bold red text.'.bold.red);
- Or the already familiar way from chalk – passing the text as an argument without touching the String.prototype:
const colors = require('colors/safe'); console.log(colors.blue('Blue text.')); console.log(colors.bold.red('Bold red text.'));
Here is a list of all the colors in the library:
Text colors | Bright text colors |
|
|
Background colors |
Bright background colors |
|
|
And a list of all text modifiers – same as in chalk:
|
Unfortunately, colors.js does not support RGB colors so you will have to work only with those provided.
However, it has some fun extra styles:
const colors = require('colors/safe'); console.log(colors.rainbow('Rainbow colored text.')); console.log(colors.zebra('Zebra colored text.')); console.log(colors.america('US flag colored text.')); console.log(colors.trap('Text with weird characters.')); console.log(colors.random('Randomly styled text.'));
You can create a custom theme for frequently used styles:
const colors = require('colors/safe'); colors.setTheme({ error: ['bold', 'red'], warning: ['underline', 'brightYellow'], success: 'brightGreen' }); console.log(colors.error('Error text')); console.log(colors.warning('Some warning')); console.log(colors.success('Success message'));
Chalk or Colors?
Since we got familiar with both libraries you might be wondering which one you should pick, so let’s quickly go over their similarities and differences.
Both libraries have a similar API where you can chain or nest the styles without extending the String.prototype. Colors provides an alternative way of calling the styles directly on the string (but extending the String.prototype).
The text and background colors provided are basically the same, but chalk has an advantage here – it allows us to use RGB colors (as long as our terminal supports them).
Something I think colors does better is the API for creating custom themes. It’s really handy if you’ve got a lot of styles you’d like to reuse.
Another thing to remention is the extra styles colors comes with. Although you will probably not need them, they are fun and it’s nice knowing they are there if you find them a usage.
Even though they are very similar I believe chalk has the edge on colors.
Note: While chalk is frequently maintained, colors has not been updated since late 2019.
Conclusion
Coloring your terminal comes very useful when you’re dealing with a large number of logged messages or if you’re developing a console-based application (e.g. app which shows you cpu core usage and temperatures). Chalk.js and colors.js are libraries that will easily help you do that. They come with an expressive API which you will have no trouble learning.
You might also want to check out: