feat: add gradient and theme features with corresponding tests and documentation

This commit is contained in:
HarshaVardhan 2026-02-01 17:12:54 -05:00
parent aa06bb5ac3
commit c017dd5b04
8 changed files with 505 additions and 13 deletions

99
readme.md Normal file → Executable file
View file

@ -27,6 +27,8 @@
- No dependencies
- Ability to nest styles
- [256/Truecolor color support](#256-and-truecolor-color-support)
- [Themes](#themes) for consistent styling
- [Gradients](#gradients) for smooth color transitions
- Auto-detects color support
- Doesn't extend `String.prototype`
- Clean and focused
@ -87,18 +89,6 @@ log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));
```
Easily define your own themes:
```js
import chalk from 'chalk';
const error = chalk.bold.red;
const warning = chalk.hex('#FFA500'); // Orange color
console.log(error('Error!'));
console.log(warning('Warning!'));
```
Take advantage of console.log [string substitution](https://nodejs.org/docs/latest/api/console.html#console_console_log_data_args):
```js
@ -109,6 +99,40 @@ console.log(chalk.green('Hello %s'), name);
//=> 'Hello Sindre'
```
## Themes
Define a theme with multiple styles for consistent coloring:
```js
import chalk from 'chalk';
const themedChalk = chalk.theme({
error: chalk.bold.red,
success: chalk.green,
warning: chalk.hex('#FFA500'), // Orange
info: chalk.blue,
title: chalk.cyan.bold.underline,
});
console.log(themedChalk.error('Error!'));
console.log(themedChalk.success('Success!'));
console.log(themedChalk.warning('Warning!'));
console.log(themedChalk.info('Info'));
console.log(themedChalk.title('Title'));
```
Themes work with all Chalk features including gradients and chaining:
```js
const themedChalk = chalk.theme({
rainbow: chalk.gradient('#ff0000', '#00ff00', '#0000ff'),
important: chalk.red.bold.underline,
});
console.log(themedChalk.rainbow('Rainbow text'));
console.log(themedChalk.important.bgWhite('Important message'));
```
## API
### chalk.`<style>[.<style>...](string, [string...])`
@ -119,6 +143,26 @@ Chain [styles](#styles) and call the last one as a method with a string argument
Multiple arguments will be separated by space.
### chalk.theme(theme)
Create a themed Chalk instance with custom styles.
```js
chalk.theme({
error: chalk.red.bold,
success: chalk.green,
});
```
### chalk.gradient(...colors)
Apply a color gradient to text.
```js
chalk.gradient('#ff0000', '#0000ff')('Hello');
chalk.gradient([255, 0, 0], [0, 0, 255])('World');
```
### chalk.level
Specifies the level of color support.
@ -243,6 +287,37 @@ The following color models can be used:
- [`hex`](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) - Example: `chalk.hex('#FF8800').bold('Orange!')`
- [`ansi256`](https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit) - Example: `chalk.bgAnsi256(194)('Honeydew, more or less')`
## Gradients
Apply smooth color gradients to text:
```js
import chalk from 'chalk';
// Two-color gradient
console.log(chalk.gradient('#ff0000', '#0000ff')('Hello World'));
// RGB arrays
console.log(chalk.gradient([255, 0, 0], [0, 255, 0], [0, 0, 255])('Rainbow'));
// Multiple colors
console.log(chalk.gradient('#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff')('Spectrum'));
```
Gradients work with all Chalk features:
```js
// Combine with other styles
console.log(chalk.gradient('#ff0080', '#8000ff').bold('Bold gradient'));
// Use in themes
const themedChalk = chalk.theme({
rainbow: chalk.gradient('#ff0000', '#00ff00', '#0000ff'),
});
console.log(themedChalk.rainbow('Themed rainbow'));
```
## Browser support
Since Chrome 69, ANSI escape codes are natively supported in the developer console.