waveterm/docs/docs/customization.mdx

106 lines
4.4 KiB
Plaintext

---
sidebar_position: 1.5
id: "customization"
title: "Customization"
---
## Tab Themes
<img
title="Tab Context Menu"
style={{ float: "right", margin: "0 0 10px 10px" }}
src="./img/tab-context-menu.png"
width="300"
/>
Right click on any tab to bring up a menu which allows you to rename the tab and select different backgrounds.
It is also possible to create your own themes using custom colors, gradients, images and more by editing your presets.json config file. To see how Wave's built in tab themes are defined, you can check out our [default presets file](https://github.com/wavetermdev/waveterm/blob/main/pkg/wconfig/defaultconfig/presets.json).
<div style={{ clear: "both" }} />
## Terminal Customization
<img
title="Terminal Context Menu"
style={{ float: "right", margin: "0 0 10px 10px" }}
src="./img/terminal-context-menu.png"
width="300"
/>
#### Terminal Theme
Right click in the header area of any terminal block to bring up a menu which allows you to set a terminal
theme for that terminal.
You can set the default theme for all terminals (which haven't had their theme manually overridden) by editing your settings.json file and adding the key `term:theme` and setting it to the appropriate key. The keys can be found
in the [default termthemes.json file](https://github.com/wavetermdev/waveterm/blob/main/pkg/wconfig/defaultconfig/termthemes.json).
If you add your own termthemes.json file in the config directory, you can also add your own custom terminal themes (just follow the same format).
<div style={{ clear: "both" }} />
#### Font Size
From the same context menu you can also change the font-size of the terminal. To change the default font size across all of your (non-overridden) terminals, you can set the config key `term:fontsize` to the size you want. e.g. `{ "term:fontsize": 14}`.
#### Font Family
There is no UI to edit your default terminal font family. But, it _can_ be overridden. In your settings.json file you can add the key `term:fontfamily` and set it to a font that is _installed_ on your local system. If type a font that is not installed, or use a non-monospace font, your terminal will look terrible (don't do that 🙂), delete the key to return to using the default.
## Widgets Sidebar
<img
title="Terminal Context Menu"
style={{ float: "right", margin: "0 0 10px 10px" }}
src="./img/custom-widgets.png"
width="120"
/>
See [Custom Widgets](/customwidgets) for detailed documentation around changing what appears in your right widget sidebar.
Using widgets.json, you'll be able to remove any default widgets and add widgets of your own. You can fully customize the icons, colors, text, and defaults (like directories, webpages, AI model, remote connection, commands, etc.) of your custom widgets.
You can also suppress the help widgets in the bottom right by setting the config key `widget:showhelp` to `false`.
<div style={{ clear: "both" }} />
## Tab Backgrounds
Wave supports powerful custom backgrounds for your tabs using images, patterns, gradients, and colors. The quickest way to set an image background is using the `wsh setbg` command:
```bash
# Set an image background with 50% opacity (default)
wsh setbg ~/pictures/background.jpg
# Set a color background (use quotes to prevent # being interpreted as a shell comment)
wsh setbg "#ff0000" # hex color
wsh setbg forestgreen # CSS color name
# Adjust opacity
wsh setbg --opacity 0.3 ~/pictures/light-pattern.png
wsh setbg --opacity 0.7 # change only opacity of current background
# Image positioning options
wsh setbg --tile ~/pictures/texture.png # create tiled pattern
wsh setbg --center ~/pictures/logo.png # center without scaling
wsh setbg --center --size 200px ~/pictures/logo.png # center with specific size (px, %, auto)
# Remove background
wsh setbg --clear
```
You can use any JPEG, PNG, GIF, WebP, or SVG image as your background. The `--center` option is particularly useful for logos or icons where you want to maintain the original size.
To preview the metadata for any background without applying it, use the `--print` flag:
```bash
wsh setbg --print "#ff0000"
```
For more advanced customization options including gradients, colors, and saving your own background presets, check out our [Background Configuration](/presets#background-configurations) documentation.
## Presets
For more advanced customization, to set up multiple AI models, and your own tab backgrounds, check out our [Presets Documentation](./presets).