let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract TUI syntax theme and fix changelog

Browse Source
This commit is contained in:
Peter Steinberger
2026-01-19 05:32:24 +00:00
parent dbcec3ffaf
commit 81d392a2d7
2 changed files with 54 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/tui/theme/syntax-theme.ts Normal file
View File

@@ -0,0 +1,52 @@
import chalk from "chalk";
type HighlightTheme = Record<string, (text: string) => string>;
/**
* Syntax highlighting theme for code blocks.
* Uses chalk functions to style different token types.
*/
export function createSyntaxTheme(fallback: (text: string) => string): HighlightTheme {
return {
keyword: chalk.hex("#C586C0"), // purple - if, const, function, etc.
built_in: chalk.hex("#4EC9B0"), // teal - console, Math, etc.
type: chalk.hex("#4EC9B0"), // teal - types
literal: chalk.hex("#569CD6"), // blue - true, false, null
number: chalk.hex("#B5CEA8"), // green - numbers
string: chalk.hex("#CE9178"), // orange - strings
regexp: chalk.hex("#D16969"), // red - regex
symbol: chalk.hex("#B5CEA8"), // green - symbols
class: chalk.hex("#4EC9B0"), // teal - class names
function: chalk.hex("#DCDCAA"), // yellow - function names
title: chalk.hex("#DCDCAA"), // yellow - titles/names
params: chalk.hex("#9CDCFE"), // light blue - parameters
comment: chalk.hex("#6A9955"), // green - comments
doctag: chalk.hex("#608B4E"), // darker green - jsdoc tags
meta: chalk.hex("#9CDCFE"), // light blue - meta/preprocessor
"meta-keyword": chalk.hex("#C586C0"), // purple
"meta-string": chalk.hex("#CE9178"), // orange
section: chalk.hex("#DCDCAA"), // yellow - sections
tag: chalk.hex("#569CD6"), // blue - HTML/XML tags
name: chalk.hex("#9CDCFE"), // light blue - tag names
attr: chalk.hex("#9CDCFE"), // light blue - attributes
attribute: chalk.hex("#9CDCFE"), // light blue - attributes
variable: chalk.hex("#9CDCFE"), // light blue - variables
bullet: chalk.hex("#D7BA7D"), // gold - list bullets in markdown
code: chalk.hex("#CE9178"), // orange - inline code
emphasis: chalk.italic, // italic
strong: chalk.bold, // bold
formula: chalk.hex("#C586C0"), // purple - math
link: chalk.hex("#4EC9B0"), // teal - links
quote: chalk.hex("#6A9955"), // green - quotes
addition: chalk.hex("#B5CEA8"), // green - diff additions
deletion: chalk.hex("#F44747"), // red - diff deletions
"selector-tag": chalk.hex("#D7BA7D"), // gold - CSS selectors
"selector-id": chalk.hex("#D7BA7D"), // gold
"selector-class": chalk.hex("#D7BA7D"), // gold
"selector-attr": chalk.hex("#D7BA7D"), // gold
"selector-pseudo": chalk.hex("#D7BA7D"), // gold
"template-tag": chalk.hex("#C586C0"), // purple
"template-variable": chalk.hex("#9CDCFE"), // light blue
default: fallback, // fallback to code color
};
}

48
src/tui/theme/theme.ts
View File

@@ -7,6 +7,7 @@ import type {
import chalk from "chalk"; import chalk from "chalk";
import { highlight, supportsLanguage } from "cli-highlight"; import { highlight, supportsLanguage } from "cli-highlight";
import type { SearchableSelectListTheme } from "../components/searchable-select-list.js"; import type { SearchableSelectListTheme } from "../components/searchable-select-list.js";
import { createSyntaxTheme } from "./syntax-theme.js";
const palette = { const palette = {
text: "#E8E3D5", text: "#E8E3D5",
@@ -35,52 +36,7 @@ const palette = {
const fg = (hex: string) => (text: string) => chalk.hex(hex)(text); const fg = (hex: string) => (text: string) => chalk.hex(hex)(text);
const bg = (hex: string) => (text: string) => chalk.bgHex(hex)(text); const bg = (hex: string) => (text: string) => chalk.bgHex(hex)(text);
/** const syntaxTheme = createSyntaxTheme(fg(palette.code));
* Syntax highlighting theme for code blocks.
* Uses chalk functions to style different token types.
*/
const syntaxTheme = {
keyword: chalk.hex("#C586C0"), // purple - if, const, function, etc.
built_in: chalk.hex("#4EC9B0"), // teal - console, Math, etc.
type: chalk.hex("#4EC9B0"), // teal - types
literal: chalk.hex("#569CD6"), // blue - true, false, null
number: chalk.hex("#B5CEA8"), // green - numbers
string: chalk.hex("#CE9178"), // orange - strings
regexp: chalk.hex("#D16969"), // red - regex
symbol: chalk.hex("#B5CEA8"), // green - symbols
class: chalk.hex("#4EC9B0"), // teal - class names
function: chalk.hex("#DCDCAA"), // yellow - function names
title: chalk.hex("#DCDCAA"), // yellow - titles/names
params: chalk.hex("#9CDCFE"), // light blue - parameters
comment: chalk.hex("#6A9955"), // green - comments
doctag: chalk.hex("#608B4E"), // darker green - jsdoc tags
meta: chalk.hex("#9CDCFE"), // light blue - meta/preprocessor
"meta-keyword": chalk.hex("#C586C0"), // purple
"meta-string": chalk.hex("#CE9178"), // orange
section: chalk.hex("#DCDCAA"), // yellow - sections
tag: chalk.hex("#569CD6"), // blue - HTML/XML tags
name: chalk.hex("#9CDCFE"), // light blue - tag names
attr: chalk.hex("#9CDCFE"), // light blue - attributes
attribute: chalk.hex("#9CDCFE"), // light blue - attributes
variable: chalk.hex("#9CDCFE"), // light blue - variables
bullet: chalk.hex("#D7BA7D"), // gold - list bullets in markdown
code: chalk.hex("#CE9178"), // orange - inline code
emphasis: chalk.italic, // italic
strong: chalk.bold, // bold
formula: chalk.hex("#C586C0"), // purple - math
link: chalk.hex("#4EC9B0"), // teal - links
quote: chalk.hex("#6A9955"), // green - quotes
addition: chalk.hex("#B5CEA8"), // green - diff additions
deletion: chalk.hex("#F44747"), // red - diff deletions
"selector-tag": chalk.hex("#D7BA7D"), // gold - CSS selectors
"selector-id": chalk.hex("#D7BA7D"), // gold
"selector-class": chalk.hex("#D7BA7D"), // gold
"selector-attr": chalk.hex("#D7BA7D"), // gold
"selector-pseudo": chalk.hex("#D7BA7D"), // gold
"template-tag": chalk.hex("#C586C0"), // purple
"template-variable": chalk.hex("#9CDCFE"), // light blue
default: fg(palette.code), // fallback to code color
};
/** /**
* Highlight code with syntax coloring. * Highlight code with syntax coloring.