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

[M1LKT]

Modifications / 改动点

• 在override.css中增加全局样式，增强了暗色模式下代码块中文字的可读性。
• 关联 Issue: #6963
  Fixes [Feature]WebUI深色配色下更新日志的行内代码块内容可读性极差，希望修改相关配色 #6963

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

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

---

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

Enhancements:

• Unify and customize monospace font styling and text color for code blocks across markdown and release notes to enhance readability in dark mode.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决暗色模式下代码块文本可读性差的问题。通过引入新的全局CSS样式，统一了代码块的字体并调整了颜色，显著提升了用户在深色主题下阅读代码的体验。

Highlights

• 代码块可读性改进: 在暗色模式下，通过修改全局CSS样式，增强了代码块中文本的对比度和可读性。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[sourcery-ai]

Hey - I've left some high level feedback:

• The global pre, code, ... selector will apply in both light and dark themes; consider scoping these overrides under the dark-mode root class (or theme variable) so light mode code blocks are not unintentionally affected.
• Forcing color: #111827 on all pre/code elements will override any syntax highlighting colors; if highlighting is desired, limit the rule to specific containers (e.g., markdown code blocks) or only adjust background/contrast rather than a single hard-coded text color.
• Instead of a hard-coded #111827, consider using the existing design tokens or CSS variables for text colors so the code block text stays consistent with the rest of the dark theme palette and can be adjusted centrally.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The global `pre, code, ...` selector will apply in both light and dark themes; consider scoping these overrides under the dark-mode root class (or theme variable) so light mode code blocks are not unintentionally affected.
- Forcing `color: #111827` on all `pre`/`code` elements will override any syntax highlighting colors; if highlighting is desired, limit the rule to specific containers (e.g., markdown code blocks) or only adjust background/contrast rather than a single hard-coded text color.
- Instead of a hard-coded `#111827`, consider using the existing design tokens or CSS variables for text colors so the code block text stays consistent with the rest of the dark theme palette and can be adjusted centrally.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[gemini-code-assist]

Code Review

This pull request introduces styling for code blocks and preformatted text elements, setting a specific font family and color. However, the hardcoded color value will negatively impact readability in dark mode. It is recommended to use a Vuetify theme variable for the color to ensure proper adaptation across different themes.

[gemini-code-assist]

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));
	}