Skip to content

fix(styles): improve dark mode compatibility for anchor and drag overlay demos #352

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

Open
SonyLeo wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

fix(styles): improve dark mode compatibility for anchor and drag overlay demos #352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d24053c
fix(styles): update colors and borders for dark mode compatibility in…
SonyLeo May 21, 2026
5554d14
fix(styles): update borders and colors for dark mode compatibility in…
SonyLeo May 21, 2026
b25cb4c
fix(styles): remove hardcoded color for improved dark mode compatibil…
SonyLeo May 21, 2026
5d67ae2
fix: review suggestion
SonyLeo May 22, 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
19 changes: 12 additions & 7 deletions docs/demos/anchor/basic-source.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,23 +100,28 @@ const items = sections.map((section) => ({

.tip {
margin: 0;
color: #4f647a;
color: var(--tr-text-secondary);
line-height: 1.5;
}

.article {
--anchor-section-active-bg: #b9d7ff;
display: grid;
gap: 16px;
height: 100%;
overflow: auto;
padding: 24px 28px;
}

:global([data-tr-color-mode='dark'] .article) {
--anchor-section-active-bg: color-mix(in srgb, #317af7 40%, var(--vp-c-bg));
}

.article-section {
padding: 20px 24px;
border: 1px solid #eef3f8;
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
background: #fff;
color: var(--tr-text-secondary);
scroll-margin-top: 16px;
}

Expand All @@ -127,17 +132,17 @@ const items = sections.map((section) => ({
@keyframes section-active {
0%,
25% {
background-color: #b9d7ff;
background-color: var(--anchor-section-active-bg);
}
45% {
background-color: #fff;
background-color: var(--vp-c-bg);
}
65%,
85% {
background-color: #b9d7ff;
background-color: var(--anchor-section-active-bg);
}
100% {
background-color: #fff;
background-color: var(--vp-c-bg);
}
}

Expand Down
17 changes: 12 additions & 5 deletions docs/demos/anchor/controlled-search.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,12 +136,19 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => {
}

.conversation-list {
--anchor-bubble-bg: var(--tr-color-primary-light);
--anchor-bubble-active-bg: #b9d7ff;
--tr-bubble-list-gap: 16px;
--tr-bubble-list-padding: 24px 72px 40px;
--tr-bubble-max-width: 560px;
height: 100%;
}

: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));
}
Comment on lines +147 to +150
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 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.vue

Repository: 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" || true

Repository: 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.


.nav.is-right {
right: 16px;
}
Expand All @@ -151,7 +158,7 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => {
}

:deep(.user-bubble-target) {
--tr-bubble-box-bg: var(--tr-color-primary-light);
--tr-bubble-box-bg: var(--anchor-bubble-bg);
scroll-margin-top: 20px;
}

Expand All @@ -162,17 +169,17 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => {
@keyframes user-bubble-active-flash {
0%,
25% {
background-color: #b9d7ff;
background-color: var(--anchor-bubble-active-bg);
}
45% {
background-color: var(--tr-color-primary-light);
background-color: var(--anchor-bubble-bg);
}
65%,
85% {
background-color: #b9d7ff;
background-color: var(--anchor-bubble-active-bg);
}
100% {
background-color: var(--tr-color-primary-light);
background-color: var(--anchor-bubble-bg);
}
}
</style>
6 changes: 3 additions & 3 deletions docs/demos/anchor/demo-shell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
align-items: center;
flex-wrap: wrap;
gap: var(--anchor-demo-controls-gap, 12px 16px);
color: var(--anchor-demo-controls-color, #4f647a);
color: var(--tr-text-secondary);
font-size: 13px;
}

Expand All @@ -28,7 +28,7 @@
position: relative;
height: var(--anchor-demo-stage-height, 420px);
overflow: hidden;
border: 1px solid var(--anchor-demo-stage-border, #dfe7f2);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
background: var(--anchor-demo-stage-bg, #fff);
background: var(--tr-container-bg-default);
}
20 changes: 9 additions & 11 deletions docs/demos/drag-overlay/basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ function handleFilesRejected(rejection: FileRejection) {
.demo-section {
margin-bottom: 10px;
padding: 20px;
border: 1px solid #e0e0e0;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
}

Expand All @@ -152,19 +152,18 @@ function handleFilesRejected(rejection: FileRejection) {

.demo-section h3 {
margin-top: 0;
color: #333;
color: var(--vp-c-text-1);
}

.demo-section p {
color: #666;
color: var(--vp-c-text-1);
margin-bottom: 16px;
}

/* 聊天容器样式 */
.chat-container {
border: 1px solid #ddd;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
background: white;
min-height: 300px;
display: flex;
flex-direction: column;
Expand All @@ -174,16 +173,15 @@ function handleFilesRejected(rejection: FileRejection) {

.chat-header {
padding: 12px 16px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
border: 1px solid var(--vp-c-divider);
display: flex;
justify-content: space-between;
align-items: center;
}

.chat-header h4 {
margin: 0;
color: #333;
color: var(--vp-c-text-1);
}

.drag-indicator {
Expand Down Expand Up @@ -213,24 +211,24 @@ function handleFilesRejected(rejection: FileRejection) {
}

.message-content {
background: #f1f3f4;
padding: 8px 12px;
background-color: var(--tr-bubble-box-bg);
border-radius: 18px;
display: inline-block;
max-width: 70%;
}

.chat-input {
padding: 12px 16px;
border-top: 1px solid #e9ecef;
border: 1px solid var(--vp-c-divider);
display: flex;
gap: 8px;
}

.chat-input input {
flex: 1;
padding: 8px 12px;
border: 1px solid #ddd;
border: 1px solid var(--vp-c-divider);
border-radius: 20px;
outline: none;
}
Expand Down
6 changes: 3 additions & 3 deletions docs/demos/drag-overlay/custom-overlay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ function handleImageError(rejection: FileRejection) {
.demo-section {
margin-bottom: 40px;
padding: 20px;
border: 1px solid #e0e0e0;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
}

Expand All @@ -86,7 +86,7 @@ function handleImageError(rejection: FileRejection) {

/* 图片上传区域样式 */
.image-upload-area {
border: 2px dashed #ddd;
border: 2px dashed var(--vp-c-divider);
border-radius: 8px;
min-height: 200px;
display: flex;
Expand Down Expand Up @@ -140,7 +140,7 @@ function handleImageError(rejection: FileRejection) {
text-align: center;
color: white;
padding: 20px;
border: 2px dashed white;
border: 2px dashed var(--vp-c-divider);
border-radius: 8px;
}

Expand Down
6 changes: 3 additions & 3 deletions docs/demos/drag-overlay/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { vDropzone } from '@opentiny/tiny-robot'
.demo-section {
margin-bottom: 40px;
padding: 20px;
border: 1px solid #e0e0e0;
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
}

Expand All @@ -39,13 +39,13 @@ import { vDropzone } from '@opentiny/tiny-robot'

/* 禁用状态样式 */
.disabled-area {
border: 2px solid #ccc;
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
background: var(--vp-c-bg);
}

.disabled-area.disabled {
Expand Down
8 changes: 0 additions & 8 deletions packages/components/src/styles/components/anchor.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,13 @@
marker-height: 4px;
marker-radius: 64px;
marker-track-size: 8px;
bg: var(--tr-container-bg-default);
border: color-mix(in srgb, var(--tr-border-color-default) 32%, transparent);
shadow: var(--tr-shadow-sm);
item-color: var(--tr-text-secondary);
item-color-active: var(--tr-color-primary);
item-bg-hover: var(--tr-container-bg-hover);
item-label-font-size: var(--tr-font-size-sm);
item-label-font-weight: var(--tr-font-weight-regular);
item-label-line-height: 24px;
item-label-letter-spacing: 0px;
marker-color: color-mix(in srgb, var(--tr-text-tertiary) 50%, transparent);
marker-color-active: var(--tr-color-primary);
tooltip-bg: var(--tr-container-bg-default);
tooltip-color: var(--tr-text-primary);
tooltip-shadow: var(--tr-shadow-sm);
search-bg: var(--tr-container-bg-default);
search-color: var(--tr-text-primary);
search-border: color-mix(in srgb, var(--tr-border-color-default) 42%, transparent);
Expand Down
20 changes: 20 additions & 0 deletions packages/components/src/styles/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,16 @@
--tr-container-bg-active: rgba(0, 0, 0, 0.15);
--tr-container-bg-disabled: rgba(0, 0, 0, 0.04);

/* ===== Anchor ===== */
--tr-anchor-bg: #ffffff;
--tr-anchor-border: transparent;
--tr-anchor-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--tr-anchor-item-color: var(--tr-text-primary);
--tr-anchor-marker-color: var(--tr-text-disabled);
--tr-anchor-tooltip-bg: #ffffff;
--tr-anchor-tooltip-color: var(--tr-text-primary);
--tr-anchor-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

/* ===== MCP Server Picker ===== */
--tr-mcp-server-picker-bg-default: #ffffff;
--tr-mcp-server-picker-bg-default-2: #ffffff;
Expand Down Expand Up @@ -234,6 +244,16 @@
--tr-container-bg-active: rgba(255, 255, 255, 0.15);
--tr-container-bg-disabled: rgba(255, 255, 255, 0.06);

/* ===== Anchor ===== */
--tr-anchor-bg: #333333;
--tr-anchor-border: transparent;
--tr-anchor-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--tr-anchor-item-color: var(--tr-text-primary);
--tr-anchor-marker-color: var(--tr-text-secondary);
--tr-anchor-tooltip-bg: #484848;
--tr-anchor-tooltip-color: var(--tr-text-primary);
--tr-anchor-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

/* ===== 阴影系统 ===== */
--tr-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.48);
--tr-shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
Expand Down
Loading