Resolved

VSCode Ayu theme syntax highlighting mismatch in Python code generation

Python
Syntax Highlighting
VSCode
Theme
Code Generation
Pygments
Frontend
DevTools

Generated code syntax colors did not match VSCode Ayu theme due to incorrect punctuation and token color mappings | Fixed by parsing official theme JSON files to extract accurate RGB values

Working with Python’s Pygments library for code syntax highlighting in an automated video generation system, where the goal was to match VSCode’s Ayu theme colors exactly for Python code visualization.

Issue

Generated Python code syntax highlighting failed to match VSCode’s Ayu theme colors, particularly for punctuation marks ((), [], :) which rendered in orange instead of the theme’s distinctive bluish color (#b8cfe6). Users reported visual mismatches where parentheses and brackets appeared identical to operators rather than matching the theme’s comment-like bluish tint.

Culprit

The implementation used hardcoded color values that incorrectly mapped:

  1. Punctuation tokens were grouped with operators and assigned an orange color (#f29e74) instead of the intended bluish color (#b8cfe6).
  2. Missing token categories: Built-in functions, parameters, and variables used default gray instead of theme-specific colors.
  3. Static color definitions were manually approximated rather than extracted from the official theme JSON files.

Solution

1. Official Theme Parsing

Extracted exact RGB values from the official Ayu theme JSON files (e.g., ayu-mirage.json, ayu-dark.json, ayu-light.json) to ensure precise color mappings between VSCode’s textMate scopes and Pygments token types.

2. Color Corrections

Updated the syntax color definitions to use precise values:

  • Punctuation: Bluish (#b8cfe6)
  • Built-in functions: Coral (#f28779)
  • Parameters: Purple (#dfbfff)

3. Token Mapping Fixes

Redesigned the token categorization logic to:

  • Separate punctuation tokens from operators.
  • Distinguish built-in functions and parameters with theme-specific colors.

4. Implementation Trade-offs

Chose static hardcoding over dynamic JSON loading for performance:

  • Pros: No runtime overhead or file I/O dependencies.
  • Cons: Manual updates required when the theme changes. The update process involves parsing the theme files into a human-readable format (e.g., new_colors.txt) and manually integrating the values into the main configuration.

Visual Impact: Punctuation now matches the theme’s bluish color (#b8cfe6), while built-ins and parameters are distinctly colored. The solution ensures consistency across all supported Ayu variants (dark, light, mirage) and enables future updates via the parser script.