Skip to content

feat: add gradient and theme features #667

Closed
harshaktg wants to merge 1 commit intochalk:mainfrom
harshaktg:feat/theme
Closed

feat: add gradient and theme features #667
harshaktg wants to merge 1 commit intochalk:mainfrom
harshaktg:feat/theme

Conversation

@harshaktg
Copy link
Copy Markdown

@harshaktg harshaktg commented Feb 1, 2026

Add Theme and Gradient Support to Chalk

Overview

This PR introduces two powerful new features to Chalk: custom themes and color gradients, enabling more flexible and sophisticated terminal styling capabilities.

Features

🎨 Themes

Create themed Chalk instances with custom style definitions for consistent coloring throughout your application.

const themedChalk = chalk.theme({
  error: chalk.bold.red,
  success: chalk.green,
  warning: chalk.hex('#FFA500'),
  info: chalk.blue,
  title: chalk.cyan.bold.underline,
});

console.log(themedChalk.error('Error!'));
console.log(themedChalk.success('Success!'));

Benefits:

  • Define application-wide style conventions in one place
  • Ensure consistent coloring across your CLI
  • Reusable theme definitions

🌈 Gradients

Apply smooth color gradients to text with support for multiple color formats.

// Hex colors
chalk.gradient('#ff0000', '#0000ff')('Hello World')

// RGB arrays
chalk.gradient([255, 0, 0], [0, 255, 0], [0, 0, 255])('Rainbow')

// Multiple colors
chalk.gradient('#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff')('Spectrum')

Features:

  • Supports hex string and RGB array color formats
  • Works with all Chalk modifiers (bold, underline, etc.)
  • Compatible with themed instances
  • Respects color support level (16, 256, or 16M colors)

Changes

Documentation

  • readme.md: Added comprehensive sections for themes and gradients with usage examples

Type Definitions

  • source/index.d.ts: Added TypeScript definitions for theme() and gradient() methods

Implementation

  • source/index.js:

    • Implemented theme() method to create themed instances
    • Implemented gradient() method with proper style chain handling
    • Enhanced applyStyle() to support gradient rendering
  • source/utilities.js:

    • Added interpolateRgb() for color interpolation
    • Added createGradientStyler() to create gradient styler objects
    • Added applyGradient() to render gradients with proper ANSI code generation

Compatibility

  • ✅ Works with all existing Chalk features
  • ✅ Respects color support detection
  • ✅ No breaking changes to existing API
  • ✅ Supports chaining with other styles

Testing

Recommended test coverage:

  • Theme creation and property access
  • Gradient rendering with 2+ colors
  • Gradient + style combinations
  • Color level adaptation (16, 256, 16M)
  • Edge cases (empty strings, single character, etc.)

Type of change: ✨ New feature


Fixes #666

@Qix-
Copy link
Copy Markdown
Contributor

Qix- commented Feb 3, 2026

#666 (comment)

@Qix- Qix- closed this Feb 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Proposal: Semantic Theming / Profile Support

2 participants