fix dual color on dark theme

Author: hrx01-dev

src/css/custom.css

@@ -417,6 +417,12 @@ body {
 }
 
 [data-theme="dark"] {
+  --ifm-background-color: #000000;
+  --ifm-background-surface-color: #0a0a0a;
+  --ifm-navbar-background-color: #000000;
+  --ifm-footer-background-color: #000000;
+  --ifm-toc-border-color: #2a2a2a;
+  --ifm-menu-color-background-active: #111111;
   --ifm-color-primary: #60a5fa;
   --ifm-color-primary-dark: #3b82f6;
   --ifm-color-primary-darker: #2563eb;
@@ -428,16 +434,16 @@ body {
 
   /* Global dark theme tokens used across feature pages (courses, broadcasts, sponsors, etc.) */
   /* Backgrounds */
-  --dark-bg-primary: #0b1220;
-  /* base page background (deep navy) */
-  --dark-bg-secondary: #0f172a;
+  --dark-bg-primary: #000000;
+  /* base page background (black) */
+  --dark-bg-secondary: #0a0a0a;
   /* section alt background */
-  --dark-bg-tertiary: #111827;
+  --dark-bg-tertiary: #111111;
   /* subtle surfaces */
   /* Cards */
-  --dark-card-bg: #111827;
+  --dark-card-bg: #111111;
   /* card background */
-  --dark-card-hover-bg: #0f172a;
+  --dark-card-hover-bg: #1a1a1a;
   /* card hover background */
   /* Text */
   --dark-text-primary: #e5e7eb;
@@ -2099,7 +2105,7 @@ html[data-theme="dark"] {
 
 /* TOC inner wrapper — sticky; border-left here so the vertical line
    only spans the height of the TOC content, not the full page */
-.blog-wrapper .col.col--2 > div {
+.blog-wrapper .col.col--2>div {
   position: sticky !important;
   top: calc(var(--ifm-navbar-height, 60px) + 1rem) !important;
   max-height: calc(100vh - var(--ifm-navbar-height, 60px) - 2rem) !important;
@@ -2108,7 +2114,7 @@ html[data-theme="dark"] {
   scrollbar-width: none !important;
 }
 
-.blog-wrapper .col.col--2 > div::-webkit-scrollbar {
+.blog-wrapper .col.col--2>div::-webkit-scrollbar {
   display: none !important;
 }
 
@@ -2252,7 +2258,7 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
     border-left: none !important;
   }
 
-  .blog-wrapper .col.col--2 > div {
+  .blog-wrapper .col.col--2>div {
     position: static !important;
     max-height: none !important;
     overflow-y: visible !important;