Fix syntax highlighting to respect light/dark mode

- Changed prose-invert to dark:prose-invert for conditional dark mode
- Updated all CSS selectors to use .prose prefix for proper specificity
- Set backgrounds on pre elements instead of code elements
- Made hljs backgrounds transparent to show pre background
- Ensures code blocks properly switch between GitHub Light/Dark themes

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: testac974

website/app/book/[part]/[chapter]/[section]/page.tsx

@@ -76,7 +76,7 @@ export default async function BookSectionPage({ params }: PageProps) {
       </header>
 
       {/* Content with inline mermaid diagrams */}
-      <div className="prose prose-invert prose-green max-w-none">
+      <div className="prose dark:prose-invert prose-green max-w-none">
         {htmlParts.map((htmlPart, index) => (
           <div key={`content-${index}`}>
             {/* Render HTML content chunk */}

website/styles/globals.css

@@ -96,204 +96,205 @@ body {
 /* Code block styling with light/dark mode support */
 @layer components {
   /* Base code block styling */
-  pre {
+  .prose pre {
     @apply rounded-lg border border-border p-4 overflow-x-auto my-6;
   }
 
-  pre code {
+  .prose pre code {
     @apply text-sm font-mono;
+    background: transparent !important;
   }
 
   /* Light mode syntax highlighting - GitHub Light theme */
-  :root pre code {
+  .prose pre {
     background: #f6f8fa;
   }
 
-  :root .hljs {
+  .prose .hljs {
     color: #24292f;
-    background: #f6f8fa;
+    background: transparent;
   }
 
-  :root .hljs-doctag,
-  :root .hljs-keyword,
-  :root .hljs-meta .hljs-keyword,
-  :root .hljs-template-tag,
-  :root .hljs-template-variable,
-  :root .hljs-type,
-  :root .hljs-variable.language_ {
+  .prose .hljs-doctag,
+  .prose .hljs-keyword,
+  .prose .hljs-meta .hljs-keyword,
+  .prose .hljs-template-tag,
+  .prose .hljs-template-variable,
+  .prose .hljs-type,
+  .prose .hljs-variable.language_ {
     color: #d73a49;
   }
 
-  :root .hljs-title,
-  :root .hljs-title.class_,
-  :root .hljs-title.class_.inherited__,
-  :root .hljs-title.function_ {
+  .prose .hljs-title,
+  .prose .hljs-title.class_,
+  .prose .hljs-title.class_.inherited__,
+  .prose .hljs-title.function_ {
     color: #6f42c1;
   }
 
-  :root .hljs-attr,
-  :root .hljs-attribute,
-  :root .hljs-literal,
-  :root .hljs-meta,
-  :root .hljs-number,
-  :root .hljs-operator,
-  :root .hljs-selector-attr,
-  :root .hljs-selector-class,
-  :root .hljs-selector-id,
-  :root .hljs-variable {
+  .prose .hljs-attr,
+  .prose .hljs-attribute,
+  .prose .hljs-literal,
+  .prose .hljs-meta,
+  .prose .hljs-number,
+  .prose .hljs-operator,
+  .prose .hljs-selector-attr,
+  .prose .hljs-selector-class,
+  .prose .hljs-selector-id,
+  .prose .hljs-variable {
     color: #005cc5;
   }
 
-  :root .hljs-meta .hljs-string,
-  :root .hljs-regexp,
-  :root .hljs-string {
+  .prose .hljs-meta .hljs-string,
+  .prose .hljs-regexp,
+  .prose .hljs-string {
     color: #032f62;
   }
 
-  :root .hljs-built_in,
-  :root .hljs-symbol {
+  .prose .hljs-built_in,
+  .prose .hljs-symbol {
     color: #e36209;
   }
 
-  :root .hljs-code,
-  :root .hljs-comment,
-  :root .hljs-formula {
+  .prose .hljs-code,
+  .prose .hljs-comment,
+  .prose .hljs-formula {
     color: #6a737d;
   }
 
-  :root .hljs-name,
-  :root .hljs-quote,
-  :root .hljs-selector-pseudo,
-  :root .hljs-selector-tag {
+  .prose .hljs-name,
+  .prose .hljs-quote,
+  .prose .hljs-selector-pseudo,
+  .prose .hljs-selector-tag {
     color: #22863a;
   }
 
-  :root .hljs-subst {
+  .prose .hljs-subst {
     color: #24292f;
   }
 
-  :root .hljs-section {
+  .prose .hljs-section {
     color: #005cc5;
     font-weight: bold;
   }
 
-  :root .hljs-bullet {
+  .prose .hljs-bullet {
     color: #735c0f;
   }
 
-  :root .hljs-emphasis {
+  .prose .hljs-emphasis {
     color: #24292f;
     font-style: italic;
   }
 
-  :root .hljs-strong {
+  .prose .hljs-strong {
     color: #24292f;
     font-weight: bold;
   }
 
-  :root .hljs-addition {
+  .prose .hljs-addition {
     color: #22863a;
     background-color: #f0fff4;
   }
 
-  :root .hljs-deletion {
+  .prose .hljs-deletion {
     color: #b31d28;
     background-color: #ffeef0;
   }
 
   /* Dark mode syntax highlighting - GitHub Dark theme */
-  .dark pre code {
+  .dark .prose pre {
     background: #0d1117;
   }
 
-  .dark .hljs {
+  .dark .prose .hljs {
     color: #e6edf3;
-    background: #0d1117;
+    background: transparent;
   }
 
-  .dark .hljs-doctag,
-  .dark .hljs-keyword,
-  .dark .hljs-meta .hljs-keyword,
-  .dark .hljs-template-tag,
-  .dark .hljs-template-variable,
-  .dark .hljs-type,
-  .dark .hljs-variable.language_ {
+  .dark .prose .hljs-doctag,
+  .dark .prose .hljs-keyword,
+  .dark .prose .hljs-meta .hljs-keyword,
+  .dark .prose .hljs-template-tag,
+  .dark .prose .hljs-template-variable,
+  .dark .prose .hljs-type,
+  .dark .prose .hljs-variable.language_ {
     color: #ff7b72;
   }
 
-  .dark .hljs-title,
-  .dark .hljs-title.class_,
-  .dark .hljs-title.class_.inherited__,
-  .dark .hljs-title.function_ {
+  .dark .prose .hljs-title,
+  .dark .prose .hljs-title.class_,
+  .dark .prose .hljs-title.class_.inherited__,
+  .dark .prose .hljs-title.function_ {
     color: #d2a8ff;
   }
 
-  .dark .hljs-attr,
-  .dark .hljs-attribute,
-  .dark .hljs-literal,
-  .dark .hljs-meta,
-  .dark .hljs-number,
-  .dark .hljs-operator,
-  .dark .hljs-selector-attr,
-  .dark .hljs-selector-class,
-  .dark .hljs-selector-id,
-  .dark .hljs-variable {
+  .dark .prose .hljs-attr,
+  .dark .prose .hljs-attribute,
+  .dark .prose .hljs-literal,
+  .dark .prose .hljs-meta,
+  .dark .prose .hljs-number,
+  .dark .prose .hljs-operator,
+  .dark .prose .hljs-selector-attr,
+  .dark .prose .hljs-selector-class,
+  .dark .prose .hljs-selector-id,
+  .dark .prose .hljs-variable {
     color: #79c0ff;
   }
 
-  .dark .hljs-meta .hljs-string,
-  .dark .hljs-regexp,
-  .dark .hljs-string {
+  .dark .prose .hljs-meta .hljs-string,
+  .dark .prose .hljs-regexp,
+  .dark .prose .hljs-string {
     color: #a5d6ff;
   }
 
-  .dark .hljs-built_in,
-  .dark .hljs-symbol {
+  .dark .prose .hljs-built_in,
+  .dark .prose .hljs-symbol {
     color: #ffa657;
   }
 
-  .dark .hljs-code,
-  .dark .hljs-comment,
-  .dark .hljs-formula {
+  .dark .prose .hljs-code,
+  .dark .prose .hljs-comment,
+  .dark .prose .hljs-formula {
     color: #8b949e;
   }
 
-  .dark .hljs-name,
-  .dark .hljs-quote,
-  .dark .hljs-selector-pseudo,
-  .dark .hljs-selector-tag {
+  .dark .prose .hljs-name,
+  .dark .prose .hljs-quote,
+  .dark .prose .hljs-selector-pseudo,
+  .dark .prose .hljs-selector-tag {
     color: #7ee787;
   }
 
-  .dark .hljs-subst {
+  .dark .prose .hljs-subst {
     color: #e6edf3;
   }
 
-  .dark .hljs-section {
+  .dark .prose .hljs-section {
     color: #79c0ff;
     font-weight: bold;
   }
 
-  .dark .hljs-bullet {
+  .dark .prose .hljs-bullet {
     color: #d29922;
   }
 
-  .dark .hljs-emphasis {
+  .dark .prose .hljs-emphasis {
     color: #e6edf3;
     font-style: italic;
   }
 
-  .dark .hljs-strong {
+  .dark .prose .hljs-strong {
     color: #e6edf3;
     font-weight: bold;
   }
 
-  .dark .hljs-addition {
+  .dark .prose .hljs-addition {
     color: #aff5b4;
     background-color: #033a16;
   }
 
-  .dark .hljs-deletion {
+  .dark .prose .hljs-deletion {
     color: #ffdcd7;
     background-color: #67060c;
   }