feat: add gradient and theme features with corresponding tests and documentation
This commit is contained in:
parent
aa06bb5ac3
commit
c017dd5b04
8 changed files with 505 additions and 13 deletions
99
readme.md
Normal file → Executable file
99
readme.md
Normal file → Executable 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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue