From 4c75c762844d1bce7f74d2f65ee4e212e0f5e785 Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Sun, 15 Feb 2026 14:07:58 -0700
Subject: [PATCH] Fix dark mode contrast, add distinct social icons and footer
 repo link

Dark mode had inverted gray scale (:root[data-theme="dark"] should
have been [data-theme="light"]), causing near-invisible text. Override
SocialIcons with Lucide GitBranch/Package icons instead of duplicate
external-link icons. Add footer source link to Gitea.
---
 docs/astro.config.mjs                 |  2 +
 docs/src/components/Footer.astro      | 62 +++++++++++++++++++++++++++
 docs/src/components/SocialIcons.astro | 40 +++++++++++++++++
 docs/src/styles/custom.css            | 31 ++++++++------
 4 files changed, 121 insertions(+), 14 deletions(-)
 create mode 100644 docs/src/components/Footer.astro
 create mode 100644 docs/src/components/SocialIcons.astro

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index fa7458a..b7ba5ae 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -12,6 +12,8 @@ export default defineConfig({
       tagline: 'LTspice circuit simulation via MCP',
       components: {
         Hero: './src/components/Hero.astro',
+        SocialIcons: './src/components/SocialIcons.astro',
+        Footer: './src/components/Footer.astro',
       },
       social: [
         { icon: 'external', label: 'Gitea', href: 'https://git.supported.systems/MCP/mcltspice' },
diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro
new file mode 100644
index 0000000..c34fd4b
--- /dev/null
+++ b/docs/src/components/Footer.astro
@@ -0,0 +1,62 @@
+---
+/**
+ * Custom Footer override — adds source repository link alongside
+ * Starlight's default edit link and pagination.
+ */
+import EditLink from 'virtual:starlight/components/EditLink';
+import LastUpdated from 'virtual:starlight/components/LastUpdated';
+import Pagination from 'virtual:starlight/components/Pagination';
+import { GitBranch } from '@lucide/astro';
+---
+
+<footer class="sl-flex">
+  <div class="meta sl-flex">
+    <EditLink />
+    <LastUpdated />
+  </div>
+  <Pagination />
+  <div class="repo-link">
+    <a href="https://git.supported.systems/MCP/mcltspice" class="sl-flex source-link">
+      <GitBranch size={14} />
+      <span>Source</span>
+    </a>
+  </div>
+</footer>
+
+<style>
+  @layer starlight.core {
+    footer {
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+    .meta {
+      gap: 0.75rem 3rem;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-top: 3rem;
+      font-size: var(--sl-text-sm);
+      color: var(--sl-color-gray-3);
+    }
+    .meta > :global(p:only-child) {
+      margin-inline-start: auto;
+    }
+  }
+
+  @layer starlight.components {
+    .repo-link {
+      display: flex;
+      justify-content: center;
+      margin: 1rem 0;
+    }
+    .source-link {
+      align-items: center;
+      gap: 0.4em;
+      font-size: var(--sl-text-xs);
+      text-decoration: none;
+      color: var(--sl-color-gray-3);
+    }
+    .source-link:hover {
+      color: var(--sl-color-text-accent);
+    }
+  }
+</style>
diff --git a/docs/src/components/SocialIcons.astro b/docs/src/components/SocialIcons.astro
new file mode 100644
index 0000000..71c587c
--- /dev/null
+++ b/docs/src/components/SocialIcons.astro
@@ -0,0 +1,40 @@
+---
+/**
+ * Custom SocialIcons override — uses Lucide icons instead of
+ * Starlight's built-in 'external' icon for distinguishable links.
+ */
+import { GitBranch, Package } from '@lucide/astro';
+
+const links = [
+  {
+    label: 'Source',
+    href: 'https://git.supported.systems/MCP/mcltspice',
+    Icon: GitBranch,
+  },
+  {
+    label: 'PyPI',
+    href: 'https://pypi.org/project/mcltspice/',
+    Icon: Package,
+  },
+];
+---
+
+{links.map(({ label, href, Icon }) => (
+  <a {href} rel="me" class="sl-flex social-link">
+    <span class="sr-only">{label}</span>
+    <Icon size={20} />
+  </a>
+))}
+
+<style>
+  @layer starlight.components {
+    .social-link {
+      color: var(--sl-color-text-accent);
+      padding: 0.5em;
+      margin: -0.5em;
+    }
+    .social-link:hover {
+      opacity: 0.66;
+    }
+  }
+</style>
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 91b7b76..65c467b 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -6,9 +6,11 @@
 @import "./oscilloscope.css";
 
 :root {
-  --sl-color-accent-low: #083344;    /* teal-950 */
-  --sl-color-accent: #0d9488;        /* teal-600 */
-  --sl-color-accent-high: #ccfbf1;   /* teal-100 */
+  /* Dark mode (Starlight default: :root = dark)
+   * Gray scale: gray-1 = highest contrast (lightest), gray-7 = lowest */
+  --sl-color-accent-low: #083344;    /* teal-950 — dark accent bg */
+  --sl-color-accent: #2dd4bf;        /* teal-400 — bright on dark bg */
+  --sl-color-accent-high: #ccfbf1;   /* teal-100 — light accent text */
 
   --sl-color-gray-1: #fafafa;        /* zinc-50 */
   --sl-color-gray-2: #e4e4e7;        /* zinc-200 */
@@ -19,18 +21,19 @@
   --sl-color-gray-7: #0f0f11;        /* near-black */
 }
 
-:root[data-theme="dark"] {
-  --sl-color-accent-low: #083344;
-  --sl-color-accent: #2dd4bf;        /* teal-400 in dark */
-  --sl-color-accent-high: #042f2e;   /* teal-950 */
+:root[data-theme="light"] {
+  /* Light mode: gray-1 = highest contrast (darkest) */
+  --sl-color-accent-low: #ccfbf1;    /* teal-100 — light accent bg */
+  --sl-color-accent: #0d9488;        /* teal-600 — darker on light bg */
+  --sl-color-accent-high: #042f2e;   /* teal-950 — dark accent text */
 
-  --sl-color-gray-1: #0f0f11;
-  --sl-color-gray-2: #18181b;
-  --sl-color-gray-3: #3f3f46;
-  --sl-color-gray-4: #a1a1aa;
-  --sl-color-gray-5: #d4d4d8;
-  --sl-color-gray-6: #e4e4e7;
-  --sl-color-gray-7: #fafafa;
+  --sl-color-gray-1: #0f0f11;        /* near-black */
+  --sl-color-gray-2: #18181b;        /* zinc-900 */
+  --sl-color-gray-3: #3f3f46;        /* zinc-700 */
+  --sl-color-gray-4: #a1a1aa;        /* zinc-400 */
+  --sl-color-gray-5: #d4d4d8;        /* zinc-300 */
+  --sl-color-gray-6: #e4e4e7;        /* zinc-200 */
+  --sl-color-gray-7: #fafafa;        /* zinc-50 */
 }
 
 /* Tool reference parameter tables */