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.

Importing VS Code themes

You can import your favorite VS Code themes into Tachi Code using the Import Color Theme... command from the command palette.

To import a VS Code theme:

1. In VS Code, install your desired theme extension.

2. Open the command palette in VS Code and run the Developer: Generate Color Theme From Current Settings command.

3. Modify your generated color theme to include name and displayName properties if they are not already present.

   Both fields are will be generated automatically at import if not present, but it’s recommended to set them explicitly to ensure the theme is identified as you expect.

   • name is an internal identifier that allows only alphanumeric characters and and dashes.
   • displayName is a human-readable name that can include spaces and special characters.

4. Save the generated theme file to your computer.

5. In Tachi Code, open the command palette and run the Import Color Theme... command.

6. Select the theme file you saved in step 4.

The imported theme will be applied and will now be available in the theme picker.

Uninstalling themes

You can uninstall imported or community themes using the Uninstall Color Theme command from the command palette.

When you run the command, a list of installed themes will be presented. Select the theme you want to uninstall, and it will be removed from your installation.

If the uninstalled theme was the active theme, Tachi Code will revert to the default Armada theme.

Built-in themes cannot be uninstalled.

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"
             }
         }
     ]
  }
}