fix(dashboard): adapt trace colors to theme - #9688

TL;DR

• Replace hard-coded Trace text and divider colors with Vuetify semantic theme colors
• Preserve the existing visual hierarchy using different on-surface opacities
• Fix readability in dark mode without changing Trace behavior or global theme definitions
• Verified with CI-aligned pnpm production build and light/dark Trace UI regression testing

Background

Fixes #9683

TraceDisplayer.vue currently uses several hard-coded text colors such as #1f2937, #4b5563, and #6b7280, together with divider colors based on rgba(15, 23, 42, ...).

These colors work as intended on the light theme, but do not adapt when the dashboard switches to the dark theme. On the dark theme's #1a1a1a / #242424 background and surface colors, some Trace text therefore has very low contrast and becomes difficult to read.

This PR replaces the affected fixed colors with Vuetify's semantic --v-theme-on-surface color while preserving the original information hierarchy through opacity.

The implementation follows the same theme-aware approach used by the recently merged PR #9643 for similar dark-theme contrast issues.

Modifications / 改动点

Only dashboard/src/components/shared/TraceDisplayer.vue is modified.

The affected colors are mapped to theme-aware semantic colors as follows:

This keeps the existing primary / content / metadata visual hierarchy rather than making all Trace text use the same foreground intensity.

No additional dark-theme CSS branch or useTheme() logic is introduced. The component now inherits the active Vuetify theme through semantic CSS variables.

Colors unrelated to #9683, such as the Agent status dot and Trace highlight background, are intentionally left unchanged.

• This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

Before

• Dark theme before the fix:

• Light theme before the fix:

After — Dark Theme

The affected Trace text now follows the dark theme's --v-theme-on-surface value and remains readable while preserving the visual hierarchy between primary information, normal content, and metadata.

After — Light Theme

The same Trace view was also verified under the light theme to ensure that replacing the fixed colors does not cause a visual regression.

End-to-End Verification

The fix was tested against a running AstrBot WebUI using the production dashboard build.

Verified in both light and dark themes:

• Event ID, Time, Sender, UMO and Outline remain readable;
• Expanded Action and Fields / JSON content render correctly;
• Primary information, normal content and secondary metadata retain distinct visual weights;
• Trace dividers remain visible without becoming overly prominent;
• Expand, collapse and re-expand operations work normally;
• New Trace records continue to arrive through SSE without refreshing the page;
• Trace loading, clicking, scrolling and layout behavior remain unchanged.

The effective theme variables were also checked in the browser:

Light theme:
--v-theme-on-surface: 0,0,0
--v-theme-surface: 255,255,255

Dark theme:
--v-theme-on-surface: 255,255,255
--v-theme-surface: 36,36,36

Build and Validation

Validation was performed in the dashboard directory using the pnpm version aligned with the repository CI:

npx --yes pnpm@10.28.2 install --frozen-lockfile

Dependency verification completed successfully without modifying the lockfile.

The dashboard production build was then executed with:

npx --yes pnpm@10.28.2 build

The build completed successfully with exit code 0, including:

vue-tsc --noEmit
vite build

This confirms that the dashboard passes TypeScript checking and the production Vite build after the change.

A whitespace check was also performed:

git diff --check

Result:

No whitespace errors

The dependency check and build process did not introduce any unrelated tracked file changes.

Manual regression testing was also completed on the Trace page in both light and dark themes. Text hierarchy, divider visibility, expanded Action / Fields content, and overall readability all matched expectations.

Checklist / 检查清单

• 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  / 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。

• 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  / 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。

• 🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
  / 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到 requirements.txt 和 pyproject.toml 文件相应位置。

• 😮 My changes do not introduce malicious code.
  / 我的更改没有引入恶意代码。

Summary by Sourcery

Adapt TraceDisplayer styling to use Vuetify theme semantic colors for better readability across light and dark dashboard themes.

Bug Fixes:

• Fix low-contrast Trace text and dividers in dark mode by aligning colors with the active Vuetify theme.

Enhancements:

• Replace hard-coded Trace text and divider colors with theme-aware on-surface variants while preserving the visual hierarchy of primary, secondary, and metadata content.

Summary by Sourcery

Adapt TraceDisplayer styling to use Vuetify theme semantic colors for consistent readability across light and dark dashboard themes.

Bug Fixes:

• Fix low-contrast Trace text and dividers in dark mode by aligning colors with the active Vuetify theme.

Enhancements:

• Replace hard-coded Trace text and divider colors with theme-aware on-surface variants while preserving the visual hierarchy of primary, secondary, and metadata content.