Skip to content

Latest commit

 

History

History
142 lines (107 loc) · 7.02 KB

appearance.md

File metadata and controls

142 lines (107 loc) · 7.02 KB

Appearance and themes

On web and desktop, open Settings → Appearance to choose a theme and follow the system appearance or stay in light or dark mode. To use different themes for light and dark mode, select the corresponding preview within each theme. Appearance preferences are saved separately on each device or browser.

On web and desktop, use Change theme in the command palette to select a theme without leaving chat. Press Cmd+Option+A on macOS or Ctrl+Alt+A on Windows/Linux to open the theme picker directly. Use Change appearance in the command palette to choose System, Light, or Dark independently of the theme. Cmd+Option+Shift+A on macOS or Ctrl+Alt+Shift+A on Windows/Linux cycles through those modes. Customize these shortcuts under Settings → Keybindings.

On mobile, open Settings → Appearance. Mobile has its own themes and text, code, and terminal preferences. Themes shared by your connected environments appear alongside them; mobile does not follow an environment's default theme. Choose Create theme to make a theme from a background and accent color, or the pencil on a shared theme to edit or delete it. Themes made or edited on mobile are shared with every device connected to your environments. Contrast works as it does on desktop and is set separately on each device.

On Android 12 or newer, choose the Material You theme in Appearance to use colors from your wallpaper. Selecting another theme replaces those colors. Like other themes, Material You can be selected separately for light and dark appearances. Android uses Material You Layout by default unless you have turned it off in Appearance. It changes shapes, spacing, and controls independently of the selected theme.

Composer context

Git-backed projects show branch and worktree controls below the composer while you create a thread. The controls retreat as the composer docks after you send the first message.

Turn on Composer context to keep those controls visible after the thread starts. This preference applies to the web and desktop clients.

Math

Turn on Render math in Settings → Appearance to typeset LaTeX in messages and Markdown previews on web, desktop, and mobile. It reads $…$, $$…$$, \(…\), and \[…\], outside of code. Fenced math blocks also render. Formulas work in tables, including absolute-value bars. Dollar amounts such as $5 and $10 stay text; write \$ to keep any other dollar sign literal. Wide formulas scroll horizontally while the surrounding text wraps. Copying a formula or exporting a table preserves the TeX.

The composer keeps TeX source editable, including when rich text is enabled. The Render math preference is saved separately on each device.

Motion

The main sidebar, right panel, and terminal drawer open and close immediately by default. Move the Panel animations slider above 0 ms to add motion, up to 400 ms, unless reduced motion is enabled in your operating system. Moving between threads always snaps to the selected thread's panel state without replaying its transitions.

Custom themes

On web and desktop, choose Create theme to adjust a palette, or import a T3 Code or VS Code theme. The theme editor's color picker lets you select an area of the app to find the color to change. Export your theme as JSON to share it.

Themes also carry the terminal's 16 ANSI colors. Importing a VS Code theme brings its terminal.ansi* colors, and the editor's advanced view lists them under Terminal colors.

Share a custom theme

To use a custom theme on your other devices, choose Share (the cloud icon) on its card. This publishes it to the environment the app runs on, so every web, desktop, and mobile client of that environment can select it. After editing a shared theme, choose Share again to update the shared copy. Stop sharing removes it from other clients' lists. Mobile keeps a copy of a shared theme you select, so it still applies offline.

Edits made to a shared theme on another device replace your copy, unless you have changed your copy since it was last shared; then its card offers to update the shared copy instead.

Sync your theme across devices

Turn on Sync theme across devices in Settings → Appearance on each device that should match. Picking a theme on any of them switches the others, including separate light and dark choices; System, Light, or Dark mode stays per device. Picking a custom theme shares it. A device that cannot show the picked theme, such as Material You on desktop, keeps its own for that appearance. When you turn sync on, the device adopts the current synced theme, or starts the sync with its own if there is none.

Terminal

On web and desktop, set Terminal font in Settings → Appearance with Advanced typography turned on. Terminal line height sets the row height as a multiple of the font size; VS Code and Cursor multiply the font's natural line height instead, so the same number gives shorter rows here. Terminal cursor chooses a block, bar, or underline cursor. Programs that set their own cursor shape, such as an editor's insert mode, still take priority.

Environment themes

Environment themes and defaults come from the server serving your web app or the desktop app's main local environment. app.t3.codes and additional connections do not use them.

Select a published theme in Settings → Appearance to follow its palette as the server updates it. Duplicate makes an independent copy you can edit. A saved custom theme with the same ID takes precedence. If the server stops publishing the selected theme, T3 Code falls back to its standard theme.

Run this on the server to set a default and switch connected clients to it:

t3 theme set nightfall

Clients that are offline apply it when they reconnect. Each client applies the setting once; choosing another theme afterward sticks until the next t3 theme set. Run the command again to reapply it, even if the name is unchanged.

t3 theme clear removes the default without changing anyone's current theme. t3 theme show lists the default and published themes.

Publish a theme

Save a theme exported from T3 Code into ~/.t3/userdata/themes/ on the server, or the themes directory under your custom state directory. The filename supplies the theme ID: nightfall.json can be selected with t3 theme set nightfall. Keep the filename stable when updating its colors. Do not use system, light, dark, or a built-in theme's ID.

For an integration that generates a palette, this shorter format also works:

{
  "name": "Nightfall",
  "appearance": "dark",
  "canvas": "#1a1b26",
  "accent": "#7aa2f7",
  "colors": {
    "terminalSelection": "#292e42",
    "error": "#f7768e"
  }
}

Set appearance to light or dark and supply hex colors for canvas and accent. T3 Code generates the rest. The optional colors overrides use the names in the theme editor's advanced view.

Write updates to a temporary file and rename it into place so clients never read a partial theme. Invalid files are not published.