Theme Consistency Visual Inspection
Inspected Target: https://app.dashboard-example.io/analytics
Surfaces Inspected 42
Confirmed Issues 3
Affected Components 3
Synchronized Side-by-Side
Viewport Scroll Synchronized
Light Mode Active html[data-theme='light']
Light Mode Viewport Evidence
#1 High
#2 High
#3 Medium
Dark Mode Active html[data-theme='dark']
Dark Mode Viewport Evidence
#1 High
#2 High
#3 Medium
Issue Distribution Click bar to filter
Card Container
1
Dialog / Modal
1
Surface Border
1
#1 Unintended Light Card Surface
High
.metric-card.summary-kpi
Light Theme
#ffffff
Border: 1px solid #e2e8f0
Dark Theme
#ffffff
Border: 1px solid #e2e8f0

Hardcoded white background remains applied under dark mode context, causing intense glare and contrasting harshly with dark background #0f172a.

AI Fix Prompt
In .metric-card.summary-kpi set background-color: var(--surface-bg) and border-color: var(--border-subtle); instead of fixed hex #fff.
#2 Bleaching Bottom Data Table Surface
High
section.recent-logs-panel
Light Theme
#ffffff
Border: 1px solid #e2e8f0
Dark Theme
#f1f5f9
Border: 1px solid #e2e8f0

Surface switches from #ffffff in light mode to #f1f5f9 (light grey) in dark mode, failing theme inversion.

AI Fix Prompt
Add [data-theme='dark'] section.recent-logs-panel { background-color: #1e293b; border-color: #334155; }
#3 High-Contrast Border Inversion Glitch
Medium
.chart-container-widget
Light Theme
#ffffff
Border: 1px solid #cbd5e1
Dark Theme
#1e293b
Border: 1px solid #ffffff

Border fails subtle adaptation and flips to stark white (#ffffff), introducing an unstyled harsh outline in dark mode.

AI Fix Prompt
Update .chart-container-widget border rule in dark stylesheet to border: 1px solid rgba(255, 255, 255, 0.12).