236 lines
6.0 KiB
Markdown
236 lines
6.0 KiB
Markdown
# Themes
|
|
|
|
Gemini CLI supports a variety of themes to customize its color scheme and
|
|
appearance. You can change the theme to suit your preferences via the `/theme`
|
|
command or `"theme":` configuration setting.
|
|
|
|
## Available themes
|
|
|
|
Gemini CLI comes with a selection of pre-defined themes, which you can list
|
|
using the `/theme` command within Gemini CLI:
|
|
|
|
- **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 Gemini CLI.
|
|
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 Gemini CLI's
|
|
[configuration](../get-started/configuration.md) so your preference is
|
|
remembered across sessions.
|
|
|
|
---
|
|
|
|
## 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)
|
|
|
|
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": "#282A36",
|
|
"Foreground": "#F8F8F2",
|
|
"LightBlue": "#82AAFF",
|
|
"AccentBlue": "#61AFEF",
|
|
"AccentPurple": "#BD93F9",
|
|
"AccentCyan": "#8BE9FD",
|
|
"AccentGreen": "#50FA7B",
|
|
"AccentYellow": "#F1FA8C",
|
|
"AccentRed": "#FF5555",
|
|
"Comment": "#6272A4",
|
|
"Gray": "#ABB2BF",
|
|
"DiffAdded": "#A6E3A1",
|
|
"DiffRemoved": "#F38BA8",
|
|
"GradientColors": ["#4796E4", "#847ACE", "#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="600" />
|
|
|
|
### 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="600">
|
|
|
|
### Default
|
|
|
|
<img src="/assets/theme-default.png" alt="Default theme" width="600">
|
|
|
|
### Dracula
|
|
|
|
<img src="/assets/theme-dracula.png" alt="Dracula theme" width="600">
|
|
|
|
### GitHub
|
|
|
|
<img src="/assets/theme-github.png" alt="GitHub theme" width="600">
|
|
|
|
## Light themes
|
|
|
|
### ANSI Light
|
|
|
|
<img src="/assets/theme-ansi-light.png" alt="ANSI Light theme" width="600">
|
|
|
|
### Ayu Light
|
|
|
|
<img src="/assets/theme-ayu-light.png" alt="Ayu Light theme" width="600">
|
|
|
|
### Default Light
|
|
|
|
<img src="/assets/theme-default-light.png" alt="Default Light theme" width="600">
|
|
|
|
### GitHub Light
|
|
|
|
<img src="/assets/theme-github-light.png" alt="GitHub Light theme" width="600">
|
|
|
|
### Google Code
|
|
|
|
<img src="/assets/theme-google-light.png" alt="Google Code theme" width="600">
|
|
|
|
### Xcode
|
|
|
|
<img src="/assets/theme-xcode-light.png" alt="Xcode Light theme" width="600">
|