From ad6e1b4e818fa77b34bc7a3ecda6256615ae87f5 Mon Sep 17 00:00:00 2001
From: Rand McKinney <crandmck@yahoo.com>
Date: Mon, 3 Aug 2026 12:51:04 -0700
Subject: [PATCH] Add dark mode

---
 docusaurus.config.js      |  4 +++-
 src/components/Roadmap.js | 19 ++++++++++++++-----
 src/css/custom.css        | 28 ++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 5fce0ea7..538222d6 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -251,7 +251,9 @@ async function createConfig() {
         // Relative to your site's 'static' directory.
         // Cannot be SVGs. Can be external URLs too.
         colorMode: {
-          disableSwitch: true,
+          defaultMode: 'light',
+          disableSwitch: false,
+          respectPrefersColorScheme: true,
         },
         docs: {
           sidebar: {
diff --git a/src/components/Roadmap.js b/src/components/Roadmap.js
index 39603f58..6d81ee5f 100644
--- a/src/components/Roadmap.js
+++ b/src/components/Roadmap.js
@@ -172,7 +172,12 @@ export default function Roadmap({ src = '/project-roadmap/roadmap.tsv' }) {
                   {isOpen ? '▾' : '▸'}
                 </span>
                 <span>{section.heading}</span>
-                <span style={{ color: '#666', fontWeight: 400 }}>
+                <span
+                  style={{
+                    color: 'var(--cai-color-on-disabled)',
+                    fontWeight: 400,
+                  }}
+                >
                   ({items.length})
                 </span>
               </button>
@@ -193,7 +198,8 @@ export default function Roadmap({ src = '/project-roadmap/roadmap.tsv' }) {
                         <th
                           style={{
                             textAlign: 'left',
-                            borderBottom: '1px solid #ddd',
+                            borderBottom:
+                              '1px solid var(--cai-color-background-dark)',
                             padding: '8px',
                           }}
                         >
@@ -202,7 +208,8 @@ export default function Roadmap({ src = '/project-roadmap/roadmap.tsv' }) {
                         <th
                           style={{
                             textAlign: 'left',
-                            borderBottom: '1px solid #ddd',
+                            borderBottom:
+                              '1px solid var(--cai-color-background-dark)',
                             padding: '8px',
                             width: '200px',
                           }}
@@ -229,7 +236,8 @@ export default function Roadmap({ src = '/project-roadmap/roadmap.tsv' }) {
                           <tr key={`${section.key}-${idx}`}>
                             <td
                               style={{
-                                borderBottom: '1px solid #eee',
+                                borderBottom:
+                                  '1px solid var(--cai-color-background-dark)',
                                 padding: '8px',
                               }}
                             >
@@ -237,7 +245,8 @@ export default function Roadmap({ src = '/project-roadmap/roadmap.tsv' }) {
                             </td>
                             <td
                               style={{
-                                borderBottom: '1px solid #eee',
+                                borderBottom:
+                                  '1px solid var(--cai-color-background-dark)',
                                 padding: '8px',
                               }}
                             >
diff --git a/src/css/custom.css b/src/css/custom.css
index 7f52970b..b853ebe3 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -77,6 +77,20 @@
   --ifm-tabs-color-active: var(--cai-color-primary);
 }
 
+[data-theme='dark'] {
+  --cai-color-background: #1b1b1d;
+  --cai-color-on-background: #e3e3e3;
+  --cai-color-background-dark: #2b2b2e;
+  --cai-color-on-background-dark: #e3e3e3;
+  --cai-color-disabled: #3a3a3d;
+  --cai-color-on-disabled: #8a8a8d;
+  --cai-color-surface: #242526;
+  --cai-color-on-surface: #e3e3e3;
+  --cai-color-primary-light: #1f3b57;
+  --cai-color-secondary-light: #4a4020;
+  --cai-color-shadow: rgba(0, 0, 0, 0.6);
+}
+
 * {
   -webkit-font-smoothing: antialiased;
 }
@@ -151,6 +165,14 @@ a.hash-link {
   filter: brightness(1);
 }
 
+[data-theme='dark'] .header-logo {
+  filter: brightness(0) invert(1);
+}
+
+[data-theme='dark'] .header-logo:hover {
+  filter: brightness(1);
+}
+
 .header-github-link:before {
   content: '';
   width: 24px;
@@ -172,6 +194,10 @@ body:not(.is-scrolling) .navbar {
   height: 54px;
 }
 
+[data-theme='dark'] .navbar__logo img {
+  filter: invert(1);
+}
+
 .navbar__button {
   background-color: var(--ifm-color-secondary);
   padding: 0.625em 1.25em !important;
@@ -455,6 +481,7 @@ main .row:not(:has(.theme-doc-toc-desktop)) > .col {
 
 .review-comment {
   background-color: yellow;
+  color: #000000;
   padding: 5px;
   font-style: italic;
   margin-bottom: 10px;
@@ -462,6 +489,7 @@ main .row:not(:has(.theme-doc-toc-desktop)) > .col {
 
 .code_summary {
   background-color: #dee0e2 !important;
+  color: #000000;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid #e6e3e0;