RLT Theme Helper

Complete development toolkit for Racing League Tools Themes

Powerful VS Code extension that enhances your RLT theme development workflow with interactive color picker, smart variable hints, comprehensive JSON validation, and code snippets.

📋 Requirements

• VS Code 1.88.0 or higher
• Racing League Tools themes workspace

✨ Features

🎨 Interactive Color Picker

Click on the color box next to any color value to open an interactive color picker with instant preview.

Supported Color Formats:

• #RRGGBB - Standard hex format (e.g., #FF5733)
• #AARRGGBB - RLT format with alpha channel first (e.g., #80FF5733)
• RRGGBB / AARRGGBB - Hex format without # for Color/Foreground/Background properties
• R,G,B - Comma-separated RGB values (e.g., 255,87,51)
• R,G,B,A - Comma-separated RGBA values (e.g., 255,87,51,128)

Key Features:

• 🎯 Visual color indicators appear next to all color values
• 🔄 Easy conversion between different color formats via dropdown
• 🧠 Smart detection - automatically excludes layout properties (margin, padding, spacing, etc.)
• 📦 Global variables that resolve to colors show color indicators (read-only)

💡 Global Variables Inline Hints

See resolved values of your variables directly in the editor as grayed-out inline hints - no need to constantly check global_vars.json!

Supported Variable Formats:

{
  "SimpleVariable": "{VariableName}",
  "DoubleBrace": "{{VariableName}}",
  "NestedProperty": "{Variable.Property.SubProperty}",
  "ComplexNested": "{Some{Nested}Value}",
  "Localization": "[LocalizationKey]"
}

Key Features:

• 👁️ Inline hints show resolved values next to variable references
• 🎨 Color indicators for variables that resolve to color values
• 🌍 Smart localization file selection based on DefaultLocalizationId in theme_description.json
• 🔗 Clickable tooltips to quickly navigate to variable definitions
• ⚡ Real-time updates when global_vars.json or localization files change
• 🧩 Full support for complex nested variable resolution

🔮 Item Property Autocomplete

Get intelligent autocomplete for Item.* properties based on your ItemsSource context - powered by real C# API models from RacingLeagueTools.

Supported Patterns:

• {Item. - Autocomplete based on detected ItemsSource in parent blocks or layouts
• {Session., {Event., {DriverInfo. - Direct root object access without Item
• {Item.Team.Nation.Code} - Full nested navigation with autocomplete at each level
• {Item.Driver0.Name} - Collection indexing support (Driver0, Driver1, etc.)

Key Features:

• 🎯 Context-aware suggestions based on actual C# data types
• 📦 Works in components - automatically finds ItemsSource from layout usage
• 🔗 Shows inherited properties from base classes
• 📝 Rich documentation with property types (string, int, bool, collections)
• 🌐 Supports 46 API classes with 1000+ properties
• 📊 Context info display - see which object type you're working with

Coverage:

Session, Season, Standings, Championship, Statistics, Penalties, League roles, and more - with full inheritance chains and nested object navigation.

⌨️ Keyboard Shortcuts

Boost your productivity with convenient keyboard shortcuts:

Add Global Variable Command

With text selected:

1. Select text (e.g., #FF5733)
2. Press Ctrl+K Ctrl+V
3. Enter variable name (e.g., PrimaryColor)
4. Selection is replaced with {PrimaryColor}
5. globals/global_vars.json is created/updated with value #FF5733
6. File opens with value selected, ready to edit

Without selection:

1. Press Ctrl+K Ctrl+V
2. Enter variable name
3. {VariableName} is inserted at cursor
4. Variable created in global_vars.json with empty value

Customize Shortcuts:

1. Press Ctrl+K Ctrl+S to open Keyboard Shortcuts
2. Search for "rlt-theme-helper"
3. Click any keybinding to customize

📝 Code Snippets

Place your cursor where you want to insert a block and press Ctrl+K Ctrl+S to choose from available snippets. Navigate through placeholders using Tab.

Available Snippets:

• 📦 BlockRoot
• 🖼️ Canvas
• 🎨 ColorizeBackground
• 🧩 Component (create & use)
• ⚓ Dock
• 🖼️ Image
• 📚 ItemStack
• 🔧 Public Property
• ⬜ Shape
• 📚 Stack
• 💅 Style (definition)
• 📊 Table & Table Columns
• 📝 Text
• 🎭 Theme Description & Link
• ⚡ Triggers & Setters

✅ JSON Validation & IntelliSense

Comprehensive JSON schema validation with detailed property hints for:

• 📄 Layer files (layer.json) - Block structure validation
• 🧩 Components - Component definition validation
• 🌍 Variables - Global and public variables
• 📐 Layouts - Layout and theme descriptions
• 🌏 Localizations - Localization file validation

🔍 Completion Providers

Smart auto-completion for:

• Global Variables - Shows list with current values (press Ctrl+Space)
• Component Names - Available components in your theme with clickable links to source files
• Style Names - Defined styles with clickable links to source files
• Trigger Names - Available triggers in your theme with clickable links to source files
• Data Converters - Built-in converter functions

Enhanced Documentation:

• 🔗 Clickable links to source files for Components, Styles, and Triggers
• 📍 Displays whether item is defined globally or locally
• 🎨 Color icon for Style completions

🚀 Getting Started

1. Install the extension from VS Code Marketplace
2. Open your RLT theme workspace
3. Start editing JSON files - features activate automatically!

📖 Version Support

Current scope: RLT Themes 0.9.6

🤝 Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

📝 License

See LICENSE.md for details.

📋 Changelog

See CHANGELOG.md for a complete list of changes and version history.

🎉 Enjoy

Made with ❤️ for the Racing League Tools community