fix: improve text visibility in warning box for dark mode in SettingsLog - #1974
Conversation
WalkthroughThe change updates inline styles and text coloring within a confirmation modal in web/src/pages/Setting/Operation/SettingsLog.jsx. It adjusts color properties for headings, body text, date highlight, and auxiliary days-difference text. No logic, control flow, or exported interfaces were modified. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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: 2
🧹 Nitpick comments (1)
web/src/pages/Setting/Operation/SettingsLog.jsx (1)
109-116: LGTM! Consider theme-aware background for better dark mode UX.The explicit
color: '#333'provides good contrast on the light yellow background and solves the immediate dark mode text visibility issue.However, the fixed light background (#fff7e6) may be jarring in dark mode. Consider making the warning box theme-aware in a future enhancement:
// Example future enhancement const isDarkMode = /* detect theme */; const warningBoxStyle = { background: isDarkMode ? '#2b2111' : '#fff7e6', border: isDarkMode ? '1px solid #594214' : '1px solid #ffd591', // ... other styles };
| <Text strong style={{ color: '#d46b08' }}>⚠️ {t('注意')}：</Text> | ||
| <Text style={{ color: '#333' }}>{t('将删除')} </Text> | ||
| <Text strong style={{ color: '#cf1322' }}>{targetTime}</Text> |
There was a problem hiding this comment.
🧩 Analysis chain
Verify color contrast ratios meet WCAG AA standards.
The explicit colors solve the dark mode visibility issue. Please verify the contrast ratios:
- Orange
#d46b08on#fff7e6 - Red
#cf1322on#fff7e6
Both should meet WCAG AA (4.5:1 for normal text, 3:1 for large text).
🏁 Script executed:
#!/bin/bash
# Verify WCAG color contrast ratios
python3 << 'EOF'
def hex_to_rgb(hex_color):
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def relative_luminance(rgb):
r, g, b = [x / 255.0 for x in rgb]
r = r / 12.92 if r <= 0.03928 else ((r + 0.055) / 1.055) ** 2.4
g = g / 12.92 if g <= 0.03928 else ((g + 0.055) / 1.055) ** 2.4
b = b / 12.92 if b <= 0.03928 else ((b + 0.055) / 1.055) ** 2.4
return 0.2126 * r + 0.7152 * g + 0.0722 * b
def contrast_ratio(color1, color2):
lum1 = relative_luminance(hex_to_rgb(color1))
lum2 = relative_luminance(hex_to_rgb(color2))
lighter = max(lum1, lum2)
darker = min(lum1, lum2)
return (lighter + 0.05) / (darker + 0.05)
bg = '#fff7e6'
colors = {
'Orange warning (#d46b08)': '#d46b08',
'Red danger (#cf1322)': '#cf1322',
'Dark gray (#333)': '#333',
'Light gray (#8c8c8c)': '#8c8c8c'
}
print("WCAG Contrast Ratios (Background: #fff7e6)")
print("=" * 50)
print("WCAG AA requires: 4.5:1 for normal text, 3:1 for large text")
print("WCAG AAA requires: 7:1 for normal text, 4.5:1 for large text")
print()
for name, color in colors.items():
ratio = contrast_ratio(bg, color)
status = "✓ PASS AA" if ratio >= 4.5 else ("✓ PASS AA Large" if ratio >= 3.0 else "✗ FAIL")
print(f"{name:30s} {ratio:5.2f}:1 {status}")
EOFLength of output: 574
Adjust warning text color for WCAG AA compliance
Orange #d46b08 on #fff7e6 yields 3.34:1 (fails 4.5:1 normal-text contrast; only meets 3:1 large-text). Use a darker shade or ensure it’s ≥18pt bold. Red #cf1322 (5.23:1) is fine.
🤖 Prompt for AI Agents
In web/src/pages/Setting/Operation/SettingsLog.jsx around lines 117-119, the
orange warning text uses #d46b08 which fails WCAG AA contrast against the
background (#fff7e6); replace that color with a darker orange that meets at
least 4.5:1 contrast (for example use ~#9a4700 or darker) or alternatively
increase the text to ≥18pt bold, and keep the red #cf1322 unchanged; update the
style value accordingly so the warning text meets WCAG AA.
| {daysDiff > 0 && ( | ||
| <Text type="tertiary"> ({t('约')} {daysDiff} {t('天前')})</Text> | ||
| <Text style={{ color: '#8c8c8c' }}> ({t('约')} {daysDiff} {t('天前')})</Text> | ||
| )} | ||
| <Text> {t('之前的所有日志')}</Text> | ||
| <Text style={{ color: '#333' }}> {t('之前的所有日志')}</Text> |
There was a problem hiding this comment.
Potential accessibility issue: Light gray may have insufficient contrast.
The light gray color #8c8c8c on the light yellow background #fff7e6 likely has a contrast ratio below 4.5:1, which fails WCAG AA standards for normal text.
Consider using a darker gray (e.g., #595959 or #666) to ensure the auxiliary "days ago" text remains readable for users with visual impairments.
Apply this diff to use a darker, more accessible gray:
- <Text style={{ color: '#8c8c8c' }}> ({t('约')} {daysDiff} {t('天前')})</Text>
+ <Text style={{ color: '#666' }}> ({t('约')} {daysDiff} {t('天前')})</Text>Note: The verification script in the previous comment will confirm the actual contrast ratios.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {daysDiff > 0 && ( | |
| <Text type="tertiary"> ({t('约')} {daysDiff} {t('天前')})</Text> | |
| <Text style={{ color: '#8c8c8c' }}> ({t('约')} {daysDiff} {t('天前')})</Text> | |
| )} | |
| <Text> {t('之前的所有日志')}</Text> | |
| <Text style={{ color: '#333' }}> {t('之前的所有日志')}</Text> | |
| {daysDiff > 0 && ( | |
| <Text style={{ color: '#666' }}> ({t('约')} {daysDiff} {t('天前')})</Text> | |
| )} | |
| <Text style={{ color: '#333' }}> {t('之前的所有日志')}</Text> |
🤖 Prompt for AI Agents
In web/src/pages/Setting/Operation/SettingsLog.jsx around lines 120 to 123, the
auxiliary "days ago" text uses color #8c8c8c which is too light for the page
background; replace that hex with a darker accessible gray such as #595959 or
#666 to meet contrast requirements, update the inline style accordingly, and run
the project's contrast verification script to confirm the ratio >= 4.5:1.
fix: improve text visibility in warning box for dark mode in SettingsLog
2 participants
PR 类型
PR 是否包含破坏性更新？
PR 描述
问题
在日志设置页面的历史日志删除确认对话框中，警告提示框使用固定的浅黄色背景（
#fff7e6），但文字颜色使用的是 Semi Design的主题色（
type="warning",type="danger",type="tertiary"）。在暗色模式下，这些主题色会变成白色或浅色，导致在浅黄色背景上可见性很差，用户难以阅读警告信息。解决方案
将警告框内所有文本组件的颜色从主题相关的
type属性改为显式的内联style颜色值：color: '#333'#d46b08（警告色）#cf1322（危险色）#8c8c8c#333这样无论在亮色还是暗色模式下，文字都能在浅黄色背景上保持良好的对比度和可读性。