Skip to content

fix(dashboard): propagate dark mode to code blocks inside list items#7667

Merged
Soulter merged 1 commit intoAstrBotDevs:masterfrom
MostimaBridges:fix/dark-mode-code-block
Apr 19, 2026
Merged

fix(dashboard): propagate dark mode to code blocks inside list items#7667
Soulter merged 1 commit intoAstrBotDevs:masterfrom
MostimaBridges:fix/dark-mode-code-block

Conversation

@MostimaBridges
Copy link
Copy Markdown
Contributor

@MostimaBridges MostimaBridges commented Apr 19, 2026

The upstream markstream-vue library's ListItemNode does not forward the isDark prop to nested NodeRenderer, causing code blocks inside list items to always render with a light background in dark mode.

This fix makes ThemeAwareMarkdownCodeBlock fall back to the isDark value provided via Vue's inject() (already set by MarkdownMessagePart.vue) when the prop is not correctly passed down by the upstream library.

Fixes #7664

Modifications / 改动点

  • dashboard/src/components/shared/ThemeAwareMarkdownCodeBlock.vue: Added inject("isDark") as a fallback when the isDark prop is not propagated by the upstream markstream-vue ListItemNode. The component now computes an effectiveIsDark that uses props.isDark || injectedIsDark to ensure code blocks nested inside list items correctly receive the dark mode state.

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

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

Before: In dark mode, code blocks at the top level display correctly with a dark background, but code blocks nested inside list items (<li>) render with a white background (bg-white, background-color: #ffffff).
2

After: All code blocks, including those nested inside list items, correctly display with a dark background (bg-gray-900, background-color: #121212) in dark mode.

1

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.txtpyproject.toml 文件相应位置。

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

Summary by Sourcery

Bug Fixes:

  • Fix dark mode styling for markdown code blocks nested inside list items by deriving the dark mode state from injected context when the prop is missing.

@dosubot dosubot bot added size:XS This PR changes 0-9 lines, ignoring generated files. area:webui The bug / feature is about webui(dashboard) of astrbot. labels Apr 19, 2026
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey - I've found 1 issue, and left some high level feedback:

  • Using props.isDark || injectedIsDark?.value || false means an explicitly passed false will be ignored if an injected dark value is true; consider distinguishing between undefined and false (e.g., with ?? or a different default) so an explicit false can override the injected value.
  • The inject<Ref<boolean>>("isDark", undefined) assumes the provided value is always a Ref; if there’s any chance it might be a plain boolean, you may want to support both shapes (e.g., by checking for a .value property before accessing it).
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Using `props.isDark || injectedIsDark?.value || false` means an explicitly passed `false` will be ignored if an injected dark value is `true`; consider distinguishing between `undefined` and `false` (e.g., with `??` or a different default) so an explicit `false` can override the injected value.
- The `inject<Ref<boolean>>("isDark", undefined)` assumes the provided value is always a `Ref`; if there’s any chance it might be a plain boolean, you may want to support both shapes (e.g., by checking for a `.value` property before accessing it).

## Individual Comments

### Comment 1
<location path="dashboard/src/components/shared/ThemeAwareMarkdownCodeBlock.vue" line_range="35-43" />
<code_context>
 );

+const injectedIsDark = inject<Ref<boolean>>("isDark", undefined);
+const effectiveIsDark = computed(() => props.isDark || injectedIsDark?.value || false);
+
 const attrs = useAttrs();
 const forwardedBindings = computed(() => ({
   ...attrs,
   ...props,
+  isDark: effectiveIsDark.value,
 }));
-const themeRenderKey = computed(() => (props.isDark ? "dark" : "light"));
+const themeRenderKey = computed(() => (effectiveIsDark.value ? "dark" : "light"));
 </script>
</code_context>
<issue_to_address>
**issue (bug_risk):** Using `||` means an explicitly passed `isDark={false}` can no longer override an injected `true` value.

With the new `props.isDark || injectedIsDark?.value || false` logic, an injected `true` will override an explicit `isDark={false}` (`false || true``true`), changing the previous behavior where the prop alone controlled the theme. If the prop is meant to take precedence even when `false`, consider a tri-state/nullish approach (e.g. allow `null` as “unset” and use `computed(() => props.isDark ?? injectedIsDark?.value ?? false)`) so you keep the old semantics while still supporting an injected default.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread dashboard/src/components/shared/ThemeAwareMarkdownCodeBlock.vue Outdated
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request updates the ThemeAwareMarkdownCodeBlock component to support theme injection. It introduces an effectiveIsDark computed property that resolves the theme state by checking the isDark prop and falling back to an injected isDark value from the parent context. The forwardedBindings and themeRenderKey have been updated to use this resolved value. I have no feedback to provide as no review comments were present.

@MostimaBridges MostimaBridges force-pushed the fix/dark-mode-code-block branch from c07a30f to b6fa6c0 Compare April 19, 2026 04:39
@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels Apr 19, 2026
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Apr 19, 2026
@Soulter Soulter merged commit fbe9a38 into AstrBotDevs:master Apr 19, 2026
1 check passed
@MostimaBridges MostimaBridges deleted the fix/dark-mode-code-block branch April 19, 2026 05:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:webui The bug / feature is about webui(dashboard) of astrbot. lgtm This PR has been approved by a maintainer size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]Code blocks inside list items show white background in dark mode

2 participants