@kitlangton/ghui 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.1.11",
+	"version": "0.1.12",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",

package/src/App.tsx

@@ -11,12 +11,12 @@ import { formatShortDate, formatTimestamp } from "./date.js"
 import { availableMergeActions, mergeInfoFromPullRequest } from "./mergeActions.js"
 import { Observability } from "./observability.js"
 import { GitHubService } from "./services/GitHubService.js"
-import { colors } from "./ui/colors.js"
+import { colors, setActiveTheme, themeDefinitions, type ThemeId } from "./ui/colors.js"
 import { pullRequestDiffKey, splitPatchFiles, type PullRequestDiffState } from "./ui/diff.js"
 import { DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailBodyHeight, getDetailHeaderHeight, getDetailJunctionRows, getDetailsPaneHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
 import { FooterHints, type RetryProgress } from "./ui/FooterHints.js"
 import { Divider, fitCell, PlainLine, SeparatorColumn } from "./ui/primitives.js"
-import { initialLabelModalState, initialMergeModalState, LabelModal, MergeModal } from "./ui/modals.js"
+import { initialLabelModalState, initialMergeModalState, initialThemeModalState, LabelModal, MergeModal, ThemeModal } from "./ui/modals.js"
 import { groupBy, reviewLabel } from "./ui/pullRequests.js"
 import { PullRequestDiffPane } from "./ui/PullRequestDiffPane.js"
 import { PullRequestList } from "./ui/PullRequestList.js"
@@ -81,6 +81,8 @@ const pullRequestDiffCacheAtom = Atom.make<Record<string, PullRequestDiffState>>
 
 const labelModalAtom = Atom.make(initialLabelModalState).pipe(Atom.keepAlive)
 const mergeModalAtom = Atom.make(initialMergeModalState).pipe(Atom.keepAlive)
+const themeIdAtom = Atom.make<ThemeId>("ghui").pipe(Atom.keepAlive)
+const themeModalAtom = Atom.make(initialThemeModalState).pipe(Atom.keepAlive)
 const labelCacheAtom = Atom.make<Record<string, readonly PullRequestLabel[]>>({}).pipe(Atom.keepAlive)
 const pullRequestOverridesAtom = Atom.make<Record<string, PullRequestItem>>({}).pipe(Atom.keepAlive)
 const usernameAtom = githubRuntime.atom(
@@ -118,6 +120,64 @@ const deleteLastWord = (value: string) => value.replace(/\s*\S+\s*$/, "")
 
 const errorMessage = (error: unknown) => error instanceof Error ? error.message : String(error)
 
+const clipboardCommands = (): readonly (readonly string[])[] => {
+	if (process.platform === "darwin") return [["pbcopy"]]
+	if (process.platform === "linux") {
+		return [
+			...(process.env.WAYLAND_DISPLAY ? [["wl-copy"]] : []),
+			["xclip", "-selection", "clipboard"],
+			["xsel", "--clipboard", "--input"],
+		]
+	}
+	return []
+}
+
+const copyToClipboard = async (text: string) => {
+	const commands = clipboardCommands()
+	let lastError = ""
+
+	for (const command of commands) {
+		let proc: Bun.Subprocess<"pipe", "ignore", "pipe">
+		try {
+			proc = Bun.spawn({
+				cmd: [...command],
+				stdin: "pipe",
+				stdout: "ignore",
+				stderr: "pipe",
+			})
+		} catch (error) {
+			lastError = errorMessage(error)
+			continue
+		}
+
+		proc.stdin.write(text)
+		proc.stdin.end()
+
+		const exitCode = await proc.exited
+		if (exitCode === 0) return
+
+		const stderr = await Bun.readableStreamToText(proc.stderr)
+		lastError = stderr.trim()
+	}
+
+	const installHint = process.platform === "linux" ? " Install wl-clipboard, xclip, or xsel." : ""
+	throw new Error(lastError || `Clipboard is not available.${installHint}`)
+}
+
+const openPullRequestInBrowser = async (pullRequest: PullRequestItem) => {
+	const proc = Bun.spawn({
+		cmd: ["gh", "pr", "view", String(pullRequest.number), "--repo", pullRequest.repository, "--web"],
+		stdout: "ignore",
+		stderr: "pipe",
+	})
+
+	const exitCode = await proc.exited
+	if (exitCode === 0) return
+
+	const stderr = await Bun.readableStreamToText(proc.stderr)
+	throw new Error(stderr.trim() || "Could not open PR in browser")
+}
+
 const copyPullRequestMetadata = async (pullRequest: PullRequestItem) => {
 	const lines = [
 		pullRequest.title,
@@ -133,29 +193,13 @@ const copyPullRequestMetadata = async (pullRequest: PullRequestItem) => {
 		lines.push(pullRequest.checkSummary)
 	}
 
-	const proc = Bun.spawn({
-		cmd: ["pbcopy"],
-		stdin: "pipe",
-		stdout: "ignore",
-		stderr: "pipe",
-	})
-
-	if (!proc.stdin) {
-		throw new Error("Clipboard is not available")
-	}
-
-	proc.stdin.write(lines.join("\n"))
-	proc.stdin.end()
-
-	const exitCode = await proc.exited
-	if (exitCode !== 0) {
-		const stderr = await Bun.readableStreamToText(proc.stderr)
-		throw new Error(stderr.trim() || "Could not copy PR metadata")
-	}
+	await copyToClipboard(lines.join("\n"))
 }
 
 const isShiftG = (key: { readonly name: string; readonly shift?: boolean }) => key.name === "G" || key.name === "g" && key.shift
 
+const isShiftT = (key: { readonly name: string; readonly shift?: boolean }) => key.name === "T" || key.name === "t" && key.shift
+
 const getDetailPlaceholderContent = ({
 	status,
 	retryProgress,
@@ -217,6 +261,9 @@ export const App = () => {
 	const [pullRequestDiffCache, setPullRequestDiffCache] = useAtom(pullRequestDiffCacheAtom)
 	const [labelModal, setLabelModal] = useAtom(labelModalAtom)
 	const [mergeModal, setMergeModal] = useAtom(mergeModalAtom)
+	const [themeId, setThemeId] = useAtom(themeIdAtom)
+	const [themeModal, setThemeModal] = useAtom(themeModalAtom)
+	setActiveTheme(themeId)
 	const [labelCache, setLabelCache] = useAtom(labelCacheAtom)
 	const [pullRequestOverrides, setPullRequestOverrides] = useAtom(pullRequestOverridesAtom)
 	const retryProgress = useAtomValue(retryProgressAtom)
@@ -266,6 +313,10 @@ export const App = () => {
 		}, 2500)
 	}
 
+	useEffect(() => {
+		renderer.setBackgroundColor(colors.background)
+	}, [renderer, themeId])
+
 	useEffect(() => () => {
 		if (noticeTimeoutRef.current !== null) {
 			clearTimeout(noticeTimeoutRef.current)
@@ -495,9 +546,44 @@ export const App = () => {
 		loadPullRequestDiff(selectedPullRequest)
 	}
 
+	const openSelectedPullRequestInBrowser = (pullRequest: PullRequestItem) => {
+		void openPullRequestInBrowser(pullRequest)
+			.then(() => flashNotice(`Opened #${pullRequest.number} in browser`))
+			.catch((error) => flashNotice(errorMessage(error)))
+	}
+
+	const openThemeModal = () => {
+		setLabelModal(initialLabelModalState)
+		setMergeModal(initialMergeModalState)
+		setThemeModal({
+			open: true,
+			selectedIndex: Math.max(0, themeDefinitions.findIndex((theme) => theme.id === themeId)),
+			initialThemeId: themeId,
+		})
+	}
+
+	const closeThemeModal = (confirm: boolean) => {
+		const selectedTheme = themeDefinitions[themeModal.selectedIndex]
+		if (!confirm) {
+			setThemeId(themeModal.initialThemeId)
+		} else if (selectedTheme) {
+			flashNotice(`Theme: ${selectedTheme.name}`)
+		}
+		setThemeModal(initialThemeModalState)
+	}
+
+	const moveThemeSelection = (delta: number) => {
+		const selectedIndex = Math.max(0, Math.min(themeDefinitions.length - 1, themeModal.selectedIndex + delta))
+		if (selectedIndex === themeModal.selectedIndex) return
+		const theme = themeDefinitions[selectedIndex]
+		if (theme && theme.id !== themeId) setThemeId(theme.id)
+		setThemeModal((current) => ({ ...current, selectedIndex }))
+	}
+
 	const openLabelModal = () => {
 		if (!selectedPullRequest) return
 		setMergeModal(initialMergeModalState)
+		setThemeModal(initialThemeModalState)
 		const repository = selectedPullRequest.repository
 		const cachedLabels = labelCache[repository]
 		if (cachedLabels) {
@@ -526,6 +612,7 @@ export const App = () => {
 
 	const openMergeModal = () => {
 		if (!selectedPullRequest) return
+		setThemeModal(initialThemeModalState)
 		const repository = selectedPullRequest.repository
 		const number = selectedPullRequest.number
 		const seededInfo = mergeInfoFromPullRequest(selectedPullRequest)
@@ -627,6 +714,10 @@ export const App = () => {
 
 	useKeyboard((key) => {
 		if (key.name === "q" || (key.ctrl && key.name === "c")) {
+			if (themeModal.open) {
+				closeThemeModal(false)
+				return
+			}
 			if (mergeModal.open) {
 				setMergeModal(initialMergeModalState)
 				return
@@ -639,6 +730,26 @@ export const App = () => {
 			return
 		}
 
+		if (themeModal.open) {
+			if (key.name === "escape") {
+				closeThemeModal(false)
+				return
+			}
+			if (key.name === "return" || key.name === "enter") {
+				closeThemeModal(true)
+				return
+			}
+			if (key.name === "up" || key.name === "k") {
+				moveThemeSelection(-1)
+				return
+			}
+			if (key.name === "down" || key.name === "j") {
+				moveThemeSelection(1)
+				return
+			}
+			return
+		}
+
 		if (mergeModal.open) {
 			const options = availableMergeActions(mergeModal.info)
 			if (key.name === "escape") {
@@ -803,8 +914,7 @@ export const App = () => {
 				return
 			}
 			if (key.name === "o" && selectedPullRequest) {
-				void Bun.spawn({ cmd: ["open", selectedPullRequest.url], stdout: "ignore", stderr: "ignore" })
-				flashNotice(`Opened #${selectedPullRequest.number} in browser`)
+				openSelectedPullRequestInBrowser(selectedPullRequest)
 				return
 			}
 			return
@@ -881,8 +991,7 @@ export const App = () => {
 				return
 			}
 			if (key.name === "o" && selectedPullRequest) {
-				void Bun.spawn({ cmd: ["open", selectedPullRequest.url], stdout: "ignore", stderr: "ignore" })
-				flashNotice(`Opened #${selectedPullRequest.number} in browser`)
+				openSelectedPullRequestInBrowser(selectedPullRequest)
 				return
 			}
 			if (key.name === "y" && selectedPullRequest) {
@@ -923,6 +1032,11 @@ export const App = () => {
 			}
 		}
 
+		if (isShiftT(key)) {
+			openThemeModal()
+			return
+		}
+
 		if (key.name === "/") {
 			setFilterDraft(filterQuery)
 			setFilterMode(true)
@@ -1037,8 +1151,7 @@ export const App = () => {
 			return
 		}
 		if (key.name === "o" && selectedPullRequest) {
-			void Bun.spawn({ cmd: ["open", selectedPullRequest.url], stdout: "ignore", stderr: "ignore" })
-			flashNotice(`Opened #${selectedPullRequest.number} in browser`)
+			openSelectedPullRequestInBrowser(selectedPullRequest)
 			return
 		}
 		if ((key.name === "s" || key.name === "S") && selectedPullRequest) {
@@ -1108,10 +1221,14 @@ export const App = () => {
 	const mergeModalHeight = Math.min(16, (height ?? 24) - 4)
 	const mergeModalLeft = Math.floor((contentWidth - mergeModalWidth) / 2)
 	const mergeModalTop = Math.floor(((height ?? 24) - mergeModalHeight) / 2)
+	const themeModalWidth = Math.min(58, Math.max(38, contentWidth - 12))
+	const themeModalHeight = Math.min(10, (height ?? 24) - 4)
+	const themeModalLeft = Math.floor((contentWidth - themeModalWidth) / 2)
+	const themeModalTop = Math.floor(((height ?? 24) - themeModalHeight) / 2)
 
 	return (
-		<box flexGrow={1} flexDirection="column">
-			<box paddingLeft={1} paddingRight={1} flexDirection="column">
+		<box flexGrow={1} flexDirection="column" backgroundColor={colors.background}>
+			<box paddingLeft={1} paddingRight={1} flexDirection="column" backgroundColor={colors.panel}>
 				<PlainLine text={headerLine} fg={colors.muted} bold />
 			</box>
 			{isWideLayout && !detailFullView && !diffFullView && !isInitialLoading ? (
@@ -1132,6 +1249,7 @@ export const App = () => {
 					height={wideBodyHeight}
 					loadingIndicator={loadingIndicator}
 					scrollRef={diffScrollRef}
+					themeId={themeId}
 				/>
 			) : isWideLayout && detailFullView ? (
 				<box flexGrow={1} flexDirection="column">
@@ -1200,7 +1318,7 @@ export const App = () => {
 			) : (
 				<Divider width={contentWidth} />
 			)}
-			<box paddingLeft={1} paddingRight={1}>
+			<box paddingLeft={1} paddingRight={1} backgroundColor={colors.panel}>
 				{footerNotice ? (
 					<PlainLine text={footerNotice} fg={colors.count} />
 				) : (
@@ -1238,6 +1356,16 @@ export const App = () => {
 					loadingIndicator={loadingIndicator}
 				/>
 			) : null}
+			{themeModal.open ? (
+				<ThemeModal
+					state={themeModal}
+					activeThemeId={themeId}
+					modalWidth={themeModalWidth}
+					modalHeight={themeModalHeight}
+					offsetLeft={themeModalLeft}
+					offsetTop={themeModalTop}
+				/>
+			) : null}
 		</box>
 	)
 }

package/src/ui/FooterHints.tsx

@@ -86,6 +86,8 @@ export const FooterHints = ({
 		<TextLine>
 			<span fg={colors.count}>/</span>
 			<span fg={colors.muted}> filter  </span>
+			<span fg={colors.count}>T</span>
+			<span fg={colors.muted}> theme  </span>
 			{showFilterClear ? (
 				<>
 					<span fg={colors.count}>esc</span>

package/src/ui/PullRequestDiffPane.tsx

@@ -1,8 +1,8 @@
 import type { ScrollBoxRenderable } from "@opentui/core"
 import { useMemo, type Ref } from "react"
 import type { PullRequestItem } from "../domain.js"
-import { colors } from "./colors.js"
-import { diffStatText, diffSyntaxStyle, patchRenderableLineCount, type PullRequestDiffState } from "./diff.js"
+import { colors, type ThemeId } from "./colors.js"
+import { createDiffSyntaxStyle, diffStatText, patchRenderableLineCount, type PullRequestDiffState } from "./diff.js"
 import { LoadingPane, StatusCard } from "./DetailsPane.js"
 import { Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
 import { shortRepoName } from "./pullRequests.js"
@@ -37,6 +37,7 @@ export const PullRequestDiffPane = ({
 	height,
 	loadingIndicator,
 	scrollRef,
+	themeId,
 }: {
 	pullRequest: PullRequestItem | null
 	diffState: PullRequestDiffState | undefined
@@ -47,6 +48,7 @@ export const PullRequestDiffPane = ({
 	height: number
 	loadingIndicator: string
 	scrollRef: Ref<ScrollBoxRenderable>
+	themeId: ThemeId
 }) => {
 	const readyFiles = diffState?.status === "ready" ? diffState.files : []
 	const safeIndex = readyFiles.length > 0 ? Math.max(0, Math.min(fileIndex, readyFiles.length - 1)) : 0
@@ -55,6 +57,7 @@ export const PullRequestDiffPane = ({
 		() => file ? patchRenderableLineCount(file.patch, view, wrapMode, paneWidth) : 1,
 		[file?.patch, view, wrapMode, paneWidth],
 	)
+	const syntaxStyle = useMemo(() => createDiffSyntaxStyle(), [themeId])
 
 	if (!pullRequest) {
 		return <LoadingPane content={{ title: "No pull request selected", hint: "Press esc to go back" }} width={paneWidth} height={height} />
@@ -125,18 +128,18 @@ export const PullRequestDiffPane = ({
 					view={view}
 					syncScroll
 					filetype={file.filetype ?? "text"}
-					syntaxStyle={diffSyntaxStyle}
+					syntaxStyle={syntaxStyle}
 					showLineNumbers
 					wrapMode={wrapMode}
-					addedBg="#17351f"
-					removedBg="#3a1e22"
-					contextBg="transparent"
+					addedBg={colors.diff.addedBg}
+					removedBg={colors.diff.removedBg}
+					contextBg={colors.diff.contextBg}
 					addedSignColor={colors.status.passing}
 					removedSignColor={colors.status.failing}
 					lineNumberFg={colors.muted}
-					lineNumberBg="#151515"
-					addedLineNumberBg="#12301a"
-					removedLineNumberBg="#35171b"
+					lineNumberBg={colors.diff.lineNumberBg}
+					addedLineNumberBg={colors.diff.addedLineNumberBg}
+					removedLineNumberBg={colors.diff.removedLineNumberBg}
 					selectionBg={colors.selectedBg}
 					selectionFg={colors.selectedText}
 					height={diffHeight}

package/src/ui/colors.ts

@@ -1,4 +1,56 @@
-export const colors = {
+export type ThemeId = "ghui" | "tokyo-night" | "opencode"
+
+export interface ColorPalette {
+	readonly background: string
+	readonly panel: string
+	readonly modalBackground: string
+	readonly text: string
+	readonly muted: string
+	readonly separator: string
+	readonly accent: string
+	readonly inlineCode: string
+	readonly error: string
+	readonly selectedBg: string
+	readonly selectedText: string
+	readonly count: string
+	readonly status: {
+		readonly draft: string
+		readonly approved: string
+		readonly changes: string
+		readonly review: string
+		readonly none: string
+		readonly passing: string
+		readonly pending: string
+		readonly failing: string
+	}
+	readonly repos: {
+		readonly opencode: string
+		readonly "effect-smol": string
+		readonly "opencode-console": string
+		readonly opencontrol: string
+		readonly default: string
+	}
+	readonly diff: {
+		readonly addedBg: string
+		readonly removedBg: string
+		readonly contextBg: string
+		readonly lineNumberBg: string
+		readonly addedLineNumberBg: string
+		readonly removedLineNumberBg: string
+	}
+}
+
+export interface ThemeDefinition {
+	readonly id: ThemeId
+	readonly name: string
+	readonly description: string
+	readonly colors: ColorPalette
+}
+
+const ghuiColors: ColorPalette = {
+	background: "#111018",
+	panel: "#161923",
+	modalBackground: "#1a1a2e",
 	text: "#ede7da",
 	muted: "#9f9788",
 	separator: "#6f685d",
@@ -25,4 +77,109 @@ export const colors = {
 		opencontrol: "#f59e0b",
 		default: "#93c5fd",
 	},
-} as const
+	diff: {
+		addedBg: "#17351f",
+		removedBg: "#3a1e22",
+		contextBg: "transparent",
+		lineNumberBg: "#151515",
+		addedLineNumberBg: "#12301a",
+		removedLineNumberBg: "#35171b",
+	},
+}
+
+const tokyoNightColors: ColorPalette = {
+	background: "#1a1b26",
+	panel: "#16161e",
+	modalBackground: "#24283b",
+	text: "#c0caf5",
+	muted: "#787c99",
+	separator: "#3b4261",
+	accent: "#7aa2f7",
+	inlineCode: "#bb9af7",
+	error: "#f7768e",
+	selectedBg: "#283457",
+	selectedText: "#ffffff",
+	count: "#ff9e64",
+	status: {
+		draft: "#e0af68",
+		approved: "#9ece6a",
+		changes: "#f7768e",
+		review: "#7dcfff",
+		none: "#787c99",
+		passing: "#9ece6a",
+		pending: "#e0af68",
+		failing: "#f7768e",
+	},
+	repos: {
+		opencode: "#7aa2f7",
+		"effect-smol": "#9ece6a",
+		"opencode-console": "#bb9af7",
+		opencontrol: "#ff9e64",
+		default: "#7dcfff",
+	},
+	diff: {
+		addedBg: "#203326",
+		removedBg: "#3a222c",
+		contextBg: "transparent",
+		lineNumberBg: "#16161e",
+		addedLineNumberBg: "#1b2f23",
+		removedLineNumberBg: "#33202a",
+	},
+}
+
+const opencodeColors: ColorPalette = {
+	background: "#0a0a0a",
+	panel: "#141414",
+	modalBackground: "#1e1e1e",
+	text: "#eeeeee",
+	muted: "#808080",
+	separator: "#484848",
+	accent: "#fab283",
+	inlineCode: "#7fd88f",
+	error: "#e06c75",
+	selectedBg: "#323232",
+	selectedText: "#eeeeee",
+	count: "#fab283",
+	status: {
+		draft: "#f5a742",
+		approved: "#7fd88f",
+		changes: "#e06c75",
+		review: "#5c9cf5",
+		none: "#808080",
+		passing: "#7fd88f",
+		pending: "#f5a742",
+		failing: "#e06c75",
+	},
+	repos: {
+		opencode: "#fab283",
+		"effect-smol": "#7fd88f",
+		"opencode-console": "#9d7cd8",
+		opencontrol: "#f5a742",
+		default: "#5c9cf5",
+	},
+	diff: {
+		addedBg: "#20303b",
+		removedBg: "#37222c",
+		contextBg: "transparent",
+		lineNumberBg: "#141414",
+		addedLineNumberBg: "#1b2b34",
+		removedLineNumberBg: "#2d1f26",
+	},
+}
+
+export const themeDefinitions: readonly ThemeDefinition[] = [
+	{ id: "ghui", name: "GHUI", description: "Warm parchment accents on a deep slate background", colors: ghuiColors },
+	{ id: "tokyo-night", name: "Tokyo Night", description: "Cool indigo surfaces with neon editor accents", colors: tokyoNightColors },
+	{ id: "opencode", name: "OpenCode", description: "Charcoal panels with peach, violet, and blue highlights", colors: opencodeColors },
+] as const
+
+let activeTheme = themeDefinitions[0]!
+
+export const colors: ColorPalette = { ...ghuiColors }
+
+export const getThemeDefinition = (id: ThemeId) => themeDefinitions.find((theme) => theme.id === id) ?? themeDefinitions[0]!
+
+export const setActiveTheme = (id: ThemeId) => {
+	activeTheme = getThemeDefinition(id)
+	Object.assign(colors, activeTheme.colors)
+}

package/src/ui/diff.ts

@@ -13,21 +13,21 @@ export type PullRequestDiffState =
 	| { readonly status: "ready"; readonly patch: string; readonly files: readonly DiffFilePatch[] }
 	| { readonly status: "error"; readonly error: string }
 
-export const diffSyntaxStyle = SyntaxStyle.fromStyles({
-	keyword: { fg: parseColor("#f4a51c"), bold: true },
-	"keyword.import": { fg: parseColor("#f4a51c"), bold: true },
-	string: { fg: parseColor("#d7c5a1") },
+export const createDiffSyntaxStyle = () => SyntaxStyle.fromStyles({
+	keyword: { fg: parseColor(colors.accent), bold: true },
+	"keyword.import": { fg: parseColor(colors.accent), bold: true },
+	string: { fg: parseColor(colors.inlineCode) },
 	comment: { fg: parseColor(colors.muted), italic: true },
-	number: { fg: parseColor("#93c5fd") },
-	boolean: { fg: parseColor("#93c5fd") },
-	constant: { fg: parseColor("#93c5fd") },
-	function: { fg: parseColor("#7dd3a3") },
-	"function.call": { fg: parseColor("#7dd3a3") },
-	constructor: { fg: parseColor("#f59e0b") },
-	type: { fg: parseColor("#f59e0b") },
-	operator: { fg: parseColor("#f87171") },
+	number: { fg: parseColor(colors.status.review) },
+	boolean: { fg: parseColor(colors.status.review) },
+	constant: { fg: parseColor(colors.status.review) },
+	function: { fg: parseColor(colors.status.passing) },
+	"function.call": { fg: parseColor(colors.status.passing) },
+	constructor: { fg: parseColor(colors.status.draft) },
+	type: { fg: parseColor(colors.status.draft) },
+	operator: { fg: parseColor(colors.status.failing) },
 	variable: { fg: parseColor(colors.text) },
-	property: { fg: parseColor("#93c5fd") },
+	property: { fg: parseColor(colors.status.review) },
 	bracket: { fg: parseColor(colors.text) },
 	punctuation: { fg: parseColor(colors.text) },
 	default: { fg: parseColor(colors.text) },

package/src/ui/modals.tsx

@@ -1,7 +1,7 @@
 import { TextAttributes } from "@opentui/core"
 import type { PullRequestLabel, PullRequestMergeInfo } from "../domain.js"
 import { availableMergeActions } from "../mergeActions.js"
-import { colors } from "./colors.js"
+import { colors, themeDefinitions, type ThemeId } from "./colors.js"
 import { centerCell, Divider, fitCell, ModalFrame, PlainLine, TextLine } from "./primitives.js"
 import { labelColor, shortRepoName } from "./pullRequests.js"
 
@@ -25,6 +25,12 @@ export interface MergeModalState {
 	readonly error: string | null
 }
 
+export interface ThemeModalState {
+	readonly open: boolean
+	readonly selectedIndex: number
+	readonly initialThemeId: ThemeId
+}
+
 export const initialLabelModalState: LabelModalState = {
 	open: false,
 	repository: null,
@@ -45,6 +51,12 @@ export const initialMergeModalState: MergeModalState = {
 	error: null,
 }
 
+export const initialThemeModalState: ThemeModalState = {
+	open: false,
+	selectedIndex: 0,
+	initialThemeId: "ghui",
+}
+
 const mergeUnavailableReason = (info: PullRequestMergeInfo | null) => {
 	if (!info) return "Loading merge status from GitHub."
 	if (info.state !== "open") return "This pull request is not open."
@@ -247,3 +259,85 @@ export const MergeModal = ({
 		</ModalFrame>
 	)
 }
+
+export const ThemeModal = ({
+	state,
+	activeThemeId,
+	modalWidth,
+	modalHeight,
+	offsetLeft,
+	offsetTop,
+}: {
+	state: ThemeModalState
+	activeThemeId: ThemeId
+	modalWidth: number
+	modalHeight: number
+	offsetLeft: number
+	offsetTop: number
+}) => {
+	const innerWidth = Math.max(16, modalWidth - 2)
+	const contentWidth = Math.max(14, innerWidth - 2)
+	const rowWidth = innerWidth
+	const maxVisible = Math.max(1, modalHeight - 7)
+	const selectedIndex = Math.max(0, Math.min(state.selectedIndex, themeDefinitions.length - 1))
+	const selectedTheme = themeDefinitions[selectedIndex]!
+	const scrollStart = Math.min(
+		Math.max(0, themeDefinitions.length - maxVisible),
+		Math.max(0, selectedIndex - maxVisible + 1),
+	)
+	const visibleThemes = themeDefinitions.slice(scrollStart, scrollStart + maxVisible)
+	const countText = `${selectedIndex + 1}/${themeDefinitions.length}`
+	const title = "Themes"
+	const headerGap = Math.max(1, contentWidth - title.length - countText.length)
+
+	return (
+		<ModalFrame left={offsetLeft} top={offsetTop} width={modalWidth} height={modalHeight} junctionRows={[2, modalHeight - 4]}>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{title}</span>
+					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
+					<span fg={colors.muted}>{countText}</span>
+				</TextLine>
+			</box>
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<PlainLine text={fitCell(selectedTheme.description, contentWidth)} fg={colors.muted} />
+			</box>
+			<Divider width={innerWidth} />
+			<box height={maxVisible} flexDirection="column">
+				{visibleThemes.map((theme, index) => {
+					const actualIndex = scrollStart + index
+					const isSelected = actualIndex === selectedIndex
+					const isActive = theme.id === activeThemeId
+					const marker = isActive ? "✓" : " "
+					const swatchWidth = 6
+					const nameWidth = Math.max(1, rowWidth - swatchWidth - 3)
+
+					return (
+						<TextLine key={theme.id} bg={isSelected ? colors.selectedBg : undefined} fg={isSelected ? colors.selectedText : colors.text}>
+							<span fg={isActive ? colors.status.passing : colors.muted}>{marker}</span>
+							<span> </span>
+							<span>{fitCell(theme.name, nameWidth)}</span>
+							<span bg={theme.colors.background}> </span>
+							<span bg={theme.colors.panel}> </span>
+							<span bg={theme.colors.accent}> </span>
+							<span bg={theme.colors.status.passing}> </span>
+							<span bg={theme.colors.status.failing}> </span>
+							<span bg={theme.colors.status.review}> </span>
+						</TextLine>
+					)
+				})}
+			</box>
+			<Divider width={innerWidth} />
+			<box height={1} paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.count}>↑↓</span>
+					<span fg={colors.muted}> preview  </span>
+					<span fg={colors.count}>enter</span>
+					<span fg={colors.muted}> select  </span>
+					<span fg={colors.count}>esc</span>
+					<span fg={colors.muted}> cancel</span>
+				</TextLine>
+			</box>
+		</ModalFrame>
+	)
+}

package/src/ui/primitives.tsx

@@ -77,7 +77,7 @@ export const ModalFrame = ({
 	width,
 	height,
 	junctionRows = [],
-	backgroundColor = "#1a1a2e",
+	backgroundColor = colors.modalBackground,
 }: {
 	children: React.ReactNode
 	left: number