Skip to content

fix: improve text visibility in warning box for dark mode in SettingsLog #1974

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

Merged
seefs001 merged 1 commit into from
Oct 6, 2025
+11 −10
Merged

fix: improve text visibility in warning box for dark mode in SettingsLog #1974

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 11 additions & 10 deletions web/src/pages/Setting/Operation/SettingsLog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,20 +106,21 @@ export default function SettingsLog(props) {
<Text type="tertiary"> ({t('约')} {daysDiff} {t('天前')})</Text>
)}
</p>
<div style={{
background: '#fff7e6',
border: '1px solid #ffd591',
padding: '12px',
<div style={{
background: '#fff7e6',
border: '1px solid #ffd591',
padding: '12px',
borderRadius: '4px',
marginTop: '12px'
marginTop: '12px',
color: '#333'
}}>
<Text type="warning" strong>⚠️ {t('注意')}：</Text>
<Text>{t('将删除')} </Text>
<Text strong type="danger">{targetTime}</Text>
<Text strong style={{ color: '#d46b08' }}>⚠️ {t('注意')}：</Text>
<Text style={{ color: '#333' }}>{t('将删除')} </Text>
<Text strong style={{ color: '#cf1322' }}>{targetTime}</Text>
Comment on lines +117 to +119

@coderabbitai coderabbitai Bot Oct 5, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 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 #d46b08 on #fff7e6
  • Red #cf1322 on #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}")
EOF

Length 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>
Comment on lines 120 to +123

@coderabbitai coderabbitai Bot Oct 5, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
{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.

</div>
<p style={{ marginTop: '12px' }}>
<Text type="danger">{t('此操作不可恢复，请仔细确认时间后再操作！')}</Text>
Expand Down