Theme Crafter

A visual editor for creating and customizing code syntax highlighting themes with real-time HSL color controls and live preview.

Features

• Live Preview: See syntax highlighting changes instantly as you adjust colors
• HSL Controls: Intuitive hue, saturation, and lightness sliders for precise color control
• Comprehensive Coverage: Supports all common syntax elements including:
  • Comments, functions, strings, keywords, numbers, types, variables, booleans, operators
  • Diagnostic elements (errors, warnings, info, hints)
  • UI elements (borders, lines)
• Mouse Wheel Support: Scroll over focused inputs to quickly adjust values (hold Shift for 10x speed)
• Export Functionality: Copy current theme as JSON for use in other applications
• Multiple Presets: Includes several pre-built color schemes (colors.json, pink-lavender.json, cold.json)

Usage

Getting Started

1. Open index.html in a web browser
2. The page will load with default color values from colors.json
3. Use the color controls to adjust your theme in real-time

Color Controls

Each syntax element has three controls:

• H (Hue): 0-360 degrees on the color wheel
• S (Saturation): 0-100% color intensity
• L (Lightness): 0-100% brightness

Quick Editing Tips

• Focus + Scroll: Click on any input field and use your mouse wheel to adjust values quickly
• Shift + Scroll: Hold Shift while scrolling for 10x faster adjustments
• Live Preview: All changes are applied immediately to the code sample below

Exporting Your Theme

Click the "Copy Current Theme JSON to Clipboard" button to export your current color scheme. The JSON format uses HSL arrays:

{
  "syntax-keyword": [20, 43, 62],  // [hue, saturation, lightness]
  "syntax-string": [20, 33, 59],
  "syntax-function": [311, 38, 65]
}

Using Different Presets

The repository includes several preset files:

• colors.json - Default theme
• pink-lavender.json - Pink and lavender color scheme
• cold.json - Cool blue/gray theme

To use a different preset, modify the fetch URL in script.js:156 or rename your desired preset to colors.json.

Files

• index.html - Main application interface
• script.js - Color control logic and theme management
• styles.css - Application styling and syntax highlighting rules
• colors.json - Default color scheme
• *.json - Additional color presets

Browser Compatibility

Requires a modern browser with support for:

• CSS Custom Properties (CSS Variables)
• ES6+ JavaScript features
• Clipboard API (for export functionality)