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