872b0adb48
Split flat docs/ into user-docs/ (guides, config, troubleshooting) and dev/ (ADRs, architecture, extension guides, proposals). Updated docs/README.md index to reflect new paths.
49 lines
1.3 KiB
Markdown
49 lines
1.3 KiB
Markdown
# Theme Changes and Invalidation
|
|
|
|
When the user switches themes, the TUI calls `invalidate()` on all components. If your component pre-bakes theme colors, you must rebuild them.
|
|
|
|
### ❌ Wrong — Theme Colors Won't Update
|
|
|
|
```typescript
|
|
class BadComponent extends Container {
|
|
constructor(message: string, theme: Theme) {
|
|
super();
|
|
// Pre-baked theme colors — stuck with old theme forever!
|
|
this.addChild(new Text(theme.fg("accent", message), 1, 0));
|
|
}
|
|
}
|
|
```
|
|
|
|
### ✅ Correct — Rebuild on Invalidate
|
|
|
|
```typescript
|
|
class GoodComponent extends Container {
|
|
private message: string;
|
|
private theme: Theme;
|
|
|
|
constructor(message: string, theme: Theme) {
|
|
super();
|
|
this.message = message;
|
|
this.theme = theme;
|
|
this.rebuild();
|
|
}
|
|
|
|
private rebuild(): void {
|
|
this.clear(); // Remove all children
|
|
this.addChild(new Text(this.theme.fg("accent", this.message), 1, 0));
|
|
}
|
|
|
|
override invalidate(): void {
|
|
super.invalidate();
|
|
this.rebuild(); // Rebuild with current theme
|
|
}
|
|
}
|
|
```
|
|
|
|
### When You Need This Pattern
|
|
|
|
**NEED to rebuild:** Pre-baked `theme.fg()`/`theme.bg()` strings, `highlightCode()` results, complex child trees with embedded colors.
|
|
|
|
**DON'T need to rebuild:** Theme callbacks `(text) => theme.fg("accent", text)`, stateless renders that compute fresh each time, simple containers without themed content.
|
|
|
|
---
|