chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,288 @@
|
||||
# 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`
|
||||
- `Holiday`
|
||||
- `Shades Of Purple`
|
||||
- `Solarized Dark`
|
||||
- `Tokyo Night`
|
||||
- **Light themes:**
|
||||
- `ANSI Light`
|
||||
- `Ayu Light`
|
||||
- `Default Light`
|
||||
- `GitHub Light`
|
||||
- `Google Code`
|
||||
- `Solarized Light`
|
||||
- `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.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
> [!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](../reference/configuration.md) so your preference is remembered
|
||||
across sessions.
|
||||
|
||||
---
|
||||
|
||||
## Custom color themes
|
||||
|
||||
Gemini CLI lets you 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
|
||||
nested configuration objects. For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"ui": {
|
||||
"customThemes": {
|
||||
"MyCustomTheme": {
|
||||
"name": "MyCustomTheme",
|
||||
"type": "custom",
|
||||
"background": {
|
||||
"primary": "#181818"
|
||||
},
|
||||
"text": {
|
||||
"primary": "#f0f0f0",
|
||||
"secondary": "#a0a0a0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Configuration objects:**
|
||||
|
||||
- **`text`**: Defines text colors.
|
||||
- `primary`: The default text color.
|
||||
- `secondary`: Used for less prominent text.
|
||||
- `link`: Color for URLs and links.
|
||||
- `accent`: Used for highlights and emphasis.
|
||||
- `response`: Precedence over `primary` for rendering model responses.
|
||||
- **`background`**: Defines background colors.
|
||||
- `primary`: The main background color of the UI.
|
||||
- `diff.added`: Background for added lines in diffs.
|
||||
- `diff.removed`: Background for removed lines in diffs.
|
||||
- **`border`**: Defines border colors.
|
||||
- `default`: The standard border color.
|
||||
- `focused`: Border color when an element is focused.
|
||||
- **`status`**: Colors for status indicators.
|
||||
- `success`: Used for successful operations.
|
||||
- `warning`: Used for warnings.
|
||||
- `error`: Used for errors.
|
||||
- **`ui`**: Other UI elements.
|
||||
- `comment`: Color for code comments.
|
||||
- `symbol`: Color for code symbols and operators.
|
||||
- `gradient`: An array of colors used for gradient effects.
|
||||
|
||||
**Required properties:**
|
||||
|
||||
- `name` (must match the key in the `customThemes` object and be a string)
|
||||
- `type` (must be the string `"custom"`)
|
||||
|
||||
While all sub-properties are technically optional, we recommend providing at
|
||||
least `background.primary`, `text.primary`, `text.secondary`, and the various
|
||||
accent colors via `text.link`, `text.accent`, and `status` to ensure a cohesive
|
||||
UI.
|
||||
|
||||
You can use either hex codes (for example, `#FF0000`) **or** standard CSS color
|
||||
names (for example, `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": "Gruvbox Dark",
|
||||
"type": "custom",
|
||||
"background": {
|
||||
"primary": "#282828",
|
||||
"diff": {
|
||||
"added": "#2b3312",
|
||||
"removed": "#341212"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"primary": "#ebdbb2",
|
||||
"secondary": "#a89984",
|
||||
"link": "#83a598",
|
||||
"accent": "#d3869b"
|
||||
},
|
||||
"border": {
|
||||
"default": "#3c3836",
|
||||
"focused": "#458588"
|
||||
},
|
||||
"status": {
|
||||
"success": "#b8bb26",
|
||||
"warning": "#fabd2f",
|
||||
"error": "#fb4934"
|
||||
},
|
||||
"ui": {
|
||||
"comment": "#928374",
|
||||
"symbol": "#8ec07c",
|
||||
"gradient": ["#cc241d", "#d65d0e", "#d79921"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
> [!WARNING]
|
||||
> 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="/docs/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](../reference/configuration.md) as other
|
||||
settings.
|
||||
|
||||
### Themes from extensions
|
||||
|
||||
[Extensions](../extensions/reference.md#themes) can also provide custom themes.
|
||||
Once an extension is installed and enabled, its themes are automatically added
|
||||
to the selection list in the `/theme` command.
|
||||
|
||||
Themes from extensions appear with the extension name in parentheses to help you
|
||||
identify their source, for example: `shades-of-green (green-extension)`.
|
||||
|
||||
---
|
||||
|
||||
## Dark themes
|
||||
|
||||
### ANSI
|
||||
|
||||
<img src="/docs/assets/theme-ansi-dark.png" alt="ANSI theme" width="600">
|
||||
|
||||
### Atom One
|
||||
|
||||
<img src="/docs/assets/theme-atom-one-dark.png" alt="Atom One theme" width="600">
|
||||
|
||||
### Ayu
|
||||
|
||||
<img src="/docs/assets/theme-ayu-dark.png" alt="Ayu theme" width="600">
|
||||
|
||||
### Default
|
||||
|
||||
<img src="/docs/assets/theme-default-dark.png" alt="Default theme" width="600">
|
||||
|
||||
### Dracula
|
||||
|
||||
<img src="/docs/assets/theme-dracula-dark.png" alt="Dracula theme" width="600">
|
||||
|
||||
### GitHub
|
||||
|
||||
<img src="/docs/assets/theme-github-dark.png" alt="GitHub theme" width="600">
|
||||
|
||||
### Holiday
|
||||
|
||||
<img src="/docs/assets/theme-holiday-dark.png" alt="Holiday theme" width="600">
|
||||
|
||||
### Shades Of Purple
|
||||
|
||||
<img src="/docs/assets/theme-shades-of-purple-dark.png" alt="Shades Of Purple theme" width="600">
|
||||
|
||||
### Solarized Dark
|
||||
|
||||
<img src="/docs/assets/theme-solarized-dark.png" alt="Solarized Dark theme" width="600">
|
||||
|
||||
### Tokyo Night
|
||||
|
||||
<img src="/docs/assets/theme-tokyonight-dark.png" alt="Tokyo Night theme" width="600">
|
||||
|
||||
## Light themes
|
||||
|
||||
### ANSI Light
|
||||
|
||||
<img src="/docs/assets/theme-ansi-light.png" alt="ANSI Light theme" width="600">
|
||||
|
||||
### Ayu Light
|
||||
|
||||
<img src="/docs/assets/theme-ayu-light.png" alt="Ayu Light theme" width="600">
|
||||
|
||||
### Default Light
|
||||
|
||||
<img src="/docs/assets/theme-default-light.png" alt="Default Light theme" width="600">
|
||||
|
||||
### GitHub Light
|
||||
|
||||
<img src="/docs/assets/theme-github-light.png" alt="GitHub Light theme" width="600">
|
||||
|
||||
### Google Code
|
||||
|
||||
<img src="/docs/assets/theme-google-light.png" alt="Google Code theme" width="600">
|
||||
|
||||
### Solarized Light
|
||||
|
||||
<img src="/docs/assets/theme-solarized-light.png" alt="Solarized Light theme" width="600">
|
||||
|
||||
### Xcode
|
||||
|
||||
<img src="/docs/assets/theme-xcode-light.png" alt="Xcode Light theme" width="600">
|
||||
Reference in New Issue
Block a user