oak-team/oak-gpui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Update theme, icon theme, and visual customization pages (#41761)

Browse Source 
Some housekeeping updates:

- Update hardcoded actions/keybindings so they're pulled from the repo
- Mention settings window when useful
- Add more info about agent panel's font size
- Break sentences in individual lines

Release Notes:

- N/A
This commit is contained in:
Danilo Leal
2025-11-02 14:30:37 -03:00
committed by GitHub
parent a9bc890497
commit 12fe12b5ac
3 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/icon-themes.md
+6 -4
View File
@@ -4,19 +4,21 @@ Zed comes with a built-in icon theme, with more icon themes available as extensi
## Selecting an Icon Theme
See what icon themes are installed and preview them via the Icon Theme Selector, which you can open from the command palette with "icon theme selector: toggle".
See what icon themes are installed and preview them via the Icon Theme Selector, which you can open from the command palette with `icon theme selector: toggle`.
Navigating through the icon theme list by moving up and down will change the icon theme in real time and hitting enter will save it to your settings file.
## Installing more Icon Themes
More icon themes are available from the Extensions page, which you can access via the command palette with `zed: extensions` or the [Zed website](https://zed.dev/extensions).
More icon themes are available from the Extensions page, which you can access via the command palette with `zed: extensions` or the [Zed website](https://zed.dev/extensions?filter=icon-themes).
## Configuring Icon Themes
Your selected icon theme is stored in your settings file. You can open your settings file from the command palette with `zed: open settings file` (bound to `cmd-alt-,` on macOS and `ctrl-alt-,` on Linux).
Your selected icon theme is stored in your settings file.
You can open your settings file from the command palette with {#action zed::OpenSettingsFile} (bound to {#kb zed::OpenSettingsFile}).
Just like with themes, Zed allows for configuring different icon themes for light and dark mode. You can set the mode to `"light"` or `"dark"` to ignore the current system mode.
Just like with themes, Zed allows for configuring different icon themes for light and dark mode.
You can set the mode to `"light"` or `"dark"` to ignore the current system mode.
```json [settings]
{
docs/src/themes.md
+13 -10
View File
@@ -4,21 +4,23 @@ Zed comes with a number of built-in themes, with more themes available as extens
## Selecting a Theme
See what themes are installed and preview them via the Theme Selector, which you can open from the command palette with "theme selector: Toggle" (bound to `cmd-k cmd-t` on macOS and `ctrl-k ctrl-t` on Linux).
See what themes are installed and preview them via the Theme Selector, which you can open from the command palette with `theme selector: toggle` (bound to {#kb theme_selector::Toggle}).
Navigating through the theme list by moving up and down will change the theme in real time and hitting enter will save it to your settings file.
## Installing more Themes
More themes are available from the Extensions page, which you can access via the command palette with `zed: extensions` or the [Zed website](https://zed.dev/extensions).
More themes are available from the Extensions page, which you can access via the command palette with `zed: extensions` or the [Zed website](https://zed.dev/extensions?filter=themes).
Many popular themes have been ported to Zed, and if you're struggling to choose one, visit [zed-themes.com](https://zed-themes.com), a third-party gallery with visible previews for many of them.
## Configuring a Theme
Your selected theme is stored in your settings file. You can open your settings file from the command palette with `zed: open settings file` (bound to `cmd-alt-,` on macOS and `ctrl-alt-,` on Linux).
Your selected theme is stored in your settings file.
You can open your settings file from the command palette with {#action zed::OpenSettingsFile} (bound to {#kb zed::OpenSettingsFile}).
By default, Zed maintains two themes: one for light mode and one for dark mode. You can set the mode to `"dark"` or `"light"` to ignore the current system mode.
By default, Zed maintains two themes: one for light mode and one for dark mode.
You can set the mode to `"dark"` or `"light"` to ignore the current system mode.
```json [settings]
{
@@ -32,7 +34,8 @@ By default, Zed maintains two themes: one for light mode and one for dark mode.
## Theme Overrides
To override specific attributes of a theme, use the `theme_overrides` setting. This setting can be used to configure theme-specific overrides.
To override specific attributes of a theme, use the `theme_overrides` setting.
This setting can be used to configure theme-specific overrides.
For example, add the following to your `settings.json` if you wish to override the background color of the editor and display comments and doc comments as italics:
@@ -54,17 +57,17 @@ For example, add the following to your `settings.json` if you wish to override t
}
```
To see a comprehensive list of list of captures (like `comment` and `comment.doc`) see: [Language Extensions: Syntax highlighting](./extensions/languages.md#syntax-highlighting).
To see a comprehensive list of list of captures (like `comment` and `comment.doc`) see [Language Extensions: Syntax highlighting](./extensions/languages.md#syntax-highlighting).
To see a list of available theme attributes look at the JSON file for your theme. For example, [assets/themes/one/one.json](https://github.com/zed-industries/zed/blob/main/assets/themes/one/one.json) for the default One Dark and One Light themes.
To see a list of available theme attributes look at the JSON file for your theme.
For example, [assets/themes/one/one.json](https://github.com/zed-industries/zed/blob/main/assets/themes/one/one.json) for the default One Dark and One Light themes.
## Local Themes
Store new themes locally by placing them in the `~/.config/zed/themes` directory (macOS and Linux) or `%USERPROFILE%\AppData\Roaming\Zed\themes\` (Windows).
For example, to create a new theme called `my-cool-theme`, create a file called `my-cool-theme.json` in that directory. It will be available in the theme selector the next time Zed loads.
Find more themes at [zed-themes.com](https://zed-themes.com).
For example, to create a new theme called `my-cool-theme`, create a file called `my-cool-theme.json` in that directory.
It will be available in the theme selector the next time Zed loads.
## Theme Development
docs/src/visual-customization.md
+17 -7
View File
@@ -1,14 +1,14 @@
# Visual Customization
Various aspects of Zed's visual layout can be configured via Zed settings.json which you can access via {#action zed::OpenSettings} ({#kb zed::OpenSettings}).
Various aspects of Zed's visual layout can be configured via either the settings window or the `settings.json` file, which you can access via {#action zed::OpenSettings} ({#kb zed::OpenSettings}) and {#action zed::OpenSettingsFile} ({#kb zed::OpenSettingsFile}) respectively.
See [Configuring Zed](./configuring-zed.md) for additional information and other non-visual settings.
## Themes
User may install zed extensions providing [Themes](./themes.md) and [Icon Themes](./icon-themes.md) via {#action zed::Extensions} from the command palette or menu.
You can install many [themes](./themes.md) and [icon themes](./icon-themes.md) in form of extensions by running {#action zed::Extensions} from the command palette.
You 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:
You 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} ({#kb icon_theme_selector::Toggle}) which will modify the following settings:
```json [settings]
{
@@ -61,15 +61,20 @@ If you would like to use distinct themes for light mode/dark mode that can be se
"line_height": "standard",
},
// Agent Panel Font Settings
"agent_font_size": 15
// Controls the font size for agent responses in the agent panel.
// If not specified, it falls back to the UI font size.
"agent_ui_font_size": 15,
// Controls the font size for the agent panel's message editor, user message,
// and any other snippet of code.
"agent_buffer_font_size": 12
```
### Font ligatures
By default Zed enable font ligatures which will visually combines certain adjacent characters.
For example `=>` will be displayed as `→` and `!=` will be `≠`. This is purely cosmetic and the individual characters remain unchanged.
For example `=>` will be displayed as `→` and `!=` will be `≠`.
This is purely cosmetic and the individual characters remain unchanged.
To disable this behavior use:
@@ -464,7 +469,12 @@ Project panel can be shown/hidden with {#action project_panel::ToggleFocus} ({#k
"default_width": 640, // Default width (left/right docked)
"default_height": 320, // Default height (bottom docked)
},
"agent_font_size": 16
// Controls the font size for agent responses in the agent panel.
// If not specified, it falls back to the UI font size.
"agent_ui_font_size": 15,
// Controls the font size for the agent panel's message editor, user message,
// and any other snippet of code.
"agent_buffer_font_size": 12
```
See [Zed AI Documentation](./ai/overview.md) for additional non-visual AI settings.