vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-28 16:13:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix(tui): use gray list highlights (#36669)

Browse source 
Co-authored-by: Dax Raad <thdxr@users.noreply.github.com>
This commit is contained in:
opencode-agent[bot] 2026-07-13 10:15:30 -04:00 • committed by GitHub
parent 339fd50cb9
commit 823bc20427
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 21 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/tui/src/component/prompt/autocomplete.tsx
View file

@ -13,7 +13,7 @@ import { getScrollAcceleration } from "../../util/scroll"
import { useTuiPaths } from "../../context/runtime"
import { useConfig } from "../../config"
import { useLocation } from "../../context/location"
import { useTheme, selectedForeground } from "../../context/theme"
import { useTheme } from "../../context/theme"
import { SplitBorder } from "../../ui/border"
import { useTerminalDimensions } from "@opentui/solid"
import { Locale } from "../../util/locale"
@ -746,7 +746,7 @@ export function Autocomplete(props: {
<box
paddingLeft={1}
paddingRight={1}
backgroundColor={index === store.selected ? theme.primary : undefined}
backgroundColor={index === store.selected ? theme.backgroundElement : undefined}
flexDirection="row"
onMouseMove={() => {
setStore("input", "mouse")
@ -761,11 +761,11 @@ export function Autocomplete(props: {
}}
onMouseUp={() => select()}
>
<text fg={index === store.selected ? selectedForeground(theme) : theme.text} flexShrink={0}>
<text fg={theme.text} flexShrink={0}>
{option().display}
</text>
<Show when={option().description}>
<text fg={index === store.selected ? selectedForeground(theme) : theme.textMuted} wrapMode="none">
<text fg={index === store.selected ? theme.text : theme.textMuted} wrapMode="none">
{" " + option().description?.trimStart()}
</text>
</Show>

8
packages/tui/src/feature-plugins/system/diff-viewer-file-tree.tsx
View file

@ -82,17 +82,17 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
<box
flexDirection="row"
width="100%"
backgroundColor={highlighted() ? props.theme.primary : undefined}
backgroundColor={highlighted() ? props.theme.backgroundElement : undefined}
onMouseUp={() => props.onRowClick?.(row)}
>
<text fg={highlighted() ? props.theme.background : fadedColor()} wrapMode="none" flexShrink={0}>
<text fg={highlighted() ? props.theme.text : fadedColor()} wrapMode="none" flexShrink={0}>
{prefix()}
</text>
<box flexGrow={1} minWidth={0}>
<text
fg={
highlighted()
? props.theme.background
? props.theme.text
: selected()
? props.theme.primary
: reviewed() || row.kind === "directory"
@ -105,7 +105,7 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
</text>
</box>
<text
fg={highlighted() ? props.theme.background : props.theme.textMuted}
fg={highlighted() ? props.theme.text : props.theme.textMuted}
wrapMode="none"
flexShrink={0}
>

9
packages/tui/src/routes/session/composer/shell-tab.tsx
View file

@ -1,10 +1,10 @@
import { createMemo, For, Show, createEffect, onMount, onCleanup } from "solid-js"
import { createStore } from "solid-js/store"
import { TextAttributes, RGBA, ScrollBoxRenderable } from "@opentui/core"
import { TextAttributes, ScrollBoxRenderable } from "@opentui/core"
import { useData } from "../../../context/data"
import { useLocation } from "../../../context/location"
import { useSDK } from "../../../context/sdk"
import { useTheme, selectedForeground } from "../../../context/theme"
import { useTheme } from "../../../context/theme"
import { useBindings, useCommandShortcut } from "../../../keymap"
import { useComposerTab } from "./index"
@ -13,7 +13,6 @@ export function ShellTab(props: { sessionID: string }) {
const location = useLocation()
const sdk = useSDK()
const { theme } = useTheme()
const fg = selectedForeground(theme)
const composer = useComposerTab()
const killHint = useCommandShortcut("composer.shell.kill")
@ -114,11 +113,11 @@ export function ShellTab(props: { sessionID: string }) {
flexDirection="row"
paddingLeft={1}
paddingRight={1}
backgroundColor={active() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
backgroundColor={active() ? theme.backgroundElement : undefined}
onMouseOver={() => setStore("selected", index())}
>
<text
fg={active() ? fg : theme.text}
fg={theme.text}
attributes={active() ? TextAttributes.BOLD : undefined}
wrapMode="none"
>

11
packages/tui/src/routes/session/composer/subagents-tab.tsx
View file

@ -1,10 +1,10 @@
import { createMemo, For, Show, createEffect, onMount, onCleanup } from "solid-js"
import { createStore } from "solid-js/store"
import { TextAttributes, RGBA, ScrollBoxRenderable } from "@opentui/core"
import { TextAttributes, ScrollBoxRenderable } from "@opentui/core"
import { useRoute, useRouteData } from "../../../context/route"
import { useData } from "../../../context/data"
import { useSDK } from "../../../context/sdk"
import { useTheme, selectedForeground } from "../../../context/theme"
import { useTheme } from "../../../context/theme"
import { Locale } from "../../../util/locale"
import { useBindings, useCommandShortcut } from "../../../keymap"
import { useComposerTab } from "./index"
@ -22,7 +22,6 @@ export function SubagentsTab(props: { sessionID: string }) {
const data = useData()
const sdk = useSDK()
const { theme } = useTheme()
const fg = selectedForeground(theme)
const navigate = useRoute().navigate
const composer = useComposerTab()
const interruptHint = useCommandShortcut("composer.subagent.interrupt")
@ -215,7 +214,7 @@ export function SubagentsTab(props: { sessionID: string }) {
flexDirection="row"
paddingLeft={1}
paddingRight={1}
backgroundColor={active() ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
backgroundColor={active() ? theme.backgroundElement : undefined}
onMouseOver={() => setStore("selected", index())}
onMouseUp={() => {
setStore("selected", index())
@ -224,7 +223,7 @@ export function SubagentsTab(props: { sessionID: string }) {
>
<box flexGrow={1} minWidth={0} flexDirection="row">
<text
fg={active() ? fg : entry.current ? theme.primary : theme.text}
fg={entry.current ? theme.primary : theme.text}
attributes={active() ? TextAttributes.BOLD : undefined}
wrapMode="none"
>
@ -232,7 +231,7 @@ export function SubagentsTab(props: { sessionID: string }) {
</text>
</box>
<Show when={status()}>
<text fg={active() ? fg : theme.textMuted} wrapMode="none">
<text fg={active() ? theme.text : theme.textMuted} wrapMode="none">
{status()}
</text>
</Show>

9
packages/tui/src/ui/dialog-select.tsx
View file

@ -674,7 +674,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
active()
? actionFocused()
? theme.backgroundElement
: (option.bg ?? theme.primary)
: (option.bg ?? theme.backgroundElement)
: RGBA.fromInts(0, 0, 0, 0)
}
>
@ -749,9 +749,8 @@ function Option(props: {
onMouseOver?: () => void
}) {
const { theme } = useTheme()
const fg = selectedForeground(theme)
const text = createMemo(() => {
if (props.active && !props.muted) return fg
if (props.active && !props.muted) return theme.text
if (props.muted && (props.active || props.current)) return theme.textMuted
if (props.current) return theme.primary
return theme.text
@ -784,12 +783,12 @@ function Option(props: {
? Locale.truncateLeft(props.title, props.titleWidth ?? 61)
: Locale.truncate(props.title, props.titleWidth ?? 61))}
<Show when={props.description}>
<span style={{ fg: props.active && !props.muted ? fg : theme.textMuted }}> {props.description}</span>
<span style={{ fg: props.active && !props.muted ? theme.text : theme.textMuted }}> {props.description}</span>
</Show>
</text>
<Show when={props.footer}>
<box flexShrink={0}>
<text fg={props.active && !props.muted ? fg : theme.textMuted}>{props.footer}</text>
<text fg={props.active && !props.muted ? theme.text : theme.textMuted}>{props.footer}</text>
</box>
</Show>
</>