ui: fix dark mode

dist/index.html

@@ -2122,7 +2122,7 @@
 
         <p>To run the kernel you will also need some <strong><em>host code</em></strong>, which is executed on the CPU/host and takes care of preparing data allocations and loading data and code:</p>
 
-        <div class="l-body" style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
+        <div class="l-body code-block" style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
             <div>
                 <d-code block language="python">
                     // Host code                

dist/main.bundle.js

@@ -5680,7 +5680,7 @@ document.addEventListener("DOMContentLoaded", function () {
   document.head.appendChild(styleEl);
 
   // Inject dark mode CSS (scoped via html.dark)
-  var darkCSS = "\n    html.dark{color-scheme:dark}\n    html.dark body{background:#242525;color:#e5e7eb}\n    html.dark a{color:#93c5fd}\n    html.dark .figure-legend{color:#9ca3af}\n    html.dark d-article,html.dark d-article *{color:white!important;}\n    html.dark d-contents{background:#242525}\n    html.dark d-contents nav a{color:#cbd5e1}\n    html.dark d-contents nav a:hover{text-decoration:underline solid rgba(255,255,255,0.6)}\n    html.dark .note-box{background:#111;border-left-color:#888}\n    html.dark .note-box-title{color:#d1d5db}\n    html.dark .note-box-content{color:#e5e7eb}\n    html.dark .large-image-background{background:#242525}\n    html.dark .boxed-image{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6)}\n    html.dark #graph-all,html.dark #controls,html.dark .memory-block,html.dark .activation-memory,html.dark .gradient-memory{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6);color:#e5e7eb}\n    html.dark label,html.dark .memory-title{color:#e5e7eb}\n    html.dark .memory-value{color:#93c5fd}\n    html.dark input,html.dark select,html.dark textarea{background:#0f0f0f;color:#e5e7eb;border:1px solid #333}\n    html.dark input:hover,html.dark select:hover,html.dark textarea:hover{border-color:#60a5fa}\n    html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.35)}\n    html.dark input[type=range]{background:#333}\n    html.dark input[type=range]::-webkit-slider-thumb{background:#3b82f6}\n    html.dark .plotly_caption{color:#9ca3af}\n    html.dark .theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent}\n    html.dark d-article img{background:white}\n    html.dark summary {color:black !important;}\n    html.dark .katex-container {color:white !important;}\n    html.dark d-code {background: white!important;}\n    /* Table borders in dark mode */\n    html.dark table{border-color:#262626}\n    html.dark th,html.dark td{border-color:#262626}\n    html.dark thead tr,html.dark tbody tr{border-color:#262626}\n    html.dark d-byline, html.dark d-article{border-top: 1px solid rgba(255, 255, 255, 0.5);}\n    html.dark d-byline h3{color:white;}\n    html.dark d-math *, html.dark span.katex{color:white !important;}\n    html.dark d-appendix { color: white}\n    html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: white}\n    html.dark .l-body { background: white;}\n    \n    \n    ";
+  var darkCSS = "\n    html.dark{color-scheme:dark}\n    html.dark body{background:#242525;color:#e5e7eb}\n    html.dark a{color:#93c5fd}\n    html.dark .figure-legend{color:#9ca3af}\n    html.dark d-article,html.dark d-article *{color:white!important;}\n    html.dark d-contents{background:#242525}\n    html.dark d-contents nav a{color:#cbd5e1}\n    html.dark d-contents nav a:hover{text-decoration:underline solid rgba(255,255,255,0.6)}\n    html.dark .note-box{background:#111;border-left-color:#888}\n    html.dark .note-box-title{color:#d1d5db}\n    html.dark .note-box-content{color:#e5e7eb}\n    html.dark .large-image-background{background:#242525}\n    html.dark .boxed-image{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6)}\n    html.dark #graph-all,html.dark #controls,html.dark .memory-block,html.dark .activation-memory,html.dark .gradient-memory{background:#111;border-color:#262626;box-shadow:0 4px 6px rgba(0,0,0,.6);color:#e5e7eb}\n    html.dark label,html.dark .memory-title{color:#e5e7eb}\n    html.dark .memory-value{color:#93c5fd}\n    html.dark input,html.dark select,html.dark textarea{background:#0f0f0f;color:#e5e7eb;border:1px solid #333}\n    html.dark input:hover,html.dark select:hover,html.dark textarea:hover{border-color:#60a5fa}\n    html.dark input:focus,html.dark select:focus,html.dark textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.35)}\n    html.dark input[type=range]{background:#333}\n    html.dark input[type=range]::-webkit-slider-thumb{background:#3b82f6}\n    html.dark .plotly_caption{color:#9ca3af}\n    html.dark .theme-toggle-btn{background:rgba(30,30,30,0.85);border-color:transparent}\n    html.dark d-article img{background:white}\n    html.dark summary {color:black !important;}\n    html.dark .katex-container {color:white !important;}\n    html.dark d-code {background: white!important;}\n    html.dark .code-block div { background: white!important;}\n    html.dark .code-block div p { color: black!important;}\n    /* Table borders in dark mode */\n    html.dark table{border-color:rgba(255,255,255,0.3)}\n    html.dark th,html.dark td{border-color:rgba(255,255,255,0.3)}\n    html.dark thead tr,html.dark tbody tr{border-color:rgba(255,255,255,0.3)}\n    html.dark d-byline, html.dark d-article{border-top: 1px solid rgba(255, 255, 255, 0.5);}\n    html.dark d-byline h3{color:white;}\n    html.dark d-math *, html.dark span.katex{color:white !important;}\n    html.dark d-appendix { color: white}\n    html.dark h2 { border-bottom: 1px solid rgba(43, 33, 33, 0.5);}\n    html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: white}\n    \n    \n    ";
   var darkStyleEl = document.createElement('style');
   darkStyleEl.id = 'darkmode-css';
   darkStyleEl.textContent = darkCSS;

src/index.html

@@ -2122,7 +2122,7 @@
 
         <p>To run the kernel you will also need some <strong><em>host code</em></strong>, which is executed on the CPU/host and takes care of preparing data allocations and loading data and code:</p>
 
-        <div class="l-body" style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
+        <div class="l-body code-block" style="display: grid; grid-template-columns: 1fr 1fr; align-items: center;">
             <div>
                 <d-code block language="python">
                     // Host code                

src/index.js

@@ -48,16 +48,18 @@ document.addEventListener("DOMContentLoaded", () => {
     html.dark summary {color:black !important;}
     html.dark .katex-container {color:white !important;}
     html.dark d-code {background: white!important;}
+    html.dark .code-block div { background: white!important;}
+    html.dark .code-block div p { color: black!important;}
     /* Table borders in dark mode */
-    html.dark table{border-color:#262626}
-    html.dark th,html.dark td{border-color:#262626}
-    html.dark thead tr,html.dark tbody tr{border-color:#262626}
+    html.dark table{border-color:rgba(255,255,255,0.3)}
+    html.dark th,html.dark td{border-color:rgba(255,255,255,0.3)}
+    html.dark thead tr,html.dark tbody tr{border-color:rgba(255,255,255,0.3)}
     html.dark d-byline, html.dark d-article{border-top: 1px solid rgba(255, 255, 255, 0.5);}
     html.dark d-byline h3{color:white;}
     html.dark d-math *, html.dark span.katex{color:white !important;}
     html.dark d-appendix { color: white}
+    html.dark h2 { border-bottom: 1px solid rgba(43, 33, 33, 0.5);}
     html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: white}
-    html.dark .l-body { background: white;}
     
     
     `;