1810ca0290
Release Notes: - N/A Overview Restructures the documentation navigation to be organized by user goals rather than feature lists. Introduces a new "Working with Code" section and reorganizes existing content into clearer groupings. ### Navigation Changes **New top-level sections:** - **Working with Code** — Groups editing, navigation, and execution features by workflow - **Reference** — Dedicated section for lookup-only content (settings, actions, CLI) - **Coming From...** — Migration guides grouped together **Reorganized sections:** - **Customization** — Renamed from "Configuration," focused on appearance and keybindings - **Account & Privacy** — Consolidated auth, privacy, and telemetry pages New Files | File | Purpose | |------|---------| | `editing-code.md` | Overview page for editing features | | `finding-navigating.md` | Overview page for navigation tools with quick reference | | `running-testing.md` | Overview page for tasks, debugger, and REPL | | `reference/all-settings.md` | Settings reference (moved/renamed) | | `reference/cli.md` | CLI reference (moved) | ### Content Moves | Page | From | To | |------|------|-----| | Snippets | Customization | Working with Code → Editing Code | | Code Completions | (flat) | Working with Code → Editing Code | | Diagnostics | (flat) | Working with Code → Editing Code | | Multibuffers | (flat) | Working with Code → Editing Code | | Command Palette | (flat) | Working with Code → Finding & Navigating | | Outline Panel | (flat) | Working with Code → Finding & Navigating | | Tab Switcher | (flat) | Working with Code → Finding & Navigating | | Tasks | (flat) | Working with Code → Running & Testing | | Debugger | (flat) | Working with Code → Running & Testing | | REPL | (flat) | Working with Code → Running & Testing | | All Settings | Configuration | Reference | | CLI | (various) | Reference --------- Co-authored-by: Marshall Bowers <git@maxdeviant.com> Co-authored-by: Zed Zippy <234243425+zed-zippy[bot]@users.noreply.github.com>
122 lines
3.5 KiB
Markdown
122 lines
3.5 KiB
Markdown
# 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. **Choose an icon theme**: Run `icon theme selector: toggle` from the command palette to browse icon themes.
|
|
|
|
3. **Set your font**: Open the Settings Editor with {#kb zed::OpenSettings} and search for `buffer_font_family`. Set it to your preferred coding font.
|
|
|
|
4. **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 (`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 for different contexts:
|
|
|
|
| Setting | Used for |
|
|
| ---------------------- | ------------------------- |
|
|
| `buffer_font_family` | Editor text |
|
|
| `ui_font_family` | Interface elements |
|
|
| `terminal.font_family` | [Terminal](./terminal.md) |
|
|
|
|
Example configuration:
|
|
|
|
```json [settings]
|
|
{
|
|
"buffer_font_family": "JetBrains Mono",
|
|
"buffer_font_size": 14,
|
|
"ui_font_family": "Inter",
|
|
"ui_font_size": 16,
|
|
"terminal": {
|
|
"font_family": "JetBrains Mono",
|
|
"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
|