fix(theme): keep inverted text opaque over background images

This commit is contained in:
zipg authored and GitHub committed 2026-09-22 10:59:40 +08:00
1 parent 8858a731aa
commit cc966142ac
16 files changed
+96 -16

No files matched your search

@@ -6901,7 +6901,7 @@ function openExternalUrl(url: string) {
<span>{{ t(option.labelKey) }}</span>
<Badge v-if="option.recommended" class="h-4 rounded-full px-1.5 text-[10px] leading-none">{{ t("connection.sqliteWorkerPlacementDefault") }}</Badge>
</div>
<p class="text-[11px] leading-relaxed text-background/80">{{ t(option.hintKey) }}</p>
<p class="text-[11px] leading-relaxed text-background-solid/80">{{ t(option.hintKey) }}</p>
</TooltipContent>
</Tooltip>
</div>
@@ -5985,11 +5985,11 @@ async function openExternalUrl(url: string) {
<button v-if="isGenerating" class="h-7 w-7 shrink-0 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center" :title="t('ai.stopGenerating')" @click="cancelStream">
<Square class="h-3.5 w-3.5" />
</button>
<button v-else-if="hasActiveRunForCurrentConversation" class="h-7 shrink-0 items-center gap-1 rounded-full bg-foreground px-2.5 text-[11px] font-medium text-background disabled:opacity-30 flex" :disabled="!canSubmitPrompt" :title="t('ai.queueSendHint')" @click="onSendClick">
<button v-else-if="hasActiveRunForCurrentConversation" class="h-7 shrink-0 items-center gap-1 rounded-full bg-foreground px-2.5 text-[11px] font-medium text-background-solid disabled:opacity-30 flex" :disabled="!canSubmitPrompt" :title="t('ai.queueSendHint')" @click="onSendClick">
<Hourglass class="h-3.5 w-3.5" />
<span>{{ t("ai.queueSend") }}</span>
</button>
<button v-else class="h-7 w-7 shrink-0 rounded-full bg-foreground text-background flex items-center justify-center disabled:opacity-30" :disabled="!canSubmitPrompt" @click="send">
<button v-else class="h-7 w-7 shrink-0 rounded-full bg-foreground text-background-solid flex items-center justify-center disabled:opacity-30" :disabled="!canSubmitPrompt" @click="send">
<ArrowUp class="h-4 w-4" />
</button>
</div>
@@ -88,7 +88,7 @@ const emit = defineEmits<{
</span>
<template #content>
<div class="dbx-column-info-tooltip grid min-w-56 grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1 px-3 py-2">
<span class="text-background/70">{{ columnNameLabel }}</span>
<span class="text-background-solid/70">{{ columnNameLabel }}</span>
<span class="flex min-w-0 items-center gap-2">
<span class="min-w-0 flex-1 truncate font-mono">{{ name }}</span>
<button data-column-header-copy-name type="button" class="flex h-5 w-5 shrink-0 items-center justify-center rounded hover:bg-background/10" :title="copyColumnNameLabel" @click.stop="emit('copyName')">
@@ -96,19 +96,19 @@ const emit = defineEmits<{
</button>
</span>
<template v-if="tooltipColumnType ?? columnType">
<span class="text-background/70">{{ columnTypeLabel }}</span>
<span class="text-background-solid/70">{{ columnTypeLabel }}</span>
<span :class="typeClass">{{ tooltipColumnType ?? columnType }}</span>
</template>
<template v-if="tooltipColumnComment ?? columnComment">
<span class="text-background/70">{{ columnCommentLabel }}</span>
<span class="text-background-solid/70">{{ columnCommentLabel }}</span>
<span>{{ tooltipColumnComment ?? columnComment }}</span>
</template>
<template v-if="columnNullability">
<span class="text-background/70">{{ nullableLabel }}</span>
<span class="text-background-solid/70">{{ nullableLabel }}</span>
<span>{{ columnNullability === "nullable" ? yesLabel : noLabel }}</span>
</template>
<template v-if="columnIndexKind && columnIndexKind !== 'none'">
<span class="text-background/70">{{ columnIndexLabel }}</span>
<span class="text-background-solid/70">{{ columnIndexLabel }}</span>
<span class="flex items-center gap-1">
<KeyRound v-if="columnIndexKind === 'primary'" class="h-3 w-3" :class="columnIndexColorClass(columnIndexKind)" />
<Hash v-else class="h-3 w-3" :class="columnIndexColorClass(columnIndexKind)" />
@@ -702,7 +702,7 @@ defineExpose({ focus, dismiss: editor.dismiss, rememberHistory: editor.rememberH
<Teleport to="body">
<div v-if="historyPreview" class="pointer-events-none fixed z-[140] rounded-md bg-foreground shadow-xl" :style="previewStyle">
<span class="absolute h-3 w-3 rotate-45 bg-foreground" :class="historyPreview.side === 'left' ? '-left-1.5' : '-right-1.5'" :style="previewArrowStyle" />
<div class="max-h-[min(320px,calc(100vh-16px))] overflow-auto rounded-md px-3 py-2 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words text-background">{{ historyPreview.value }}</div>
<div class="max-h-[min(320px,calc(100vh-16px))] overflow-auto rounded-md px-3 py-2 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words text-background-solid">{{ historyPreview.value }}</div>
</div>
</Teleport>
</div>
@@ -3069,7 +3069,7 @@ useUpdateBlocker(() =>
:key="format"
type="button"
class="shrink-0 rounded border px-2 py-0.5 text-[11px] font-medium transition-colors"
:class="configType === format ? 'border-foreground/80 bg-foreground text-background' : 'border-transparent text-muted-foreground hover:border-border hover:bg-background hover:text-foreground'"
:class="configType === format ? 'border-foreground/80 bg-foreground text-background-solid' : 'border-transparent text-muted-foreground hover:border-border hover:bg-background hover:text-foreground'"
:disabled="readOnly"
:aria-pressed="configType === format"
@click="setConfigFormat(format)"
@@ -79,7 +79,7 @@ const arrowClass = computed(() => {
}
});
const tooltipSurfaceClass = computed(() => (props.surface === "popover" ? "bg-popover text-popover-foreground" : "bg-foreground text-background"));
const tooltipSurfaceClass = computed(() => (props.surface === "popover" ? "bg-popover text-popover-foreground" : "bg-foreground text-background-solid"));
const arrowSurfaceClass = computed(() => (props.surface === "popover" ? "bg-popover border-border" : "bg-foreground border-foreground"));
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--reka-tooltip-content-transform-origin)',
'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background-solid z-50 w-fit max-w-xs origin-(--reka-tooltip-content-transform-origin)',
props.class,
)
"