Skip to content

Feat(webui): improve code block readability in dark mode（iss#6963) #7014

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RC-CHN merged 2 commits into from
Mar 26, 2026
+9 −0
Merged

Feat(webui): improve code block readability in dark mode（iss#6963) #7014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c1437e
Feat(webui): improve code block readability in dark mode
M1LKT Mar 26, 2026
5712035
fix(dashboard): use theme variable for code text
RC-CHN Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions dashboard/src/scss/_override.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,10 @@ html {
transform: rotate(270deg);
}
}

pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Helvetica Neue", monospace;
color: var(--astrbot-code-color);
}
Comment on lines +38 to +41
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

While the intention is to improve readability in dark mode, setting the color to the hardcoded value #111827 will have the opposite effect. This color is very dark and will be nearly invisible on a dark background, which contradicts the goal of this pull request.

To correctly support both light and dark themes, you should use Vuetify's theme system. By using a theme variable like rgb(var(--v-theme-on-surface)), the text color will adapt automatically to the current theme, ensuring readability in both modes.

Suggested change
pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Helvetica Neue", monospace;
color: #111827;
}
pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Helvetica Neue", monospace;
color: rgb(var(--v-theme-on-surface));
}



2 changes: 2 additions & 0 deletions dashboard/src/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ $font-size-root: 1rem;
$border-radius-root: 8px;
$cjk-sans-fallback: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei' !default;
$cjk-mono-fallback: 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei' !default;
$code-text-color: #111827 !default;

:root {
--astrbot-font-cjk-sans: #{$cjk-sans-fallback};
--astrbot-font-cjk-mono: #{$cjk-mono-fallback};
--astrbot-code-color: #{$code-text-color};
}

$body-font-family: 'Roboto', $cjk-sans-fallback, sans-serif !default;
Expand Down
Loading