1# Appearance and themes
2
3On web and desktop, open **Settings → Appearance** to choose a theme and follow the system
4appearance or stay in light or dark mode. To use different themes for light and dark mode, select
5the corresponding preview within each theme. Appearance preferences are saved separately on each
6device or browser.
7
8On web and desktop, use **Change theme** in the command palette to select a theme without leaving chat.
9Press **Cmd+Option+A** on macOS or **Ctrl+Alt+A** on Windows/Linux to open the theme picker directly.
10Use **Change appearance** in the command palette to choose System, Light, or Dark independently of
11the theme. **Cmd+Option+Shift+A** on macOS or **Ctrl+Alt+Shift+A** on Windows/Linux cycles through
12those modes. Customize these shortcuts under **Settings → Keybindings**.
13
14On mobile, open **Settings → Appearance**. Mobile has its own themes and text,
15code, and terminal preferences. It does not follow environment themes or defaults.
16
17On Android 12 or newer, choose the **Material You** theme in Appearance to use colors from
18your wallpaper. Selecting another theme replaces those colors. Like other themes, Material You
19can be selected separately for light and dark appearances.
20Android uses **Material You Layout** by default unless you have turned it off in Appearance.
21It changes shapes, spacing, and controls independently
22of the selected theme.
23
24## Composer context
25
26Git-backed projects show branch and worktree controls below the composer while you create a thread.
27The controls retreat as the composer docks after you send the first message.
28
29Turn on **Composer context** to keep those controls visible after the thread starts. This preference
30applies to the web and desktop clients.
31
32## Math
33
34Turn on **Render math** in **Settings → Appearance** to typeset LaTeX in messages and Markdown
35previews on web, desktop, and mobile. It reads `$…$`, `$$…$$`, `\(…\)`, and `\[…\]`, outside of code.
36Fenced `math` blocks also render. Formulas work in tables, including absolute-value bars.
37Dollar amounts such as `$5 and $10` stay text; write `\$` to keep any other dollar sign literal.
38Wide formulas scroll horizontally while the surrounding text wraps. Copying a formula or
39exporting a table preserves the TeX.
40
41The composer keeps TeX source editable, including when rich text is enabled. The Render math
42preference is saved separately on each device.
43
44## Motion
45
46The main sidebar, right panel, and terminal drawer open and close immediately by default. Move the
47**Panel animations** slider above 0 ms to add motion, up to 400 ms, unless reduced motion is enabled
48in your operating system. Moving between threads always snaps to the selected thread's panel state
49without replaying its transitions.
50
51## Custom themes
52
53On web and desktop, choose **Create theme** to adjust a palette, or import a T3 Code or VS Code
54theme. The theme editor's color picker lets you select an area of the app to find the color to
55change. Export your theme as JSON to share it.
56
57## Environment themes
58
59Environment themes and defaults come from the server serving your web app or the desktop app's
60main local environment. With the desktop app's local environment off, they come from the
61[background service](./background-service.md) on the same machine while the app is connected to
62it. app.t3.codes and other connections do not use them.
63
64Select a published theme in **Settings → Appearance** to follow its palette as the server updates
65it. **Duplicate** makes an independent copy you can edit. A saved custom theme with the same ID
66takes precedence. If the server stops publishing the selected theme, T3 Code falls back to its
67standard theme.
68
69Run this on the server to set a default and switch connected clients to it:
70
72t3 theme set nightfall
74
75Clients that are offline apply it when they reconnect. Each client applies the setting once;
76choosing another theme afterward sticks until the next `t3 theme set`. Run the command again to
77reapply it, even if the name is unchanged.
78
79`t3 theme clear` removes the default without changing anyone's current theme. `t3 theme show` lists
80the default and published themes.
81
82### Publish a theme
83
84Save a theme exported from T3 Code into `~/.t3/userdata/themes/` on the server, or the `themes`
85directory under your custom state directory. The filename supplies the theme ID: `nightfall.json`
86can be selected with `t3 theme set nightfall`. Keep the filename stable when updating its colors.
87Do not use `system`, `light`, `dark`, or a built-in theme's ID.
88
89For an integration that generates a palette, this shorter format also works:
90
92{
93 "name": "Nightfall",
94 "appearance": "dark",
95 "canvas": "#1a1b26",
96 "accent": "#7aa2f7",
97 "colors": {
98 "terminalSelection": "#292e42",
99 "error": "#f7768e"
100 }
101}
103
104Set `appearance` to `light` or `dark` and supply hex colors for `canvas` and `accent`. T3 Code
105generates the rest. The optional `colors` overrides use the names in the theme editor's advanced
106view.
107
108Write updates to a temporary file and rename it into place so clients never read a partial theme.
109Invalid files are not published.