Replace background color in dark-mode

Author: JesusValeraDev

css/components/dark-mode.css

@@ -34,7 +34,7 @@
 
 /* Modern Dark Header with glassmorphism */
 .dark .site-header {
-  background: rgba(15, 23, 42, 0.85);
+  background: #0a0a0a;
   backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%);
   -webkit-backdrop-filter: blur(var(--backdrop-blur-header)) saturate(180%);
   border-bottom-color: rgba(51, 65, 85, 0.3);
@@ -87,7 +87,7 @@
 /* Mobile navigation overlay dark */
 @media (max-width: 1039px) {
   .dark .mobile-menu-overlay {
-    background: rgba(15, 23, 42, 0.98);
+    background: #0a0a0a;
     backdrop-filter: blur(var(--backdrop-blur-lg));
     -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
   }
@@ -133,20 +133,22 @@
 .dark #search {
   background-color: var(--color-dark-bg-secondary);
   color: var(--color-dark-text-primary);
-  border-color: var(--color-dark-border);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
+  border-color: #3a3a3a;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .dark #search:hover {
-  border-color: var(--color-phel-accent);
+  border-color: #4a4a4a;
   box-shadow: var(--shadow-dark-sm);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .dark #search:focus {
-  border-color: var(--color-phel-accent);
+  border-color: #5a5a5a;
   background-color: var(--color-dark-surface);
-  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2),
-              var(--shadow-dark-md);
+  box-shadow: 0 0 0 3px rgba(90, 90, 90, 0.3),
+              var(--shadow-dark-sm);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .dark #search::placeholder {

css/theme.css

@@ -17,29 +17,29 @@
   --color-light-border-subtle: #f1f5f9;
 
   /* Modern Color Palette - Dark Mode */
-  --color-dark-bg: #0f172a;
-  --color-dark-bg-secondary: #1e293b;
+  --color-dark-bg: #1e1e1e;
+  --color-dark-bg-secondary: #252525;
   --color-dark-text-primary: #f1f5f9;
   --color-dark-text-secondary: #cbd5e1;
   --color-dark-text-muted: #94a3b8;
   --color-dark-text-accent: #38bdf8;
   --color-dark-link: #818cf8;
-  --color-dark-border: #334155;
-  --color-dark-border-subtle: #1e293b;
-  --color-dark-header-footer-border: #1e293b;
-  --color-dark-header-bg: rgba(15, 23, 42, 0.8);
+  --color-dark-border: #3a3a3a;
+  --color-dark-border-subtle: #2a2a2a;
+  --color-dark-header-footer-border: #2a2a2a;
+  --color-dark-header-bg: #161616;
 
   /* Card & Surface Colors */
   --color-light-surface: #ffffff;
   --color-light-surface-hover: #f8fafc;
-  --color-dark-surface: #1e293b;
-  --color-dark-surface-hover: #334155;
+  --color-dark-surface: #252525;
+  --color-dark-surface-hover: #2f2f2f;
 
   /* Code & Catalogue */
   --color-light-code-bg: #f1f5f9;
   --color-light-code-inline-bg: #e2e8f0;
-  --color-dark-code-bg: #1e293b;
-  --color-dark-code-inline-bg: #334155;
+  --color-dark-code-bg: #252525;
+  --color-dark-code-inline-bg: #2f2f2f;
 
   /* Anchor Links */
   --color-light-anchor: #bbb;
@@ -62,7 +62,7 @@
   --color-phel-hover: rgba(99, 102, 241, 0.08);
   --color-phel-selection: rgba(99, 102, 241, 0.12);
   --color-phel-lines: #e2e8f0;
-  --color-phel-lines-dark: #334155;
+  --color-phel-lines-dark: #3a3a3a;
 
   /* Extended Color Palette */
   --color-blue-darker: #1e40af;
@@ -83,7 +83,7 @@
   --color-red-light: #f87171;
   --color-red-lighter: #fca5a5;
 
-  --color-gray-darker: #1e293b;
+  --color-gray-darker: #252525;
   --color-gray-dark: #475569;
   --color-gray-base: #64748b;
   --color-gray-light: #94a3b8;