From d75c52c93e341eff18371240ac499255d5890d22 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Thu, 29 Jan 2026 04:57:59 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Enhance=20dark=20mode=20and=20sy?=
 =?UTF-8?q?ntax=20highlighting=20styles=20for=20JSON=20viewer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/gamemaster/JsonViewer.vue  | 127 +++++++++++++++++-
 1 file changed, 123 insertions(+), 4 deletions(-)

diff --git a/code/websites/pokedex.online/src/components/gamemaster/JsonViewer.vue b/code/websites/pokedex.online/src/components/gamemaster/JsonViewer.vue
index b3fc578..dc3d838 100644
--- a/code/websites/pokedex.online/src/components/gamemaster/JsonViewer.vue
+++ b/code/websites/pokedex.online/src/components/gamemaster/JsonViewer.vue
@@ -151,7 +151,7 @@ defineExpose({
 .content-viewer {
   border: 1px solid #ddd;
   border-radius: 8px;
-  background: #fafafa;
+  background: #ffffff;
   max-height: 70vh;
   overflow: hidden;
 }
@@ -170,6 +170,12 @@ defineExpose({
 .lines-container {
   max-height: 65vh;
   overflow-y: auto;
+  background: #ffffff;
+}
+
+.content-viewer.dark-mode .scroller,
+.content-viewer.dark-mode .lines-container {
+  background: #1e1e1e;
 }
 
 .line {
@@ -178,18 +184,36 @@ defineExpose({
   padding: 2px 8px;
   font-size: 13px;
   cursor: pointer;
+  background: #ffffff !important;
+}
+
+.content-viewer.dark-mode .line {
+  background: #1e1e1e !important;
 }
 
 .line.selected {
-  background: rgba(0, 123, 255, 0.15);
+  background: rgba(102, 126, 234, 0.15) !important;
+}
+
+.content-viewer.dark-mode .line.selected {
+  background: rgba(102, 126, 234, 0.25) !important;
 }
 
 .line.highlight-match {
-  background: rgba(255, 234, 0, 0.2);
+  background: rgba(255, 234, 0, 0.25) !important;
+}
+
+.content-viewer.dark-mode .line.highlight-match {
+  background: rgba(255, 234, 0, 0.15) !important;
 }
 
 .line.current-result {
-  outline: 1px solid #ff9800;
+  outline: 2px solid #ff9800;
+  background: rgba(255, 193, 7, 0.3) !important;
+}
+
+.content-viewer.dark-mode .line.current-result {
+  background: rgba(255, 193, 7, 0.2) !important;
 }
 
 .line-number {
@@ -197,8 +221,103 @@ defineExpose({
   text-align: right;
   color: #999;
   user-select: none;
+  flex-shrink: 0;
 }
 
+.content-viewer.dark-mode .line-number {
+  color: #666;
+}
+
+/* Force transparent backgrounds on all elements inside lines */
+.line * {
+  background: transparent !important;
+}
+
+.line pre {
+  margin: 0;
+  background: transparent !important;
+  color: inherit;
+}
+
+.line pre code {
+  background: transparent !important;
+  color: inherit;
+  padding: 0 !important;
+}
+
+/* Light mode syntax highlighting */
+.content-viewer:not(.dark-mode) .line pre code {
+  color: #24292e !important;
+}
+
+.content-viewer:not(.dark-mode) :deep(.hljs) {
+  background: transparent !important;
+  color: #24292e !important;
+}
+
+.content-viewer:not(.dark-mode) :deep(.hljs-attr),
+.content-viewer:not(.dark-mode) :deep(.hljs-attribute) {
+  color: #6f42c1 !important;
+  background: transparent !important;
+}
+
+.content-viewer:not(.dark-mode) :deep(.hljs-string) {
+  color: #032f62 !important;
+  background: transparent !important;
+}
+
+.content-viewer:not(.dark-mode) :deep(.hljs-number) {
+  color: #005a9c !important;
+  background: transparent !important;
+}
+
+.content-viewer:not(.dark-mode) :deep(.hljs-literal) {
+  color: #d73a49 !important;
+  background: transparent !important;
+}
+
+/* Dark mode syntax highlighting */
+.content-viewer.dark-mode :deep(.hljs) {
+  background: transparent !important;
+  color: #e1e4e8 !important;
+}
+
+.content-viewer.dark-mode :deep(.hljs-attr),
+.content-viewer.dark-mode :deep(.hljs-attribute) {
+  color: #79b8ff !important;
+  background: transparent !important;
+}
+
+.content-viewer.dark-mode :deep(.hljs-string) {
+  color: #85e89d !important;
+  background: transparent !important;
+}
+
+.content-viewer.dark-mode :deep(.hljs-number) {
+  color: #79b8ff !important;
+  background: transparent !important;
+}
+
+.content-viewer.dark-mode :deep(.hljs-literal) {
+  color: #f97583 !important;
+  background: transparent !important;
+}
+
+.warning-banner {
+  background: #fff3cd;
+  border-top: 1px solid #ffc107;
+  color: #856404;
+  padding: 12px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.content-viewer.dark-mode .warning-banner {
+  background: #3d3400;
+  color: #ffeb3b;
+  border-color: #ffc107;
+}
+</style>
 .warning-banner {
   padding: 8px 10px;
   font-size: 13px;