Fix code block still showing white text in dark mode (!important)
UX Fix: Code block contrast in dark mode Problem: - Code block with JSON example still white-on-white in dark mode - User reported: 'still white text on white bg' - Previous dark mode fix didn't override parent styles Root Cause: - Parent .field-hint and .info-list classes override .code-block - Need !important to force dark mode colors - <pre> tag selector needed more specificity Solution: - Added !important to dark mode color rules - Added explicit selectors for pre.code-block - Added nested selectors: .info-list .code-block, .field-hint .code-block - Ensures dark mode applies regardless of parent context Dark Mode Colors (enforced): - background: #2b2b2b (dark gray) - color: #e0e0e0 (light gray) - border: #444 (medium gray) Testing: - Run: node scripts/stage-frontend.mjs - Check: JSON code block in 'Agent certificate pinning' section - Verify: Dark background, light text, readable in dark mode Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -462,7 +462,8 @@ function formatDate(dateString) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
.code-block,
|
||||
pre.code-block {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
@@ -471,6 +472,26 @@ function formatDate(dateString) {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
color: #212529;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* Dark mode support for code blocks */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.code-block {
|
||||
background: #2b2b2b !important;
|
||||
border-color: #444 !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
/* Ensure pre tags inside lists also get dark mode */
|
||||
.info-list .code-block,
|
||||
.field-hint .code-block,
|
||||
pre.code-block {
|
||||
background: #2b2b2b !important;
|
||||
border-color: #444 !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
|
||||
Reference in New Issue
Block a user