Themes & Presets

Logluxe includes beautiful built-in themes and allows you to create custom presets for consistent styling.

Built-in Themes

Using Themes

import { createLogger } from 'logluxe';

// Create logger with a theme
const log = createLogger({
  theme: 'ocean'
});

log.success('Styled with ocean theme');
log.error('Error in ocean colors');

Ocean Theme

✔ Styled with ocean theme

✖ Error in ocean colors

⚠ Warning in ocean colors

ℹ Info in ocean colors

Available Themes

Default Theme

✔✔ Green success

✖✖ Red error

⚠⚠ Yellow warning

ℹℹ Cyan info

●● Gray debug

Ocean Theme

✔ Teal success

✖ Coral error

⚠ Sand warning

ℹ Ocean blue info

Forest Theme

✔ Bright green success

✖ Rust error

⚠ Amber warning

ℹ Forest green info

Sunset Theme

✔ Golden success

✖ Crimson error

⚠ Orange warning

ℹ Pink info

Neon Theme

✔ Neon green success

✖ Neon pink error

⚠ Neon yellow warning

ℹ Neon cyan info

Dracula Theme

✔ Dracula green

✖ Dracula pink

⚠ Dracula orange

ℹ Dracula purple

Nord Theme

✔ Nord green

✖ Nord red

⚠ Nord yellow

ℹ Nord blue

🎮 Try Different Themes

Custom Themes

Creating a Custom Theme

import { createLogger, defineTheme } from 'logluxe';

const myTheme = defineTheme({
  name: 'my-theme',
  colors: {
    success: '#00ff88',
    error: '#ff4757',
    warning: '#ffa502',
    info: '#70a1ff',
    debug: '#a4b0be'
  },
  styles: {
    success: { bold: true },
    error: { bold: true, underline: true },
    warning: { bold: true },
    info: {},
    debug: { dim: true }
  },
  icons: {
    success: '✓',
    error: '✗',
    warning: '⚠',
    info: 'ℹ',
    debug: '🔍'
  }
});

const log = createLogger({ theme: myTheme });

Custom Theme

✓ Custom success

✗ Custom error

⚠ Custom warning

ℹ Custom info

🔍 Custom debug

Theme Properties

interface Theme {
  name: string;
  
  // Color for each log level
  colors: {
    success: string;  // HEX, RGB, or named color
    error: string;
    warning: string;
    info: string;
    debug: string;
  };
  
  // Text styles for each level
  styles: {
    success: StyleOptions;
    error: StyleOptions;
    warning: StyleOptions;
    info: StyleOptions;
    debug: StyleOptions;
  };
  
  // Icons/prefixes for each level
  icons: {
    success: string;
    error: string;
    warning: string;
    info: string;
    debug: string;
  };
}

interface StyleOptions {
  bold?: boolean;
  dim?: boolean;
  italic?: boolean;
  underline?: boolean;
  inverse?: boolean;
  strikethrough?: boolean;
}

Presets

What are Presets?

Presets are pre-configured styling shortcuts:

import { createLogger, presets } from 'logluxe';

const log = createLogger();

// Use presets for quick styling
log.preset('success', 'Operation completed');
log.preset('error', 'Operation failed');
log.preset('badge', 'NEW');
log.preset('highlight', 'Important text');

Built-in Presets

PASS Success badge

FAIL Error badge

WARN Warning badge

INFO Info badge

Important Highlighted text

const x = 1 Code style

https://example.com Link style

Secondary text Muted style

Custom Presets

import { createLogger, definePreset } from 'logluxe';

// Define custom presets
const customPresets = {
  brand: definePreset({
    color: '#6366f1',
    bold: true
  }),
  
  version: definePreset({
    color: 'gray',
    dim: true,
    prefix: 'v'
  }),
  
  status: definePreset({
    background: 'blue',
    color: 'white',
    bold: true,
    padding: true
  }),
  
  deprecated: definePreset({
    color: 'yellow',
    strikethrough: true
  })
};

const log = createLogger({
  presets: customPresets
});

// Use custom presets
log.preset('brand', 'MyApp');
log.preset('version', '2.1.0');
log.preset('status', 'ONLINE');
log.preset('deprecated', 'oldFunction()');

Custom Presets

MyApp - Brand preset

v2.1.0 - Version preset

ONLINE - Status preset

oldFunction() - Deprecated preset

🎮 Try Presets

Practical Examples

Application Branding

const brandTheme = defineTheme({
  name: 'brand',
  colors: {
    success: '#10b981',  // Brand green
    error: '#ef4444',    // Brand red
    warning: '#f59e0b',  // Brand yellow
    info: '#6366f1',     // Brand purple (primary)
    debug: '#9ca3af'     // Gray
  },
  icons: {
    success: '✓',
    error: '✗',
    warning: '⚠',
    info: '→',
    debug: '·'
  }
});

const log = createLogger({ theme: brandTheme });

Brand Theme

✓ Operation successful

✗ Operation failed

⚠ Deprecation warning

→ Processing request

· Debug info

Status Dashboard

