From 1a7bb9bd34a84245e19e179f90da466dd81143ac Mon Sep 17 00:00:00 2001
From: Proudlock <270015376@geaerospace.com>
Date: Mon, 14 Sep 2026 15:48:52 -0400
Subject: [PATCH] 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>
---
 .../frontend/views/ServerCertSettings.vue     | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/plugins/endpoints/frontend/views/ServerCertSettings.vue b/plugins/endpoints/frontend/views/ServerCertSettings.vue
index 9c91db64..e814613d 100644
--- a/plugins/endpoints/frontend/views/ServerCertSettings.vue
+++ b/plugins/endpoints/frontend/views/ServerCertSettings.vue
@@ -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 {