fix(styles): improve dark mode compatibility for anchor and drag overlay demos#352
Open
SonyLeo wants to merge 4 commits into
Open
fix(styles): improve dark mode compatibility for anchor and drag overlay demos#352SonyLeo wants to merge 4 commits into
SonyLeo wants to merge 4 commits into
Conversation
… anchor component
… drag overlay demos
WalkthroughReplaces hard-coded colors with design-system CSS variables across anchor and drag-overlay demos, adds Anchor CSS variables to root light/dark themes, and updates the Anchor LESS mixin to match the new token structure. ChangesDesign System CSS Variable Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
docs/demos/drag-overlay/custom-overlay.vue (2)
77-85: ⚡ Quick winRemaining hardcoded colors will not adapt to dark mode.
The section headings and placeholder text use hardcoded colors (
#333,#666) that won't provide proper contrast in dark mode.♻️ Proposed refactor
.demo-section h3 { margin-top: 0; - color: `#333`; + color: var(--vp-c-text-1); } .demo-section p { - color: `#666`; + color: var(--tr-text-secondary); margin-bottom: 16px; } .upload-placeholder { text-align: center; - color: `#666`; + color: var(--tr-text-secondary); }Also applies to: 104-116
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/demos/drag-overlay/custom-overlay.vue` around lines 77 - 85, The CSS uses hardcoded colors in .demo-section h3 and .demo-section p (and similar blocks at 104-116) which won't adapt to dark mode; change these rules to use theme-aware CSS variables (e.g., color: var(--text-color, /*fallback*/ ) for headings and color: var(--muted-text-color, /*fallback*/ ) for paragraphs) or use currentColor with parent variables so the styles follow the site's light/dark color tokens instead of fixed hex values.
99-102: ⚡ Quick winDragging state uses hardcoded blue color.
Consider using theme primary color for consistency with the design system.
♻️ Optional refactor
.image-upload-area.dragging { - border-color: `#007bff`; - background: rgba(0, 123, 255, 0.05); + border-color: var(--tr-color-primary); + background: var(--tr-color-primary-light); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/demos/drag-overlay/custom-overlay.vue` around lines 99 - 102, The .image-upload-area.dragging rule uses hardcoded blue; update it to use the theme's primary color instead—replace border-color: `#007bff` and background: rgba(0, 123, 255, 0.05) with references to your theme CSS variables (e.g., border-color: var(--color-primary) and background using an alpha variant like background: rgba(var(--color-primary-rgb), 0.05) or color-mix()/hsla() depending on your setup) so the dragging state follows the design system; modify the rule in custom-overlay.vue where .image-upload-area.dragging is defined.docs/demos/drag-overlay/basic.vue (2)
246-280: ⚡ Quick winRemaining hardcoded colors in event log section will not adapt to dark mode.
The event log section still uses hardcoded colors that won't work properly in dark mode:
#f8f9fabackground,#e9ecefborders, and various text colors (#666,#333,#007bff).♻️ Proposed refactor to complete dark mode support
/* 事件日志样式 */ .event-log { - background: `#f8f9fa`; + background: var(--tr-container-bg-default-2); border-radius: 4px; padding: 12px; max-height: 200px; overflow-y: auto; } .event-item { display: flex; gap: 12px; padding: 4px 0; - border-bottom: 1px solid `#e9ecef`; + border-bottom: 1px solid var(--vp-c-divider); font-size: 14px; } .event-item:last-child { border-bottom: none; } .event-time { - color: `#666`; + color: var(--tr-text-tertiary); min-width: 80px; } .event-type { - color: `#007bff`; + color: var(--tr-color-primary); font-weight: bold; min-width: 120px; } .event-message { - color: `#333`; + color: var(--tr-text-secondary); flex: 1; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/demos/drag-overlay/basic.vue` around lines 246 - 280, Replace the hardcoded hex colors in the event log styles with theme-aware CSS variables so the section adapts to dark mode: update .event-log to use a background variable (e.g., var(--event-log-bg, var(--color-surface))) and border color variable for .event-item (e.g., var(--event-log-border, var(--color-border))); replace text colors in .event-time, .event-message and the accent in .event-type with semantic variables (e.g., var(--color-muted), var(--color-text), var(--color-primary)) or project-wide tokens so dark-mode overrides apply; touch the selectors .event-log, .event-item, .event-time, .event-type, and .event-message to implement these variable fallbacks.
187-191: ⚡ Quick winConsider using theme primary color for interactive elements.
The drag indicator and button use hardcoded
#007bffinstead of the theme's primary color variable, which would provide better consistency across light and dark modes.♻️ Optional refactor for consistency
.drag-indicator { - color: `#007bff`; + color: var(--tr-color-primary); font-weight: bold; animation: pulse 1s infinite; } .chat-input button { padding: 8px 16px; - background: `#007bff`; + background: var(--tr-color-primary); color: white; border: none; border-radius: 20px; cursor: pointer; }Also applies to: 236-243
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/demos/drag-overlay/basic.vue` around lines 187 - 191, Replace the hardcoded color `#007bff` with the project's theme primary color variable in the CSS for interactive elements: update the .drag-indicator rule (and the button rule referenced around lines 236–243) to use the theme primary CSS variable (e.g., var(--primary-color) or your app's equivalent like var(--theme-primary)) so the indicator and button follow light/dark theme changes consistently.docs/demos/drag-overlay/disabled.vue (1)
30-38: ⚡ Quick winRemaining hardcoded colors will not adapt to dark mode.
Text colors use hardcoded values (
#333,#666) that won't provide proper contrast in dark mode.♻️ Proposed refactor
.demo-section h3 { margin-top: 0; - color: `#333`; + color: var(--vp-c-text-1); } .demo-section p { - color: `#666`; + color: var(--tr-text-secondary); margin-bottom: 16px; } .disabled-content { text-align: center; - color: `#666`; + color: var(--tr-text-secondary); }Also applies to: 56-68
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/demos/drag-overlay/disabled.vue` around lines 30 - 38, The hardcoded colors in the demo CSS (.demo-section h3 and .demo-section p) won't adapt to dark mode; change them to use theme-aware variables or media queries instead (e.g., replace `color: `#333`` and `color: `#666`` with CSS custom properties like `color: var(--text-color)` / `var(--muted-text-color)` or set them inside `@media (prefers-color-scheme: dark)`), and ensure those variables are defined in the global/theme stylesheet so both light and dark modes provide appropriate contrast; apply the same replacement for the other occurrences referenced (lines ~56-68) and any similar selectors.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/demos/anchor/basic-source.vue`:
- Line 113: Locate the CSS rule containing the hardcoded declaration "color:
`#191919`;" in basic-source.vue and replace it with the project's theme-aware
token (e.g., a CSS custom property or theme variable like --color-text /
var(--color-text) or the framework's text color token) so the text color adapts
to light/dark modes; update the selector where "color: `#191919`;" appears to use
that theme variable instead of the literal hex value.
---
Nitpick comments:
In `@docs/demos/drag-overlay/basic.vue`:
- Around line 246-280: Replace the hardcoded hex colors in the event log styles
with theme-aware CSS variables so the section adapts to dark mode: update
.event-log to use a background variable (e.g., var(--event-log-bg,
var(--color-surface))) and border color variable for .event-item (e.g.,
var(--event-log-border, var(--color-border))); replace text colors in
.event-time, .event-message and the accent in .event-type with semantic
variables (e.g., var(--color-muted), var(--color-text), var(--color-primary)) or
project-wide tokens so dark-mode overrides apply; touch the selectors
.event-log, .event-item, .event-time, .event-type, and .event-message to
implement these variable fallbacks.
- Around line 187-191: Replace the hardcoded color `#007bff` with the project's
theme primary color variable in the CSS for interactive elements: update the
.drag-indicator rule (and the button rule referenced around lines 236–243) to
use the theme primary CSS variable (e.g., var(--primary-color) or your app's
equivalent like var(--theme-primary)) so the indicator and button follow
light/dark theme changes consistently.
In `@docs/demos/drag-overlay/custom-overlay.vue`:
- Around line 77-85: The CSS uses hardcoded colors in .demo-section h3 and
.demo-section p (and similar blocks at 104-116) which won't adapt to dark mode;
change these rules to use theme-aware CSS variables (e.g., color:
var(--text-color, /*fallback*/ ) for headings and color: var(--muted-text-color,
/*fallback*/ ) for paragraphs) or use currentColor with parent variables so the
styles follow the site's light/dark color tokens instead of fixed hex values.
- Around line 99-102: The .image-upload-area.dragging rule uses hardcoded blue;
update it to use the theme's primary color instead—replace border-color: `#007bff`
and background: rgba(0, 123, 255, 0.05) with references to your theme CSS
variables (e.g., border-color: var(--color-primary) and background using an
alpha variant like background: rgba(var(--color-primary-rgb), 0.05) or
color-mix()/hsla() depending on your setup) so the dragging state follows the
design system; modify the rule in custom-overlay.vue where
.image-upload-area.dragging is defined.
In `@docs/demos/drag-overlay/disabled.vue`:
- Around line 30-38: The hardcoded colors in the demo CSS (.demo-section h3 and
.demo-section p) won't adapt to dark mode; change them to use theme-aware
variables or media queries instead (e.g., replace `color: `#333`` and `color:
`#666`` with CSS custom properties like `color: var(--text-color)` /
`var(--muted-text-color)` or set them inside `@media (prefers-color-scheme:
dark)`), and ensure those variables are defined in the global/theme stylesheet
so both light and dark modes provide appropriate contrast; apply the same
replacement for the other occurrences referenced (lines ~56-68) and any similar
selectors.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: aa085ecf-8f62-4d31-80da-45bec9aac92f
📒 Files selected for processing (7)
docs/demos/anchor/basic-source.vuedocs/demos/anchor/demo-shell.cssdocs/demos/drag-overlay/basic.vuedocs/demos/drag-overlay/custom-overlay.vuedocs/demos/drag-overlay/disabled.vuepackages/components/src/styles/components/anchor.lesspackages/components/src/styles/variables.css
💤 Files with no reviewable changes (1)
- packages/components/src/styles/components/anchor.less
…ity in anchor demo
Contributor
|
✅ Preview build completed successfully!
|
Contributor
📦 Package Previewpnpm add https://pkg.pr.new/@opentiny/tiny-robot@5d67ae2 pnpm add https://pkg.pr.new/@opentiny/tiny-robot-kit@5d67ae2 pnpm add https://pkg.pr.new/@opentiny/tiny-robot-svgs@5d67ae2 commit: 5d67ae2 |
Collaborator
|
暗色模式下，item激活的样式过于亮了，优化下 
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/demos/anchor/basic-source.vue (1)
116-118: ⚡ Quick winKeep
.articlescoped in the dark-mode override selector.
<style scoped>scoping is bypassed for everything inside:global(...); with:global([data-tr-color-mode='dark'] .article), the.articlepart can match globally. Keep only the dark-mode root global and move.articleoutside.-:global([data-tr-color-mode='dark'] .article) { +:global([data-tr-color-mode='dark']) .article { --anchor-section-active-bg: color-mix(in srgb, `#317af7` 40%, var(--vp-c-bg)); }(Also present in
docs/demos/anchor/controlled-search.vuefor.conversation-list.)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/demos/anchor/basic-source.vue` around lines 116 - 118, The dark-mode CSS selector currently uses :global([data-tr-color-mode='dark'] .article) which removes scoped scoping from .article; change it so only the root is global and the component class remains scoped by replacing the selector with :global([data-tr-color-mode='dark']) .article and keep the rule body the same; apply the same pattern in docs/demos/anchor/controlled-search.vue for the .conversation-list selector to preserve scoped styles.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/demos/anchor/controlled-search.vue`:
- Around line 147-150: The dark-mode style selector currently globalizes the
entire selector via :global([data-tr-color-mode='dark'] .conversation-list),
leaking styles outside this SFC; change it so only the mode root is global
(e.g., :global([data-tr-color-mode='dark'])) and then scope the child
.conversation-list normally so variables like --anchor-bubble-bg and
--anchor-bubble-active-bg apply only to this component's .conversation-list;
update the selector around those CSS variables accordingly.
---
Nitpick comments:
In `@docs/demos/anchor/basic-source.vue`:
- Around line 116-118: The dark-mode CSS selector currently uses
:global([data-tr-color-mode='dark'] .article) which removes scoped scoping from
.article; change it so only the root is global and the component class remains
scoped by replacing the selector with :global([data-tr-color-mode='dark'])
.article and keep the rule body the same; apply the same pattern in
docs/demos/anchor/controlled-search.vue for the .conversation-list selector to
preserve scoped styles.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 951a15bf-e10e-438a-bc43-f81f5f5bd381
📒 Files selected for processing (2)
docs/demos/anchor/basic-source.vuedocs/demos/anchor/controlled-search.vue
Comment on lines
+147
to
+150
| :global([data-tr-color-mode='dark'] .conversation-list) { | ||
| --anchor-bubble-bg: color-mix(in srgb, #317af7 30%, var(--tr-container-bg-default)); | ||
| --anchor-bubble-active-bg: color-mix(in srgb, #317af7 40%, var(--tr-container-bg-default)); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for the same full-selector :global pattern in this file.
rg -n --type=vue ":global\\(\\[data-tr-color-mode='dark'\\]\\s+\\.[^)]+\\)" docs/demos/anchor/controlled-search.vueRepository: opentiny/tiny-robot
Length of output: 91
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="docs/demos/anchor/controlled-search.vue"
echo "== Context around lines 130-175 =="
nl -ba "$FILE" | sed -n '120,180p'
echo
echo "== Find :global patterns in this file (no unsupported --type flag) =="
rg -n ":global\\(" "$FILE"
echo
echo "== Find the specific full-selector :global([data-tr-color-mode='dark'] .conversation-list) pattern =="
rg -n ":global\\(\\[data-tr-color-mode='dark'\\]\\s+\\.[^)]+\\)" "$FILE" || trueRepository: opentiny/tiny-robot
Length of output: 159
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="docs/demos/anchor/controlled-search.vue"
echo "== Context around reported lines (130-180) =="
cat -n "$FILE" | sed -n '120,190p'
echo
echo "== All :global( occurrences in file =="
rg -n ":global\\(" "$FILE" || true
echo
echo "== Exact full-selector pattern from the comment (best-effort regex match) =="
rg -n ":global\\(\\[data-tr-color-mode='dark'\\][^)]*\\)" "$FILE" || true
echo
echo "== Specific .conversation-list occurrences (to see what selector wraps it) =="
rg -n "\\.conversation-list" "$FILE"Repository: opentiny/tiny-robot
Length of output: 2266
Avoid global leakage in the dark-mode selector for .conversation-list
In <style scoped>, :global([data-tr-color-mode='dark'] .conversation-list) makes the whole selector global; globalize only the mode root so .conversation-list remains scoped to this SFC.
Suggested patch
-:global([data-tr-color-mode='dark'] .conversation-list) {
+:global([data-tr-color-mode='dark']) .conversation-list {
--anchor-bubble-bg: color-mix(in srgb, `#317af7` 30%, var(--tr-container-bg-default));
--anchor-bubble-active-bg: color-mix(in srgb, `#317af7` 40%, var(--tr-container-bg-default));
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/demos/anchor/controlled-search.vue` around lines 147 - 150, The
dark-mode style selector currently globalizes the entire selector via
:global([data-tr-color-mode='dark'] .conversation-list), leaking styles outside
this SFC; change it so only the mode root is global (e.g.,
:global([data-tr-color-mode='dark'])) and then scope the child
.conversation-list normally so variables like --anchor-bubble-bg and
--anchor-bubble-active-bg apply only to this component's .conversation-list;
update the selector around those CSS variables accordingly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
暗色模式适配：
文档效果预览👉
优化前：
优化后：
Summary by CodeRabbit