const dashboardPresets = {
  online: definePreset({
    color: 'white',
    background: 'green',
    bold: true,
    padding: true
  }),
  offline: definePreset({
    color: 'white',
    background: 'red',
    bold: true,
    padding: true
  }),
  degraded: definePreset({
    color: 'black',
    background: 'yellow',
    bold: true,
    padding: true
  }),
  maintenance: definePreset({
    color: 'white',
    background: 'blue',
    bold: true,
    padding: true
  })
};

function showStatus(service: string, status: string) {
  console.log(`${service}: ${log.preset(status, status.toUpperCase())}`);
}

showStatus('API', 'online');
showStatus('Database', 'online');
showStatus('Cache', 'degraded');
showStatus('CDN', 'offline');

Status Dashboard

API: ONLINE

Database: ONLINE

Cache: DEGRADED

CDN: OFFLINE

Git-style Output

const gitPresets = {
  added: definePreset({ color: 'green', prefix: '+' }),
  removed: definePreset({ color: 'red', prefix: '-' }),
  modified: definePreset({ color: 'yellow', prefix: '~' }),
  renamed: definePreset({ color: 'cyan', prefix: '→' }),
  untracked: definePreset({ color: 'gray', prefix: '?' })
};

const log = createLogger({ presets: gitPresets });

log.preset('added', 'src/newFile.ts');
log.preset('removed', 'src/oldFile.ts');
log.preset('modified', 'src/index.ts');
log.preset('renamed', 'config.js → config.ts');
log.preset('untracked', 'temp.txt');

Git-style Output

+ src/newFile.ts

- src/oldFile.ts

~ src/index.ts

→ config.js → config.ts

? temp.txt

Test Framework Style

const testPresets = {
  pass: definePreset({
    color: 'green',
    bold: true,
    prefix: '✓'
  }),
  fail: definePreset({
    color: 'red',
    bold: true,
    prefix: '✗'
  }),
  skip: definePreset({
    color: 'yellow',
    dim: true,
    prefix: '○'
  }),
  pending: definePreset({
    color: 'cyan',
    prefix: '◌'
  }),
  suite: definePreset({
    bold: true,
    underline: true
  })
};

const log = createLogger({ presets: testPresets });

log.preset('suite', 'User Authentication');
log.preset('pass', 'should login with valid credentials');
log.preset('pass', 'should reject invalid password');
log.preset('fail', 'should lock after 3 attempts');
log.preset('skip', 'should support 2FA (not implemented)');

Test Framework Output

User Authentication

✓ should login with valid credentials

✓ should reject invalid password

✗ should lock after 3 attempts

○ should support 2FA (not implemented)

🎮 Try Test Output

Theme Inheritance

import { extendTheme, themes } from 'logluxe';

// Extend an existing theme
const customDracula = extendTheme(themes.dracula, {
  icons: {
    success: '🎉',
    error: '💥',
    warning: '⚡',
    info: '💡',
    debug: '🔬'
  }
});

const log = createLogger({ theme: customDracula });

Extended Dracula Theme

🎉 Extended success

💥 Extended error

⚡ Extended warning

💡 Extended info

🔬 Extended debug

Best Practices

1. Match Your Brand

// Use your brand colors
const theme = defineTheme({
  colors: {
    success: brandColors.primary,
    error: brandColors.danger,
    // ...
  }
});

2. Consider Accessibility

// Ensure sufficient contrast
const accessibleTheme = defineTheme({
  colors: {
    // Use colors with good contrast
    error: '#dc2626',  // Not too bright
    warning: '#d97706', // Readable on both dark/light
  }
});

3. Create Presets for Repeated Patterns

// Instead of repeating styles
log.paint('TODO').yellow().bold().print();
log.paint('TODO').yellow().bold().print();

// Create a preset
log.preset('todo', 'Task description');
log.preset('todo', 'Another task');

4. Document Custom Themes

/**
 * Corporate theme following brand guidelines
 * 
 * Colors:
 * - Success: Brand green (#10b981)
 * - Error: Alert red (#ef4444)
 * - Warning: Caution yellow (#f59e0b)
 * - Info: Primary blue (#3b82f6)
 */
const corporateTheme = defineTheme({ /* ... */ });

Next: Configuration Options →

Built-in Themes​

Using Themes​

Available Themes​

Default Theme​

Ocean Theme​

Forest Theme​

Sunset Theme​

Neon Theme​

Dracula Theme​

Nord Theme​

Custom Themes​

Creating a Custom Theme​

Theme Properties​

Presets​

What are Presets?​

Built-in Presets​

Custom Presets​

Practical Examples​

Application Branding​

Status Dashboard​

Git-style Output​

Test Framework Style​

Theme Inheritance​

Best Practices​

1. Match Your Brand​

2. Consider Accessibility​

3. Create Presets for Repeated Patterns​

4. Document Custom Themes​

Built-in Themes

Using Themes

Available Themes

Default Theme

Ocean Theme

Forest Theme

Sunset Theme

Neon Theme

Dracula Theme

Nord Theme

Custom Themes

Creating a Custom Theme

Theme Properties

Presets

What are Presets?

Built-in Presets

Custom Presets

Practical Examples

Application Branding

Status Dashboard

Git-style Output

Test Framework Style

Theme Inheritance

Best Practices

1. Match Your Brand

2. Consider Accessibility

3. Create Presets for Repeated Patterns

4. Document Custom Themes