Improve docs theme contrast and code readability

Author: Shashikant86

docs/stylesheets/extra.css

@@ -3,28 +3,46 @@
   --md-primary-fg-color--light: #1e293b;
   --md-primary-fg-color--dark: #020617;
   --md-accent-fg-color: #0f766e;
+  --md-default-bg-color: #ffffff;
+  --md-default-bg-color--light: #f8fafc;
+  --md-default-bg-color--lighter: #eef2f7;
+  --md-default-fg-color: #0f172a;
+  --md-default-fg-color--light: #334155;
+  --md-default-fg-color--lighter: #64748b;
   --codexopt-hero-start: #eff6ff;
   --codexopt-hero-end: #ecfeff;
-  --codexopt-card-border: rgba(15, 23, 42, 0.08);
+  --codexopt-card-border: rgba(15, 23, 42, 0.1);
+  --codexopt-card-bg: #ffffff;
+  --codexopt-card-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
+  --codexopt-link: #0f766e;
+  --codexopt-code-bg: #f8fafc;
+  --codexopt-code-fg: #0f172a;
+  --codexopt-pre-bg: #0f172a;
+  --codexopt-pre-fg: #e2e8f0;
 }
 
 [data-md-color-scheme="slate"] {
   --md-default-bg-color: #020617;
-  --md-default-bg-color--light: #0b1120;
-  --md-default-bg-color--lighter: #111827;
-  --md-default-bg-color--lightest: #172033;
-  --md-default-fg-color: #e5edf7;
-  --md-default-fg-color--light: #c4d2e3;
+  --md-default-bg-color--light: #081120;
+  --md-default-bg-color--lighter: #111b2d;
+  --md-default-bg-color--lightest: #172238;
+  --md-default-fg-color: #f1f5f9;
+  --md-default-fg-color--light: #d6e0ec;
   --md-default-fg-color--lighter: #94a3b8;
   --md-primary-fg-color: #020617;
   --md-primary-fg-color--light: #0f172a;
   --md-primary-fg-color--dark: #000000;
-  --md-accent-fg-color: #5eead4;
-  --codexopt-hero-start: rgba(15, 23, 42, 0.92);
-  --codexopt-hero-end: rgba(8, 47, 73, 0.85);
-  --codexopt-card-border: rgba(148, 163, 184, 0.18);
-  --md-code-bg-color: #0f172a;
-  --md-code-fg-color: #f8fafc;
+  --md-accent-fg-color: #2dd4bf;
+  --codexopt-hero-start: #0b1220;
+  --codexopt-hero-end: #0f2b3c;
+  --codexopt-card-border: rgba(148, 163, 184, 0.16);
+  --codexopt-card-bg: #0b1526;
+  --codexopt-card-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
+  --codexopt-link: #5eead4;
+  --codexopt-code-bg: rgba(30, 41, 59, 0.88);
+  --codexopt-code-fg: #93c5fd;
+  --codexopt-pre-bg: #050b16;
+  --codexopt-pre-fg: #e2e8f0;
 }
 
 .codexopt-hero {
@@ -33,13 +51,21 @@
   border: 1px solid var(--codexopt-card-border);
   border-radius: 1.25rem;
   background: linear-gradient(135deg, var(--codexopt-hero-start), var(--codexopt-hero-end));
+  box-shadow: var(--codexopt-card-shadow);
 }
 
 .codexopt-hero h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
 
+.codexopt-hero,
+.codexopt-hero h1,
+.codexopt-hero p,
+.codexopt-hero code {
+  color: var(--md-default-fg-color);
+}
+
 .codexopt-lead {
   font-size: 1.12rem;
   max-width: 48rem;
@@ -56,7 +82,8 @@
   padding: 1rem;
   border: 1px solid var(--codexopt-card-border);
   border-radius: 1rem;
-  background: color-mix(in srgb, var(--md-default-bg-color) 92%, transparent);
+  background: var(--codexopt-card-bg);
+  box-shadow: var(--codexopt-card-shadow);
 }
 
 .codexopt-card strong {
@@ -68,19 +95,52 @@
   border-radius: 999px;
 }
 
-[data-md-color-scheme="slate"] .md-typeset code {
-  color: #7dd3fc;
-  background: rgba(30, 41, 59, 0.72);
+.md-typeset a {
+  color: var(--codexopt-link);
+}
+
+.md-typeset code {
+  color: var(--codexopt-code-fg);
+  background: var(--codexopt-code-bg);
+}
+
+.md-typeset pre > code {
+  color: var(--codexopt-pre-fg);
+}
+
+.highlight pre {
+  background: var(--codexopt-pre-bg);
+  border: 1px solid var(--codexopt-card-border);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+[data-md-color-scheme="default"] .highlight .k,
+[data-md-color-scheme="default"] .highlight .kd,
+[data-md-color-scheme="default"] .highlight .kn {
+  color: #7c3aed;
+}
+
+[data-md-color-scheme="default"] .highlight .s,
+[data-md-color-scheme="default"] .highlight .sa,
+[data-md-color-scheme="default"] .highlight .sb,
+[data-md-color-scheme="default"] .highlight .s1,
+[data-md-color-scheme="default"] .highlight .s2 {
+  color: #15803d;
+}
+
+[data-md-color-scheme="default"] .highlight .nf,
+[data-md-color-scheme="default"] .highlight .nb {
+  color: #1d4ed8;
 }
 
-[data-md-color-scheme="slate"] .md-typeset pre > code {
-  color: #e5edf7;
+[data-md-color-scheme="default"] .highlight .c,
+[data-md-color-scheme="default"] .highlight .c1 {
+  color: #64748b;
 }
 
-[data-md-color-scheme="slate"] .highlight pre {
-  background: #0b1120;
-  border: 1px solid rgba(148, 163, 184, 0.14);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
+[data-md-color-scheme="default"] .highlight .m,
+[data-md-color-scheme="default"] .highlight .mi {
+  color: #b45309;
 }
 
 [data-md-color-scheme="slate"] .highlight .k,

mkdocs.yml

@@ -19,18 +19,18 @@ theme:
     - search.suggest
     - search.highlight
   palette:
-    - scheme: slate
-      primary: custom
-      accent: custom
-      toggle:
-        icon: material/weather-sunny
-        name: Switch to light mode
     - scheme: default
       primary: custom
       accent: custom
       toggle:
         icon: material/weather-night
         name: Switch to dark mode
+    - scheme: slate
+      primary: custom
+      accent: custom
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
 
 extra:
   social: