asdfer
6576bd2c83
Adds missing documentation about font fallbacks on `appearance.md` and `all-settings.md` `all-settings.md` only lacked terminal font fallback documentation so that's the only thing I added there. Self-Review Checklist: - [X] I've reviewed my own diff for quality, security, and reliability - [it's a doc update] Unsafe blocks (if any) have justifying comments - [there is no ui] The content is consistent with the [UI/UX checklist](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist) - [it's a doc update] Tests cover the new/changed behavior - [i really hope that my extra bytes on documentation cause no performance impacts] Performance impact has been considered and is acceptable Release Notes: - N/A
135 lines
4.2 KiB
Markdown
135 lines
4.2 KiB
Markdown
---
|
|
title: Appearance and Visual Customization - Zed
|
|
description: Customize Zed's themes, fonts, icons, UI density, and other visual settings to match your preferences.
|
|
---
|
|
|
|
# Appearance
|
|
|
|
Customize Zed's visual appearance to match your preferences. This guide covers themes, fonts, icons, and other visual settings.
|
|
|
|
For information on how the settings system works, see [All Settings](./reference/all-settings.md).
|
|
|
|
## Customize Zed in 5 Minutes
|
|
|
|
Here's how to make Zed feel like home:
|
|
|
|
1. **Pick a theme**: Press {#kb theme_selector::Toggle} to open the Theme Selector. Arrow through the list to preview themes in real time, and press Enter to apply.
|
|
|
|
2. **Toggle light/dark mode quickly**: Press {#kb theme::ToggleMode}. If you currently use a static `"theme": "..."` value, the first toggle converts it to dynamic mode settings with default themes.
|
|
|
|
3. **Choose an icon theme**: Run {#action icon_theme_selector::Toggle} from the command palette to browse icon themes.
|
|
|
|
4. **Set your font**: Open the Settings Editor with {#kb zed::OpenSettings} and search for `buffer_font_family`. Set it to your preferred coding font.
|
|
|
|
5. **Adjust font size**: In the same Settings Editor, search for `buffer_font_size` and `ui_font_size` to tweak the editor and interface text sizes.
|
|
|
|
That's it. You now have a personalized Zed setup.
|
|
|
|
## Themes
|
|
|
|
Install themes from the Extensions page ({#action zed::Extensions}), then switch between them with the Theme Selector ({#kb theme_selector::Toggle}).
|
|
|
|
Zed supports separate themes for light and dark mode with automatic switching based on your system preference:
|
|
|
|
```json [settings]
|
|
{
|
|
"theme": {
|
|
"mode": "system",
|
|
"light": "One Light",
|
|
"dark": "One Dark"
|
|
}
|
|
}
|
|
```
|
|
|
|
You can also override specific theme attributes for fine-grained control.
|
|
|
|
→ [Themes documentation](./themes.md)
|
|
|
|
## Icon Themes
|
|
|
|
Customize file and folder icons in the Project Panel and tabs. Browse available icon themes with the Icon Theme Selector ({#action icon_theme_selector::Toggle} in the command palette).
|
|
|
|
Like color themes, icon themes support separate light and dark variants:
|
|
|
|
```json [settings]
|
|
{
|
|
"icon_theme": {
|
|
"mode": "system",
|
|
"light": "Zed (Default)",
|
|
"dark": "Zed (Default)"
|
|
}
|
|
}
|
|
```
|
|
|
|
→ [Icon Themes documentation](./icon-themes.md)
|
|
|
|
## Fonts
|
|
|
|
Zed uses three font settings and their fallback counterparts for different contexts:
|
|
|
|
| Setting | Used for |
|
|
| ------------------------- | ------------------------- |
|
|
| `buffer_font_family` | Editor text |
|
|
| `buffer_font_fallbacks` | Editor text |
|
|
| `ui_font_family` | Interface elements |
|
|
| `ui_font_fallbacks` | Interface elements |
|
|
| `terminal.font_family` | [Terminal](./terminal.md) |
|
|
| `terminal.font_fallbacks` | [Terminal](./terminal.md) |
|
|
|
|
Example configuration:
|
|
|
|
```json [settings]
|
|
{
|
|
"buffer_font_family": "JetBrains Mono",
|
|
"buffer_font_fallbacks": ["Nerd Font"],
|
|
"buffer_font_size": 14,
|
|
"ui_font_family": "Inter",
|
|
"ui_font_fallbacks": ["Nerd Font"],
|
|
"ui_font_size": 16,
|
|
"terminal": {
|
|
"font_family": "JetBrains Mono",
|
|
"font_fallbacks": ["Nerd Font"],
|
|
"font_size": 14
|
|
}
|
|
}
|
|
```
|
|
|
|
### Font Ligatures
|
|
|
|
To disable font ligatures:
|
|
|
|
```json [settings]
|
|
{
|
|
"buffer_font_features": {
|
|
"calt": false
|
|
}
|
|
}
|
|
```
|
|
|
|
### Line Height
|
|
|
|
Adjust line spacing with `buffer_line_height`:
|
|
|
|
- `"comfortable"` — 1.618 ratio (default)
|
|
- `"standard"` — 1.3 ratio
|
|
- `{ "custom": 1.5 }` — Custom ratio
|
|
|
|
## UI Elements
|
|
|
|
Zed provides extensive control over UI elements including:
|
|
|
|
- **Tab bar** — Show/hide, navigation buttons, file icons, git status
|
|
- **Status bar** — Language selector, cursor position, line endings
|
|
- **Scrollbar** — Visibility, git diff indicators, search results
|
|
- **Minimap** — Code overview display
|
|
- **Gutter** — Line numbers, fold indicators, breakpoints
|
|
- **Panels** — Project Panel, Terminal, Agent Panel sizing and docking
|
|
|
|
→ [Visual Customization documentation](./visual-customization.md) for all UI element settings
|
|
|
|
## What's Next
|
|
|
|
- [All Settings](./reference/all-settings.md) — Complete settings reference
|
|
- [Key bindings](./key-bindings.md) — Customize keyboard shortcuts
|
|
- [Vim Mode](./vim.md) — Enable modal editing
|