🎨 Improve light and dark mode styles for content viewer with enhanced contrast and color adjustments

code/websites/pokedex.online/src/views/GamemasterExplorer.vue

@@ -586,12 +586,13 @@ onMounted(async () => {
 
 /* Content Viewer */
 .content-viewer {
-  background: #f8f8f8;
+  background: #ffffff;
   border: 1px solid #e0e0e0;
   border-radius: 6px;
   margin-bottom: 1rem;
   max-height: 50vh;
   overflow: auto;
+  color: #24292e;
 }
 
 .content-viewer.dark-mode {
@@ -614,6 +615,11 @@ onMounted(async () => {
   padding: 0.25rem 0.5rem;
   cursor: pointer;
   min-height: 20px;
+  background: #ffffff;
+}
+
+.content-viewer.dark-mode .line {
+  background: #1e1e1e;
 }
 
 @media (max-width: 768px) {
@@ -623,24 +629,40 @@ onMounted(async () => {
 }
 
 .line:hover {
-  background: rgba(0, 123, 255, 0.1);
+  background: rgba(102, 126, 234, 0.08);
+}
+
+.content-viewer.dark-mode .line:hover {
+  background: rgba(102, 126, 234, 0.15);
 }
 
 .line.selected {
-  background: rgba(0, 123, 255, 0.2);
+  background: rgba(102, 126, 234, 0.15);
+}
+
+.content-viewer.dark-mode .line.selected {
+  background: rgba(102, 126, 234, 0.25);
 }
 
 .line.highlight-match {
-  background: rgba(255, 235, 59, 0.4);
+  background: rgba(255, 235, 59, 0.3);
   border-left: 3px solid #ffc107;
 }
 
+.content-viewer.dark-mode .line.highlight-match {
+  background: rgba(255, 235, 59, 0.15);
+}
+
 .line.current-result {
-  background: rgba(255, 193, 7, 0.6) !important;
+  background: rgba(255, 193, 7, 0.4) !important;
   border-left: 5px solid #ff9800 !important;
   box-shadow: inset 0 0 0 1px #ff9800;
 }
 
+.content-viewer.dark-mode .line.current-result {
+  background: rgba(255, 193, 7, 0.25) !important;
+}
+
 .line-number {
   width: 4rem;
   text-align: right;
@@ -650,32 +672,43 @@ onMounted(async () => {
   user-select: none;
 }
 
+.content-viewer.dark-mode .line-number {
+  color: #666;
+}
+
 .line pre {
   margin: 0;
   flex: 1;
   white-space: pre;
   overflow-x: auto;
   background: transparent;
+  color: inherit;
 }
 
 .line pre code {
   background: transparent;
+  color: inherit;
 }
 
-/* Light mode syntax highlighting */
+/* Light mode syntax highlighting - high contrast colors */
 .content-viewer:not(.dark-mode) .line pre code {
   background-color: transparent;
   color: #24292e;
 }
 
-/* Improve contrast for light mode - darken attribute names and values */
-.content-viewer:not(.dark-mode) .hljs-attr {
+.content-viewer:not(.dark-mode) .hljs {
+  background: #ffffff;
+  color: #24292e;
+}
+
+.content-viewer:not(.dark-mode) .hljs-attr,
+.content-viewer:not(.dark-mode) .hljs-attribute {
   color: #6f42c1;
   font-weight: 600;
 }
 
 .content-viewer:not(.dark-mode) .hljs-string {
-  color: #0a3622;
+  color: #032f62;
   font-weight: 500;
 }
 
@@ -689,12 +722,39 @@ onMounted(async () => {
   font-weight: 600;
 }
 
+.content-viewer:not(.dark-mode) .hljs-name {
+  color: #24292e;
+  font-weight: 600;
+}
+
 /* Dark mode syntax highlighting */
 .content-viewer.dark-mode .line pre code {
   background-color: transparent;
   color: #e1e4e8;
 }
 
+.content-viewer.dark-mode .hljs {
+  background: #1e1e1e;
+  color: #e1e4e8;
+}
+
+.content-viewer.dark-mode .hljs-attr,
+.content-viewer.dark-mode .hljs-attribute {
+  color: #79b8ff;
+}
+
+.content-viewer.dark-mode .hljs-string {
+  color: #85e89d;
+}
+
+.content-viewer.dark-mode .hljs-number {
+  color: #79b8ff;
+}
+
+.content-viewer.dark-mode .hljs-literal {
+  color: #f97583;
+}
+
 .line-wrap .line pre {
   white-space: pre-wrap;
   word-break: break-all;