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;