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 stay on each device or browser unless you enable UI settings sync.
6
7On web and desktop, use **Change theme** in the command palette to select a theme without leaving chat.
8Press **Cmd+Option+A** on macOS or **Ctrl+Alt+A** on Windows/Linux to open the theme picker directly.
9Use **Change appearance** in the command palette to choose System, Light, or Dark independently of
10the theme. **Cmd+Option+Shift+A** on macOS or **Ctrl+Alt+Shift+A** on Windows/Linux cycles through
11those modes. Customize these shortcuts under **Settings → Keybindings**.
12
13On mobile, open **Settings → Appearance**. Mobile has its own themes and text,
14code, and terminal preferences. It does not follow environment themes or defaults.
15
16On Android 12 or newer, choose the **Material You** theme in Appearance to use colors from
17your wallpaper. Selecting another theme replaces those colors. Like other themes, Material You
18can be selected separately for light and dark appearances.
19Android uses **Material You Layout** by default unless you have turned it off in Appearance.
20It changes shapes, spacing, and controls independently
21of the selected theme.
22
23## Sync across devices
24
25On web or desktop, open **Settings → General → UI settings sync** and choose a private connected
26environment. Read its profile, then choose **Publish current** to save this device’s preferences
27or **Use saved** to adopt the existing profile. Repeat on each participating device using the same
28environment. Themes, custom palettes, fonts, and chat presentation follow the profile; window
29layout, credentials, permissions, and native integrations stay local. The personal profile takes
30precedence over environment theme defaults.
31
32Mobile joins from **Settings → Appearance → UI settings sync**. It shares follow-up behavior,
33project grouping, and the working shelf. Native themes and text sizes stay on the device.
34
35Changes made offline stay usable locally and sync when the profile environment reconnects. When
36two devices change the same preference from an older saved version, the newer saved choice wins.
37Change it again to use your choice. **Disable sync** keeps the current preferences on this device;
38choosing another environment starts the same publish-or-adopt flow.
39
40## Composer context
41
42Git-backed projects show branch and worktree controls below the composer while you create a thread.
43The controls retreat as the composer docks after you send the first message.
44
45Turn on **Composer context** to keep those controls visible after the thread starts. This preference
46applies to the web and desktop clients.
47
48## Motion
49
50The main sidebar, right panel, and terminal drawer open and close immediately by default. Move the
51**Panel animations** slider above 0 ms to add motion, up to 400 ms, unless reduced motion is enabled
52in your operating system. Moving between threads always snaps to the selected thread's panel state
53without replaying its transitions.
54
55## Custom themes
56
57On web and desktop, choose **Create theme** to adjust a palette, or import a T3 Code or VS Code
58theme. The theme editor's color picker lets you select an area of the app to find the color to
59change. Export your theme as JSON to share it.
60
61## Environment themes
62
63Environment themes and defaults come from the server serving your web app or the desktop app's
64main local environment. app.t3.codes and additional connections do not use them.
65
66Select a published theme in **Settings → Appearance** to follow its palette as the server updates
67it. **Duplicate** makes an independent copy you can edit. A saved custom theme with the same ID
68takes precedence. If the server stops publishing the selected theme, T3 Code falls back to its
69standard theme.
70
71Run this on the server to set a default and switch connected clients to it:
72
73```bash
74t3 theme set nightfall
75```
76
77Clients that are offline apply it when they reconnect. Each client applies the setting once;
78choosing another theme afterward sticks until the next `t3 theme set`. Run the command again to
79reapply it, even if the name is unchanged.
80
81`t3 theme clear` removes the default without changing anyone's current theme. `t3 theme show` lists
82the default and published themes.
83
84### Publish a theme
85
86Save a theme exported from T3 Code into `~/.t3/userdata/themes/` on the server, or the `themes`
87directory under your custom state directory. The filename supplies the theme ID: `nightfall.json`
88can be selected with `t3 theme set nightfall`. Keep the filename stable when updating its colors.
89Do not use `system`, `light`, `dark`, or a built-in theme's ID.
90
91For an integration that generates a palette, this shorter format also works:
92
93```json
94{
95 "name": "Nightfall",
96 "appearance": "dark",
97 "canvas": "#1a1b26",
98 "accent": "#7aa2f7",
99 "colors": {
100 "terminalSelection": "#292e42",
101 "error": "#f7768e"
102 }
103}
104```
105
106Set `appearance` to `light` or `dark` and supply hex colors for `canvas` and `accent`. T3 Code
107generates the rest. The optional `colors` overrides use the names in the theme editor's advanced
108view.
109
110Write updates to a temporary file and rename it into place so clients never read a partial theme.
111Invalid files are not published.