Themes

ThinkCode offers extensive theming capabilities to customize the visual appearance of your coding environment. This allows you to create a comfortable and personalized development experience.

Built-in Themes

ThinkCode comes with several high-quality themes out of the box:

You can switch between these themes in the Settings menu under Appearance → Color Theme.

Theme Structure

ThinkCode themes are defined using a structured format that provides control over various UI elements:

{
  "name": "My Custom Theme",
  "type": "dark",
  "colors": {
    "editor.background": "#1E1E1E",
    "editor.foreground": "#D4D4D4",
    "activityBar.background": "#181818",
    "sideBar.background": "#1F1F1F",
    "terminal.background": "#1E1E1E",
    "panel.background": "#1E1E1E",
    "statusBar.background": "#007ACC",
    "tab.activeBackground": "#2D2D2D",
    "tab.inactiveBackground": "#1E1E1E"
  },
  "tokenColors": [
    {
      "name": "Comments",
      "scope": ["comment", "punctuation.definition.comment"],
      "settings": {
        "foreground": "#6A9955"
      }
    },
    {
      "name": "String",
      "scope": ["string", "constant.other.symbol"],
      "settings": {
        "foreground": "#CE9178"
      }
    }
  ]
}

Creating Custom Themes

You can create your own themes to fully customize the ThinkCode experience:

1. Generate a Theme Template: Navigate to Command Palette (Ctrl+Shift+P or Cmd+Shift+P) → Generate Theme Template.

2. Customize Colors: Edit the generated JSON file to modify colors for:

   • UI elements (editor, sidebar, status bar, etc.)
   • Syntax highlighting for different language constructs
   • ThinkCode-specific elements (AI suggestions, context panels, etc.)

3. Test Your Theme: Use the Preview Theme option in the Command Palette to see your changes in real-time without installing the theme.

4. Package Your Theme: Use the Package Theme command to create a .ttheme file that can be installed.

5. Share Your Theme: Submit your theme to the ThinkCode Marketplace or share it directly with colleagues.

ThinkCode AI Theme Adaptation

A unique feature of ThinkCode is AI-powered theme adaptation, which can:

• Automatically adjust theme brightness based on ambient light
• Suggest color changes to improve readability
• Optimize contrast ratios for accessibility
• Create variations of your favorite themes
• Generate entirely new themes based on your preferences

To access these features, use the AI Theme Assistant in the Command Palette.

Theme Synchronization

ThinkCode's theme settings can be synchronized across devices using:

• ThinkCode Cloud Sync
• Settings Profiles
• GitHub/GitLab accounts
• Local export/import

Color Tokens Reference

When creating custom themes, you can use the following key color tokens:

Best Practices for Theme Development

• Maintain sufficient contrast between text and background
• Ensure consistent color usage across related UI elements
• Test themes with multiple programming languages
• Consider color blindness and accessibility needs
• Include both light and dark variants
• Document any special customizations

Troubleshooting

If you encounter issues with themes:

1. Theme Not Applying: Try restarting ThinkCode
2. Missing Elements: Check theme JSON for missing token definitions
3. Syntax Highlighting Issues: Ensure proper scope naming in tokenColors
4. Performance Problems: Reduce complexity of color rules
5. Importing Failures: Verify file format is correct (.ttheme)

For additional help, refer to the ThinkCode Theme API documentation or join the ThinkCode community forums.