Skip to main content

Background & Highlight

Add visual emphasis to your logs with background colors and highlighting effects.

Background Colors​

log.bg(text, color)​

Apply a background color to text:

import { log } from 'logluxe';

// Named colors
log.bg('Error message', 'red');
log.bg('Success message', 'green');
log.bg('Warning message', 'yellow');
log.bg('Info message', 'blue');
Background Colors
Error message
Success message
Warning message
Info message
🎮 Try Background Colors

Available Background Colors​

log.bg('Black background', 'black');
log.bg('Red background', 'red');
log.bg('Green background', 'green');
log.bg('Yellow background', 'yellow');
log.bg('Blue background', 'blue');
log.bg('Magenta background', 'magenta');
log.bg('Cyan background', 'cyan');
log.bg('White background', 'white');
All Background Colors
BlackRedGreenYellow
BlueMagentaCyanWhite

HEX Background Colors​

log.bg('Custom orange', '#ff6600');
log.bg('Custom purple', '#9b59b6');
log.bg('Custom teal', '#1abc9c');
Output
Custom orangeCustom purpleCustom teal

Highlight Effect​

log.highlight(text, color?)​

Highlight text with contrasting colors (auto text color):

// Default yellow highlight
log.highlight('Important text');

// Custom highlight colors
log.highlight('Error', 'red');
log.highlight('Success', 'green');
log.highlight('Info', 'cyan');
Highlight Effect
Important text
Error
Success
Info
🎮 Try Highlighting

Practical Examples​

Status Badges​

function statusBadge(text, status) {
  const colors = {
    success: { bg: 'green', text: 'white' },
    error: { bg: 'red', text: 'white' },
    warning: { bg: 'yellow', text: 'black' },
    info: { bg: 'blue', text: 'white' }
  };
  
  const { bg, text: textColor } = colors[status];
  
  log.paint(` ${text} `)
    .color(textColor)
    .bg(bg)
    .bold()
    .print();
}

statusBadge('PASS', 'success');
statusBadge('FAIL', 'error');
statusBadge('WARN', 'warning');
statusBadge('NOTE', 'info');
Status Badges
PASS FAIL WARN NOTE
🎮 Try Badges

Log Level Labels​

function logWithLabel(level, message) {
  const labels = {
    debug: () => log.paint(' DEBUG ').white().bgGray().toString(),
    info: () => log.paint(' INFO ').white().bgBlue().toString(),
    warn: () => log.paint(' WARN ').black().bgYellow().toString(),
    error: () => log.paint(' ERROR ').white().bgRed().toString(),
  };
  
  console.log(`${labels[level]()} ${message}`);
}

logWithLabel('debug', 'Initializing application');
logWithLabel('info', 'Server started on port 3000');
logWithLabel('warn', 'Memory usage at 80%');
logWithLabel('error', 'Connection failed');
Log Level Labels
DEBUG Initializing application
INFO Server started on port 3000
WARN Memory usage at 80%
ERROR Connection failed
🎮 Try Log Labels

Diff Highlighting​

function showDiff(line, type) {
  switch (type) {
    case 'add':
      log.paint(`+ ${line}`).white().bgGreen().print();
      break;
    case 'remove':
      log.paint(`- ${line}`).white().bgRed().print();
      break;
    case 'context':
      log.paint(`  ${line}`).gray().print();
      break;
  }
}

showDiff('const x = 1;', 'context');
showDiff('const y = 2;', 'remove');
showDiff('const y = 3;', 'add');
showDiff('const z = 4;', 'context');
Diff Output
const x = 1;
- const y = 2;
+ const y = 3;
const z = 4;
🎮 Try Diff

Search Result Highlighting​

function highlightSearchResult(text, query) {
  // Highlights 'world' in the text
  log.tagged('Hello [yellow]world[/yellow]! This is a test.');
}

highlightSearchResult('Hello world! This is a test world.', 'world');
Search Highlighting
Hello world! This is a test world.
🎮 Try Search Highlight

Environment Indicators​

function showEnvironment(env) {
  const configs = {
    development: { bg: '#3498db', label: 'DEV' },
    staging: { bg: '#f39c12', label: 'STAGING' },
    production: { bg: '#e74c3c', label: 'PROD' }
  };
  
  const config = configs[env];
  log.bg(` ${config.label} `, config.bg);
}

showEnvironment('development');
showEnvironment('staging');
showEnvironment('production');
Environment Badges
DEV STAGING PROD

Next: Banner Utilities →