Update custom.css

Author: Tuntii

docs/cookbook/theme/custom.css

@@ -1,21 +1,47 @@
-/* Premium Dark Theme - RustAPI Cookbook */
+/* Premium Responsive Theme - RustAPI Cookbook */
 
 :root {
+    /* Default to Dark Theme variables (matches implicit defaults or dark modes) */
     --bg-color: #0f172a;
     --sidebar-bg: #1e293b;
     --text-color: #e2e8f0;
     --heading-color: #f8fafc;
-    --accent-color: #06b6d4; /* Cyan */
+    --accent-color: #06b6d4;
+    /* Cyan */
     --accent-hover: #22d3ee;
     --border-color: #334155;
     --code-bg: #1e293b;
     --link-color: #38bdf8;
+
+    /* Common Fonts */
+    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+/* Light Theme Overrides */
+.light {
+    --bg-color: #ffffff;
+    --sidebar-bg: #f1f5f9;
+    /* Slate 100 */
+    --text-color: #334155;
+    /* Slate 700 */
+    --heading-color: #0f172a;
+    /* Slate 900 */
+    --accent-color: #0891b2;
+    /* Cyan 600 - darker for contrast */
+    --accent-hover: #06b6d4;
+    --border-color: #e2e8f0;
+    /* Slate 200 */
+    --code-bg: #f8fafc;
+    /* Slate 50 */
+    --link-color: #0284c7;
+    /* Sky 600 */
 }
 
 body {
     background-color: var(--bg-color);
     color: var(--text-color);
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    font-family: var(--font-primary);
 }
 
 /* Sidebar Styling */
@@ -29,18 +55,29 @@ body {
     scrollbar-color: var(--border-color) transparent;
 }
 
-.chapter li.active > a {
+.chapter li.active>a {
     color: var(--accent-color);
     border-left: 2px solid var(--accent-color);
     background: rgba(6, 182, 212, 0.1);
-    padding-left: 8px; /* Offset for border */
+    padding-left: 8px;
+    /* Offset for border */
+}
+
+/* Adjust active chapter bg for light mode */
+.light .chapter li.active>a {
+    background: rgba(8, 145, 178, 0.1);
 }
 
 .chapter a {
     color: #94a3b8;
     transition: all 0.2s ease;
 }
 
+.light .chapter a {
+    color: #64748b;
+    /* Slate 500 */
+}
+
 .chapter a:hover {
     color: var(--heading-color);
 }
@@ -50,7 +87,10 @@ body {
     line-height: 1.8;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
     color: var(--heading-color);
     font-weight: 700;
     margin-top: 2em;
@@ -66,6 +106,13 @@ h1 {
     display: inline-block;
 }
 
+/* Darker gradient for Light Mode */
+.light h1 {
+    background: linear-gradient(to right, #0891b2, #4f46e5);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 a {
     color: var(--link-color);
     text-decoration: none;
@@ -78,11 +125,12 @@ a:hover {
 }
 
 /* Code Blocks */
-pre, code {
+pre,
+code {
     background-color: var(--code-bg);
     border-radius: 8px;
     border: 1px solid var(--border-color);
-    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-family: var(--font-mono);
 }
 
 pre {
@@ -100,6 +148,12 @@ blockquote {
     color: #cbd5e1;
 }
 
+.light blockquote {
+    background: rgba(59, 130, 246, 0.05);
+    color: #334155;
+    border-left-color: #2563eb;
+}
+
 /* Table Styling */
 table {
     border-collapse: separate;
@@ -132,6 +186,10 @@ tr:hover td {
     background-color: rgba(255, 255, 255, 0.02);
 }
 
+.light tr:hover td {
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
 /* Scrollbars */
 ::-webkit-scrollbar {
     width: 8px;
@@ -149,4 +207,4 @@ tr:hover td {
 
 ::-webkit-scrollbar-thumb:hover {
     background: #475569;
-}
+}