xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): soften dark theme contrast

This commit is contained in:
t8y2 2026-06-03 01:46:54 +08:00
parent c851de795d
commit 373d5c1ef2
4 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/desktop/src/components/grid/DataGrid.vue
View File

@ -5851,7 +5851,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
>
<div class="flex text-xs font-semibold text-foreground" :style="{ width: 'var(--header-total-w)' }">
<div
class="shrink-0 px-2 py-1.5 border-r border-border text-center text-muted-foreground select-none cursor-pointer hover:bg-accent/60 sticky left-0 z-20 bg-[rgb(239_239_239)] dark:bg-[#2d2d2d]"
class="shrink-0 px-2 py-1.5 border-r border-border text-center text-muted-foreground select-none cursor-pointer hover:bg-accent/60 sticky left-0 z-20 bg-[rgb(239_239_239)] dark:bg-muted"
:style="{ width: 'var(--row-num-w)' }"
@click="selectAllCells"
>
@ -6486,7 +6486,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
:data-row-index="item.displayIndex"
>
<div
class="data-grid-row-number shrink-0 px-2 py-1 border-r border-border text-center select-none cursor-default hover:bg-accent/50 sticky left-0 z-10 bg-[rgb(255_255_255)] dark:bg-[rgb(15_15_15)]"
class="data-grid-row-number shrink-0 px-2 py-1 border-r border-border text-center select-none cursor-default hover:bg-accent/50 sticky left-0 z-10 bg-[rgb(255_255_255)] dark:bg-[rgb(35_37_42)]"
:class="[
rowNumberStatusClass(item),
{
@ -7725,7 +7725,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
--data-grid-cell-search-bg: rgb(72 57 8);
--data-grid-cell-current-search-bg: rgb(116 87 0);
--data-grid-cell-current-search-border: rgb(239 177 0);
--data-grid-row-number-default-bg: rgb(15 15 15);
--data-grid-row-number-default-bg: rgb(35 37 42);
}
.data-grid-topbar {

8
apps/desktop/src/components/redis/RedisKeyBrowser.vue
View File

@ -840,7 +840,7 @@ defineExpose({ focusSearch });
<TabsContent value="command" class="m-0 min-h-0 flex-1 flex flex-col">
<div
class="dbx-editor-font-family relative flex min-h-0 flex-1 flex-col bg-[#090c10] text-[13px] leading-5 text-slate-100"
class="dbx-editor-font-family relative flex min-h-0 flex-1 flex-col bg-[#171b21] text-[13px] leading-5 text-slate-200"
@click="getCommandInput()?.focus()"
>
<div ref="commandTerminalRef" class="min-h-0 flex-1 overflow-auto px-4 pb-3 pt-4">
@ -851,7 +851,7 @@ defineExpose({ focusSearch });
<div v-for="entry in commandHistory" :key="entry.id" class="mb-2">
<div class="flex min-w-0 items-start gap-2 whitespace-pre-wrap break-words">
<span class="shrink-0 text-[#d7ba7d]">{{ entry.prompt }}</span>
<span class="min-w-0 text-slate-100">{{ entry.command }}</span>
<span class="min-w-0 text-slate-200">{{ entry.command }}</span>
</div>
<pre
v-if="entry.output"
@ -863,14 +863,14 @@ defineExpose({ focusSearch });
</div>
<form
class="flex shrink-0 items-center gap-2 border-t border-white/10 bg-[#090c10] px-4 py-2"
class="flex shrink-0 items-center gap-2 border-t border-white/10 bg-[#171b21] px-4 py-2"
@submit.prevent="executeCommand"
>
<span class="shrink-0 text-[#d7ba7d]">{{ commandPrompt }}</span>
<input
v-model="commandText"
data-redis-command-input
class="dbx-editor-font-family min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] text-slate-100 caret-[#d7ba7d] outline-none placeholder:text-slate-600"
class="dbx-editor-font-family min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] text-slate-200 caret-[#d7ba7d] outline-none placeholder:text-slate-500"
:disabled="commandRunning"
autocomplete="off"
autocapitalize="off"

19
apps/desktop/src/lib/dataGridPaintTheme.ts
View File

@ -33,6 +33,7 @@ export const DATA_GRID_DARK_SEARCH_COLORS = {
current: "rgb(116 87 0)",
currentBorder: "rgb(239 177 0)",
} as const;
export const DATA_GRID_DARK_ROW_NUMBER_BG = "rgb(35 37 42)";
export function cssVarColor(getVar: (name: string) => string, name: string, fallback: string): string {
const value = getVar(name).trim();
@ -63,11 +64,15 @@ export function resolveDataGridPaintTheme(options: {
isDark: boolean;
}): DataGridPaintTheme {
const { getVar, isDark } = options;
const background = cssVarColor(getVar, "--background", isDark ? "oklch(0.145 0 0)" : "oklch(1 0 0)");
const foreground = cssVarColor(getVar, "--foreground", isDark ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)");
const mutedForeground = cssVarColor(getVar, "--muted-foreground", isDark ? "oklch(0.708 0 0)" : "oklch(0.556 0 0)");
const primary = cssVarColor(getVar, "--primary", isDark ? "oklch(0.922 0 0)" : "oklch(0.205 0 0)");
const muted = cssVarColor(getVar, "--muted", isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)");
const background = cssVarColor(getVar, "--background", isDark ? "oklch(0.19 0.004 285)" : "oklch(1 0 0)");
const foreground = cssVarColor(getVar, "--foreground", isDark ? "oklch(0.88 0.006 285)" : "oklch(0.145 0 0)");
const mutedForeground = cssVarColor(
getVar,
"--muted-foreground",
isDark ? "oklch(0.68 0.008 285)" : "oklch(0.556 0 0)",
);
const primary = cssVarColor(getVar, "--primary", isDark ? "oklch(0.86 0.008 285)" : "oklch(0.205 0 0)");
const muted = cssVarColor(getVar, "--muted", isDark ? "oklch(0.285 0.006 285)" : "oklch(0.97 0 0)");
const destructive = cssVarColor(getVar, "--destructive", "oklch(0.6 0.22 25)");
const accent = cssVarColor(getVar, "--accent", isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)");
const yellow500 = "oklch(0.795 0.184 86.047)";
@ -84,7 +89,9 @@ export function resolveDataGridPaintTheme(options: {
const cellSearch = isDark ? DATA_GRID_DARK_SEARCH_COLORS.match : "rgb(253 245 184)";
const cellCurrentSearch = isDark ? DATA_GRID_DARK_SEARCH_COLORS.current : "rgb(253 224 71 / 52%)";
const cellCurrentSearchBorder = isDark ? DATA_GRID_DARK_SEARCH_COLORS.currentBorder : "rgb(234 179 8 / 82%)";
const rowNumberDefault = isDark ? "rgb(15 15 15)" : "rgb(255 255 255)";
const rowNumberDefault = isDark
? DATA_GRID_DARK_ROW_NUMBER_BG
: paintToken(getVar, "--data-grid-row-number-default-bg", "rgb(255 255 255)");
const rowNumberNew = `color-mix(in oklab, rgb(16 185 129) 15%, ${background})`;
const rowNumberEdited = `color-mix(in oklab, rgb(245 158 11) 15%, ${background})`;
const rowNumberDeleted = `color-mix(in oklab, ${destructive} 15%, ${background})`;

52
apps/desktop/src/styles/globals.css
View File

@ -130,37 +130,37 @@
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--background: oklch(0.19 0.004 285);
--foreground: oklch(0.88 0.006 285);
--card: oklch(0.225 0.005 285);
--card-foreground: oklch(0.88 0.006 285);
--popover: oklch(0.235 0.005 285);
--popover-foreground: oklch(0.89 0.006 285);
--primary: oklch(0.86 0.008 285);
--primary-foreground: oklch(0.19 0.004 285);
--secondary: oklch(0.285 0.006 285);
--secondary-foreground: oklch(0.88 0.006 285);
--muted: oklch(0.285 0.006 285);
--muted-foreground: oklch(0.68 0.008 285);
--accent: oklch(0.305 0.008 285);
--accent-foreground: oklch(0.9 0.006 285);
--destructive: oklch(0.68 0.18 24);
--border: oklch(0.54 0.006 285 / 28%);
--input: oklch(0.54 0.006 285 / 34%);
--ring: oklch(0.62 0.008 285);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar: oklch(0.215 0.005 285);
--sidebar-foreground: oklch(0.86 0.006 285);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--sidebar-primary-foreground: oklch(0.94 0.006 285);
--sidebar-accent: oklch(0.295 0.006 285);
--sidebar-accent-foreground: oklch(0.9 0.006 285);
--sidebar-border: oklch(0.54 0.006 285 / 28%);
--sidebar-ring: oklch(0.62 0.008 285);
}
html.disable-transitions,
@ -239,7 +239,7 @@ body.dbx-table-reference-dragging * {
background: oklch(0.965 0 0);
}
.dark .app-panel-gutter {
background: oklch(0.18 0 0);
background: oklch(0.205 0.004 285);
}
.app-layout-classic .panel-resize-handle {
width: 3px;