getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-21 14:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update tui.md theming section to show getMarkdownTheme usage

Browse source
This commit is contained in:
Mario Zechner 2025-12-31 13:06:52 +01:00
parent 20fbf40fac
commit feca0976eb
1 changed files with 22 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

47
packages/coding-agent/docs/tui.md
View file

@ -253,40 +253,37 @@ pi.registerCommand("pick", {
## Theming ## Theming
Components accept theme objects for styling. Use ANSI color functions (e.g., from `chalk` or pi's theme): Components accept theme objects for styling.
**In `renderCall`/`renderResult`**, use the `theme` parameter:
```typescript ```typescript
// In hooks, use the theme from renderResult/renderCall
renderResult(result, options, theme) { renderResult(result, options, theme) {
// Use theme for foreground colors
return new Text(theme.fg("success", "Done!"), 0, 0); return new Text(theme.fg("success", "Done!"), 0, 0);
} }
// For custom components, define your own theme interface
interface MyTheme {
selected: (s: string) => string;
normal: (s: string) => string;
}
``` ```
### MarkdownTheme Available theme colors: `"toolTitle"`, `"accent"`, `"success"`, `"error"`, `"warning"`, `"muted"`, `"dim"`, `"toolOutput"`.
**For Markdown**, use `getMarkdownTheme()`:
```typescript ```typescript
interface MarkdownTheme { import { getMarkdownTheme } from "@mariozechner/pi-coding-agent";
heading: (text: string) => string; import { Markdown } from "@mariozechner/pi-tui";
link: (text: string) => string;
linkUrl: (text: string) => string; renderResult(result, options, theme) {
code: (text: string) => string; const mdTheme = getMarkdownTheme();
codeBlock: (text: string) => string; return new Markdown(result.details.markdown, 0, 0, mdTheme);
codeBlockBorder: (text: string) => string; }
quote: (text: string) => string; ```
quoteBorder: (text: string) => string;
hr: (text: string) => string; **For custom components**, define your own theme interface:
listBullet: (text: string) => string;
bold: (text: string) => string; ```typescript
italic: (text: string) => string; interface MyTheme {
strikethrough: (text: string) => string; selected: (s: string) => string;
underline: (text: string) => string; normal: (s: string) => string;
highlightCode?: (code: string, lang?: string) => string[];
} }
``` ```