Themes

Color Themes

Color themes enable you to customize the colors in Tachi Code to match your preferences. Tachi Code builds on top of VS Code’s theme system, enabling easy porting of VS Code themes to Tachi Code.

To change your active Color theme:

1. Open the Change Color Theme menu using the Command Palette ( Shift + Command + P ShiftCommandP Shift + Control + P ShiftControlP ) or keyboard shortcut Command + K then T CommandK T Command + K then T CommandK T .

2. Use the Up Arrow Up Up Arrow Up and Down Arrow Down Down Arrow Down arrow keys to navigate through and preview available themes.

3. Press Enter Enter Enter Enter to apply a theme.

Community themes

Tachi Code comes bundled with several themes. You can install more from the Tachi Code Themes repository.

To install community themes, select the Browse Additional Themes option from the picker. This will refresh, the themes index with the latest version from the repository.

When you select a community theme from the list, the theme’s JSON file will be loaded from the repository and cached locally for future use.

Automatically switch based on OS color scheme

You can configure Tachi Code to switch theme based on the current OS color scheme and contrast settings with the window.autoDetectColorScheme and window.autoDetectHighContrast settings.

The default themes for these conditions are follows:

• Workbench: Preferred Dark Color Theme - defaults to Armada
• Workbench: Preferred Light Color Theme - defaults to Light Modern
• Workbench: Preferred High Contrast Color Theme - defaults to Dark High Contrast
• Workbench: Preferred High Contrast Light Color Theme - defaults to Light High Contrast

Customizing a color theme

Colors can be overridden globally, for specific themes, or for themes whose names match a given pattern.

Themes Selectors

Theme selectors allow you to target specific themes or groups of themes for customization.

The following are examples of valid theme selectors in your workbench.colorCustomizations and editor.tokenColorCustomizations settings:

Selector	Description
[Theme Name]	Targets a specific theme by name.
[*github*]	Targets all themes that include the match string github (case-insensitive).
[*dark]"	Targets all themes that end with the match string dark (case-insensitive).
[catppuccin*]	Targets all themes that start with the match string catppuccin (case-insensitive).

Workbench color customizations

You can customize the colors editor’s user interface colors by configuring the workbench.colorCustomizations setting.

For example, to override the editor.background color for all themes, you can use:

{
  "workbench.colorCustomizations": {
      "editor.background": "#000000"
  }
}

To override statusBar.background for the Armada theme, you can use:

{
  "workbench.colorCustomizations": {
      "[Armada]": {
          "statusBar.background": "#000000"
      }
  }
}

Use the JSON-based settings editor’s auto-completion to discover available color customization options.

Token color customizations

You can customize the colors of syntax highlighting by configuring the editor.tokenColorCustomizations setting.

Basic token color customizations

You can apply customizations to predefined token sets without having to learn the details of TextMate scopes.

The predefined token sets are:

• comments
• strings
• keywords
• numbers
• types
• functions
• variables

You can specify a hex color or a textmate rule for each token set.

For example, to change the color of comments to red, you can use:

{
  "editor.tokenColorCustomizations": {
     "comments": "#ff0000"
  }
}

To make comments italic, you can use:

{
  "editor.tokenColorCustomizations": {
     "comments": {
         "fontStyle": "italic"
     }
  }
}

Advanced token color customizations

You can also provide a list of TextMate rules to customize the colors of specific scopes in the editor. These rules allow for more granular control over syntax highlighting and are appended to the existing rules of the active theme.

For example, to change the color of YAML boolean values to red, you can use:

{
  "editor.tokenColorCustomizations": {
     "textMateRules": [
         {
             "scope": "constant.language.boolean.yaml",
             "settings": {
                 "foreground": "#ff0000"
             }
         }
     ]
  }
}