🎨 Improve readability by reformatting theme assignment logic in highlight directive

code/websites/pokedex.online/src/directives/highlight.js

@@ -64,7 +64,8 @@ function createHighlightObserver(el, theme) {
 export const vHighlight = {
   mounted(el, binding) {
     const config = binding.value || {};
-    const theme = typeof config === 'string' ? config : (config.theme || 'github-dark');
+    const theme =
+      typeof config === 'string' ? config : config.theme || 'github-dark';
 
     // Store observer on element for cleanup
     el._highlightObserver = createHighlightObserver(el, theme);
@@ -72,9 +73,15 @@ export const vHighlight = {
 
   updated(el, binding) {
     const newConfig = binding.value || {};
-    const newTheme = typeof newConfig === 'string' ? newConfig : (newConfig.theme || 'github-dark');
+    const newTheme =
+      typeof newConfig === 'string'
+        ? newConfig
+        : newConfig.theme || 'github-dark';
     const oldConfig = binding.oldValue || {};
-    const oldTheme = typeof oldConfig === 'string' ? oldConfig : (oldConfig.theme || 'github-dark');
+    const oldTheme =
+      typeof oldConfig === 'string'
+        ? oldConfig
+        : oldConfig.theme || 'github-dark';
 
     // If theme changed, re-highlight
     if (newTheme !== oldTheme && el.classList.contains('hljs')) {

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

@@ -1109,6 +1109,23 @@ onMounted(() => {
   flex: 1;
   white-space: pre;
   overflow-x: auto;
+  background: transparent;
+}
+
+.line pre code {
+  background: transparent;
+}
+
+/* Light mode syntax highlighting */
+.content-viewer:not(.dark-mode) .line pre code {
+  background-color: transparent;
+  color: #24292e;
+}
+
+/* Dark mode syntax highlighting */
+.content-viewer.dark-mode .line pre code {
+  background-color: transparent;
+  color: #e1e4e8;
 }
 
 .line-wrap .line pre {