1# Visual Customization
2
3Various aspects of Zed's visual layout can be configured via Zed settings.json which you can access via {#action zed::OpenSettings} ({#kb zed::OpenSettings}).
4
5See [Configuring Zed](./configuring-zed.md) for additional information and other non-visual settings.
6
7## Themes
8
9Use may install zed extensions providing [Themes](./themes.md) and [Icon Themes](./icon-themes.md) via {#action zed::Extensions} from the command palette or menu.
10
11You can preview/choose amongst your installed themes and icon themes with {#action theme_selector::Toggle} ({#kb theme_selector::Toggle}) and ({#action icon_theme_selector::Toggle}) which will modify the following settings:
12
13```json
14{
15 "theme": "One Dark",
16 "icon_theme": "Zed (Default)"
17}
18```
19
20If you would like to use distinct themes for light mode/dark mode that can be set with:
21
22```json
23{
24 "theme": {
25 "dark": "One Dark"
26 "light": "One Light",
27 // Mode to use (dark, light) or "system" to follow the OS's light/dark mode (default)
28 "mode": "system",
29 },
30 "icon_theme": {
31 "dark": "Zed (Default)"
32 "light": "Zed (Default)",
33 // Mode to use (dark, light) or "system" to follow the OS's light/dark mode (default)
34 "mode": "system",
35 }
36}
37```
38
39## Fonts
40
41```json
42 // UI Font. Use ".SystemUIFont" to use the default system font (SF Pro on macOS),
43 // or ".ZedSans" for the bundled default (currently IBM Plex)
44 "ui_font_family": ".SystemUIFont",
45 "ui_font_weight": 400, // Font weight in standard CSS units from 100 to 900.
46 "ui_font_size": 16,
47
48 // Buffer Font - Used by editor buffers
49 // use ".ZedMono" for the bundled default monospace (currently Lilex)
50 "buffer_font_family": "Berkeley Mono", // Font name for editor buffers
51 "buffer_font_size": 15, // Font size for editor buffers
52 "buffer_font_weight": 400, // Font weight in CSS units [100-900]
53 // Line height "comfortable" (1.618), "standard" (1.3) or custom: `{ "custom": 2 }`
54 "buffer_line_height": "comfortable",
55
56 // Terminal Font Settings
57 "terminal": {
58 "font_family": "",
59 "font_size": 15,
60 // Terminal line height: comfortable (1.618), standard(1.3) or `{ "custom": 2 }`
61 "line_height": "comfortable",
62 },
63
64 // Agent Panel Font Settings
65 "agent_font_size": 15
66```
67
68### Font ligatures
69
70By default Zed enable font ligatures which will visually combines certain adjacent characters.
71
72For example `=>` will be displayed as `→` and `!=` will be `≠`. This is purely cosmetic and the individual characters remain unchanged.
73
74To disable this behavior use:
75
76```json
77{
78 "buffer_font_features": {
79 "calt": false // Disable ligatures
80 }
81}
82```
83
84### Status Bar
85
86```json
87{
88 // Whether to show full labels in line indicator or short ones
89 // - `short`: "2 s, 15 l, 32 c"
90 // - `long`: "2 selections, 15 lines, 32 characters"
91 "line_indicator_format": "long"
92
93 // Individual status bar icons can be hidden:
94 // "project_panel": {"button": false },
95 // "outline_panel": {"button": false },
96 // "collaboration_panel": {"button": false },
97 // "git_panel": {"button": false },
98 // "notification_panel": {"button": false },
99 // "agent": {"button": false },
100 // "debugger": {"button": false },
101 // "diagnostics": {"button": false },
102 // "search": {"button": false },
103}
104```
105
106### Titlebar
107
108```json
109 // Control which items are shown/hidden in the title bar
110 "title_bar": {
111 "show_branch_icon": false, // Show/hide branch icon beside branch switcher
112 "show_branch_name": true, // Show/hide branch name
113 "show_project_items": true, // Show/hide project host and name
114 "show_onboarding_banner": true, // Show/hide onboarding banners
115 "show_user_picture": true, // Show/hide user avatar
116 "show_sign_in": true, // Show/hide sign-in button
117 "show_menus": false // Show/hide menus
118 },
119```
120
121## Workspace
122
123```json
124{
125 // Force usage of Zed build in path prompts (file and directory pickers)
126 // instead of OS native pickers (false).
127 "use_system_path_prompts": true,
128 // Force usage of Zed built in confirmation prompts ("Do you want to save?")
129 // instead of OS native prompts (false). On linux this is ignored (always false).
130 "use_system_prompts": true,
131
132 // Whether to use the system provided dialogs for Open and Save As (true) or
133 // Zed's built-in keyboard-first pickers (false)
134 "use_system_path_prompts": true,
135
136 // Active pane styling settings.
137 "active_pane_modifiers": {
138 // Inset border size of the active pane, in pixels.
139 "border_size": 0.0,
140 // Opacity of the inactive panes. 0 means transparent, 1 means opaque.
141 "inactive_opacity": 1.0
142 },
143
144 // Layout mode of the bottom dock: contained, full, left_aligned, right_aligned
145 "bottom_dock_layout": "contained",
146
147 // Whether to resize all the panels in a dock when resizing the dock.
148 // Can be a combination of "left", "right" and "bottom".
149 "resize_all_panels_in_dock": ["left"]
150}
151```
152
153<!--
154TBD: Centered layout related settings
155```json
156 "centered_layout": {
157 // The relative width of the left padding of the central pane from the
158 // workspace when the centered layout is used.
159 "left_padding": 0.2,
160 // The relative width of the right padding of the central pane from the
161 // workspace when the centered layout is used.
162 "right_padding": 0.2
163 },
164```
165-->
166
167## Editor
168
169```json
170 // Whether the cursor blinks in the editor.
171 "cursor_blink": true,
172
173 // Cursor shape for the default editor: bar, block, underline, hollow
174 "cursor_shape": null,
175
176 // Highlight the current line in the editor: none, gutter, line, all
177 "current_line_highlight": "all",
178
179 // When does the mouse cursor hide: never, on_typing, on_typing_and_movement
180 "hide_mouse": "on_typing_and_movement",
181
182 // Whether to highlight all occurrences of the selected text in an editor.
183 "selection_highlight": true,
184
185 // Visually show tabs and spaces (none, all, selection, boundary, trailing)
186 "show_whitespaces": "selection",
187
188 "unnecessary_code_fade": 0.3, // How much to fade out unused code.
189
190 // Hide the values of in variables from visual display in private files
191 "redact_private_values": false,
192
193 // Soft-wrap and rulers
194 "soft_wrap": "none", // none, editor_width, preferred_line_length, bounded
195 "preferred_line_length": 80, // Column to soft-wrap
196 "show_wrap_guides": true, // Show/hide wrap guides (vertical rulers)
197 "wrap_guides": [], // Where to position wrap_guides (character counts)
198
199 // Gutter Settings
200 "gutter": {
201 "line_numbers": true, // Show/hide line numbers in the gutter.
202 "runnables": true, // Show/hide runnables buttons in the gutter.
203 "breakpoints": true, // Show/hide show breakpoints in the gutter.
204 "folds": true, // Show/hide show fold buttons in the gutter.
205 "min_line_number_digits": 4 // Reserve space for N digit line numbers
206 },
207 "relative_line_numbers": false, // Show relative line numbers in gutter
208
209 // Indent guides
210 "indent_guides": {
211 "enabled": true,
212 "line_width": 1, // Width of guides in pixels [1-10]
213 "active_line_width": 1, // Width of active guide in pixels [1-10]
214 "coloring": "fixed", // disabled, fixed, indent_aware
215 "background_coloring": "disabled" // disabled, indent_aware
216 }
217```
218
219### Git Blame {#editor-blame}
220
221```json
222 "git": {
223 "inline_blame": {
224 "enabled": true, // Show/hide inline blame
225 "delay": 0, // Show after delay (ms)
226 "min_column": 0, // Minimum column to inline display blame
227 "padding": 7, // Padding between code and inline blame (em)
228 "show_commit_summary": false // Show/hide commit summary
229 },
230 "hunk_style": "staged_hollow" // staged_hollow, unstaged_hollow
231 }
232```
233
234### Editor Toolbar
235
236```json
237 // Editor toolbar related settings
238 "toolbar": {
239 "breadcrumbs": true, // Whether to show breadcrumbs.
240 "quick_actions": true, // Whether to show quick action buttons.
241 "selections_menu": true, // Whether to show the Selections menu
242 "agent_review": true, // Whether to show agent review buttons
243 "code_actions": false // Whether to show code action buttons
244 }
245```
246
247### Editor Scrollbar and Minimap {#editor-scrollbar}
248
249```json
250 // Scrollbar related settings
251 "scrollbar": {
252 // When to show the scrollbar in the editor (auto, system, always, never)
253 "show": "auto",
254 "cursors": true, // Show cursor positions in the scrollbar.
255 "git_diff": true, // Show git diff indicators in the scrollbar.
256 "search_results": true, // Show buffer search results in the scrollbar.
257 "selected_text": true, // Show selected text occurrences in the scrollbar.
258 "selected_symbol": true, // Show selected symbol occurrences in the scrollbar.
259 "diagnostics": "all", // Show diagnostics (none, error, warning, information, all)
260 "axes": {
261 "horizontal": true, // Show/hide the horizontal scrollbar
262 "vertical": true // Show/hide the vertical scrollbar
263 }
264 },
265
266 // Minimap related settings
267 "minimap": {
268 "show": "never", // When to show (auto, always, never)
269 "display_in": "active_editor", // Where to show (active_editor, all_editor)
270 "thumb": "always", // When to show thumb (always, hover)
271 "thumb_border": "left_open", // Thumb border (left_open, right_open, full, none)
272 "max_width_columns": 80, // Maximum width of minimap
273 "current_line_highlight": null // Highlight current line (null, line, gutter)
274 },
275
276 // Control Editor scroll beyond the last line: off, one_page, vertical_scroll_margin
277 "scroll_beyond_last_line": "one_page",
278 // Lines to keep above/below the cursor when scrolling with the keyboard
279 "vertical_scroll_margin": 3,
280 // The number of characters to keep on either side when scrolling with the mouse
281 "horizontal_scroll_margin": 5,
282 // Scroll sensitivity multiplier
283 "scroll_sensitivity": 1.0,
284 // Scroll sensitivity multiplier for fast scrolling (hold alt while scrolling)
285 "fast_scroll_sensitivity": 4.0,
286```
287
288### Editor Tabs
289
290```json
291 // Maximum number of tabs per pane. Unset for unlimited.
292 "max_tabs": null,
293
294 // Customize the tab bar appearance
295 "tab_bar": {
296 "show": true, // Show/hide the tab bar
297 "show_nav_history_buttons": true, // Show/hide history buttons on tab bar
298 "show_tab_bar_buttons": true // Show hide buttons (new, split, zoom)
299 },
300 "tabs": {
301 "git_status": false, // Color to show git status
302 "close_position": "right", // Close button position (left, right, hidden)
303 "show_close_button": "hover", // Close button shown (hover, always, hidden)
304 "file_icons": false, // Icon showing file type
305 // Show diagnostics in file icon (off, errors, all). Requires file_icons=true
306 "show_diagnostics": "off"
307 }
308```
309
310### Status Bar
311
312```json
313 "status_bar": {
314 // Show/hide a button that displays the active buffer's language.
315 // Clicking the button brings up the language selector.
316 // Defaults to true.
317 "active_language_button": true,
318 // Show/hide a button that displays the cursor's position.
319 // Clicking the button brings up an input for jumping to a line and column.
320 // Defaults to true.
321 "cursor_position_button": true,
322 },
323 "global_lsp_settings": {
324 // Show/hide the LSP button in the status bar.
325 // Activity from the LSP is still shown.
326 // Button is not shown if "enable_language_server" if false.
327 "button": true
328 },
329```
330
331### Multibuffer
332
333```json
334{
335 // The default number of lines to expand excerpts in the multibuffer by.
336 "expand_excerpt_lines": 5,
337 // The default number of lines of context provided for excerpts in the multibuffer by.
338 "excerpt_context_lines": 2
339}
340```
341
342### Editor Completions, Snippets, Actions, Diagnostics {#editor-lsp}
343
344```json
345 "snippet_sort_order": "inline", // Snippets completions: top, inline, bottom, none
346 "show_completions_on_input": true, // Show completions while typing
347 "show_completion_documentation": true, // Show documentation in completions
348 "auto_signature_help": false, // Show method signatures inside parentheses
349
350 // Whether to show the signature help after completion or a bracket pair inserted.
351 // If `auto_signature_help` is enabled, this setting will be treated as enabled also.
352 "show_signature_help_after_edits": false,
353
354 // Whether to show code action button at start of buffer line.
355 "inline_code_actions": true,
356
357 // Which level to use to filter out diagnostics displayed in the editor:
358 "diagnostics_max_severity": null, // off, error, warning, info, hint, null (all)
359
360 // How to render LSP `textDocument/documentColor` colors in the editor.
361 "lsp_document_colors": "inlay", // none, inlay, border, background
362```
363
364### Edit Predictions {#editor-ai}
365
366```json
367 "edit_predictions": {
368 "mode": "eager", // Automatically show (eager) or hold-alt (subtle)
369 "enabled_in_text_threads": true // Show/hide predictions in agent text threads
370 },
371 "show_edit_predictions": true // Show/hide predictions in editor
372```
373
374### Editor Inlay Hints
375
376```json
377{
378 "inlay_hints": {
379 "enabled": false,
380 // Toggle certain types of hints on and off, all switched on by default.
381 "show_type_hints": true,
382 "show_parameter_hints": true,
383 "show_other_hints": true,
384
385 // Whether to show a background for inlay hints (theme `hint.background`)
386 "show_background": false, //
387
388 // Time to wait after editing before requesting hints (0 to disable debounce)
389 "edit_debounce_ms": 700,
390 // Time to wait after scrolling before requesting hints (0 to disable debounce)
391 "scroll_debounce_ms": 50,
392
393 // A set of modifiers which, when pressed, will toggle the visibility of inlay hints.
394 "toggle_on_modifiers_press": {
395 "control": false,
396 "shift": false,
397 "alt": false,
398 "platform": false,
399 "function": false
400 }
401 }
402}
403```
404
405## File Finder
406
407```json
408 // File Finder Settings
409 "file_finder": {
410 "file_icons": true, // Show/hide file icons
411 "modal_max_width": "small", // Horizontal size: small, medium, large, xlarge, full
412 "git_status": true, // Show the git status for each entry
413 "include_ignored": null // gitignored files in results: true, false, null
414 },
415```
416
417## Project Panel
418
419Project panel can be shown/hidden with {#action project_panel::ToggleFocus} ({#kb project_panel::ToggleFocus}) or with {#action pane::RevealInProjectPanel} ({#kb pane::RevealInProjectPanel}).
420
421```json
422 // Project Panel Settings
423 "project_panel": {
424 "button": true, // Show/hide button in the status bar
425 "default_width": 240, // Default panel width
426 "dock": "left", // Position of the dock (left, right)
427 "entry_spacing": "comfortable", // Vertical spacing (comfortable, standard)
428 "file_icons": true, // Show/hide file icons
429 "folder_icons": true, // Show/hide folder icons
430 "git_status": true, // Indicate new/updated files
431 "indent_size": 20, // Pixels for each successive indent
432 "auto_reveal_entries": true, // Show file in panel when activating its buffer
433 "auto_fold_dirs": true, // Fold dirs with single subdir
434 "sticky_scroll": true, // Stick parent directories at top of the project panel.
435 "drag_and_drop": true, // Whether drag and drop is enabled
436 "scrollbar": { // Project panel scrollbar settings
437 "show": null // Show/hide: (auto, system, always, never)
438 },
439 "show_diagnostics": "all", //
440 // Settings related to indent guides in the project panel.
441 "indent_guides": {
442 // When to show indent guides in the project panel. (always, never)
443 "show": "always"
444 },
445 // Whether to hide the root entry when only one folder is open in the window.
446 "hide_root": false
447 }.
448```
449
450## Agent Panel
451
452```json
453 "agent": {
454 "version": "2",
455 "enabled": true, // Enable/disable the agent
456 "button": true, // Show/hide the icon in the status bar
457 "dock": "right", // Where to dock: left, right, bottom
458 "default_width": 640, // Default width (left/right docked)
459 "default_height": 320, // Default height (bottom dockeed)
460 },
461 "agent_font_size": 16
462```
463
464See [Zed AI Documentation](./ai/overview.md) for additional non-visual AI settings.
465
466## Terminal Panel
467
468```json
469 // Terminal Panel Settings
470 "terminal": {
471 "dock": "bottom", // Where to dock: left, right, bottom
472 "button": true, // Show/hide status bar icon
473 "default_width": 640, // Default width (left/right docked)
474 "default_height": 320, // Default height (bottom dockeed)
475
476 // Set the cursor blinking behavior in the terminal (on, off, terminal_controlled)
477 "blinking": "terminal_controlled",
478 // Default cursor shape for the terminal cursor (block, bar, underline, hollow)
479 "cursor_shape": "block",
480
481 // Environment variables to add to terminal's process environment
482 "env": {
483 // "KEY": "value"
484 },
485
486 // Terminal scrollbar
487 "scrollbar": {
488 "show": null // Show/hide: (auto, system, always, never)
489 },
490 // Terminal Font Settings
491 "font_family": "Fira Code",
492 "font_size": 15,
493 "font_weight": 400,
494 // Terminal line height: comfortable (1.618), standard(1.3) or `{ "custom": 2 }`
495 "line_height": "comfortable",
496
497 "max_scroll_history_lines": 10000, // Scrollback history (0=disable, max=100000)
498 }
499```
500
501See [Terminal settings](./configuring-zed.md#terminal) for additional non-visual customization options.
502
503### Other Panels
504
505```json
506 // Git Panel
507 "git_panel": {
508 "button": true, // Show/hide status bar icon
509 "dock": "left", // Where to dock: left, right
510 "default_width": 360, // Default width of the git panel.
511 "status_style": "icon", // label_color, icon
512 "sort_by_path": false, // Sort by path (false) or status (true)
513 "scrollbar": {
514 "show": null // Show/hide: (auto, system, always, never)
515 }
516 },
517
518 // Debugger Panel
519 "debugger": {
520 "dock": "bottom", // Where to dock: left, right, bottom
521 "button": true // Show/hide status bar icon
522 },
523
524 // Outline Panel
525 "outline_panel": {
526 "button": true, // Show/hide status bar icon
527 "default_width": 300, // Default width of the git panel
528 "dock": "left", // Where to dock: left, right
529 "file_icons": true, // Show/hide file_icons
530 "folder_icons": true, // Show file_icons (true), chevrons (false) for dirs
531 "git_status": true, // Show git status
532 "indent_size": 20, // Indentation for nested items (pixels)
533 "indent_guides": {
534 "show": "always" // Show indent guides (always, never)
535 },
536 "auto_reveal_entries": true, // Show file in panel when activating its buffer
537 "auto_fold_dirs": true, // Fold dirs with single subdir
538 "scrollbar": { // Project panel scrollbar settings
539 "show": null // Show/hide: (auto, system, always, never)
540 }
541 }
542```
543
544## Collaboration Panels
545
546```json
547{
548 // Collaboration Panel
549 "collaboration_panel": {
550 "button": true, // Show/hide status bar icon
551 "dock": "left", // Where to dock: left, right
552 "default_width": 240 // Default width of the collaboration panel.
553 },
554 "show_call_status_icon": true, // Shown call status in the OS status bar.
555
556 // Notification Panel
557 "notification_panel": {
558 // Whether to show the notification panel button in the status bar.
559 "button": true,
560 // Where to dock the notification panel. Can be 'left' or 'right'.
561 "dock": "right",
562 // Default width of the notification panel.
563 "default_width": 380
564 }
565```