diff --git a/website/src/components/HomepageContent/styles.module.css b/website/src/components/HomepageContent/styles.module.css
index 849ce61..07b4e89 100644
--- a/website/src/components/HomepageContent/styles.module.css
+++ b/website/src/components/HomepageContent/styles.module.css
@@ -103,6 +103,7 @@
     transition: transform 0.2s ease, box-shadow 0.2s ease,
         border-color 0.2s ease;
     color: #1a3e7a;
+    
 }
 
 .packageCell:hover {
@@ -197,7 +198,9 @@
     margin-bottom: 0px;
     color: #000000;
 }
-
+[data-theme="dark"] .sectionHeader h1 {
+    color: #e5e5e5;
+}
 .sectionHeader h2 {
     margin-bottom: 0px;
     color: #336699;
diff --git a/website/src/components/HomepageHeader/styles.module.css b/website/src/components/HomepageHeader/styles.module.css
index f3c1b77..fbe5c22 100644
--- a/website/src/components/HomepageHeader/styles.module.css
+++ b/website/src/components/HomepageHeader/styles.module.css
@@ -1,30 +1,33 @@
 /* Hero full-width */
 .fullHero {
-    width: 100%;
-    color: white;
-    text-align: center;
-    padding: 2rem 2rem 2rem 2rem;
-    background-size: cover;
-    background-blend-mode: overlay;
-    /* background-image: linear-gradient(135deg, #666666 0%, #999999 100%),
+  width: 100%;
+  text-align: center;
+  padding: 2rem 2rem 2rem 2rem;
+  background-size: cover;
+  background-blend-mode: overlay;
+  /* background-image: linear-gradient(135deg, #666666 0%, #999999 100%),
         url("/img/cube-background.jpg"); */
-        background-color: #e8e8e8;
-    color: #000000;
+  background-color: #e8e8e8;
+  color: #000000;
+}
+html[data-theme="dark"] .fullHero {
+  background-color: #202020;
+  color: white;
 }
 
 .heroInner {
-    max-width: 900px;
-    margin: 0 auto;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .heroTitle {
-    font-size: 3rem;
-    margin-bottom: 1rem;
+  font-size: 3rem;
+  margin-bottom: 1rem;
 }
 
 .heroSubtitle {
-    font-size: 1.25rem;
-    font-size: 2rem;
-    margin-bottom: 2rem;
-    margin-bottom: 0.5rem;
+  font-size: 1.25rem;
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  margin-bottom: 0.5rem;
 }
diff --git a/website/src/components/ProjectGridTemplate/styles.module.css b/website/src/components/ProjectGridTemplate/styles.module.css
index 5f6f556..60ec211 100644
--- a/website/src/components/ProjectGridTemplate/styles.module.css
+++ b/website/src/components/ProjectGridTemplate/styles.module.css
@@ -1,184 +1,185 @@
 /* 2025-12-11 Thursday 15:47:22.From original ProjectGrid */
 /* Grid layout (reuse existing) */
 .projectGridWrapper {
-    margin: 2rem auto;
-    margin: 1rem auto;
-    margin: 0.5rem auto;
-    padding: 1rem;
-    background-color: #e8e8e8;
-    background-color: #f5f5f5;
-    border-radius: 12px;
-
-    border: solid 1px #b8b8b8;
-    border: 0;
+  margin: 2rem auto;
+  margin: 1rem auto;
+  margin: 0.5rem auto;
+  padding: 1rem;
+  background-color: #e8e8e8;
+  background-color: #f5f5f5;
+  border-radius: 12px;
+  border: solid 1px #b8b8b8;
+  border: 0;
 }
 
 .projectGridWrapper01 {
-    /* margin: 0.5rem auto; */
-    padding: 1rem;
-    background-color: #ffffff;
-    border: 0;
-
-    padding: 0rem;
+  /* margin: 0.5rem auto; */
+  padding: 1rem;
+  background-color: #ffffff;
+  border: 0;
+  padding: 0rem;
+}
+[data-theme="dark"] .projectGridWrapper01 {
+  background: #1b1b1d;
+  color: #e5e5e5;
 }
-
 .projectGridContainer {
-    max-width: 1200px;
-    width: 100%;
-    /* Center the projectgrid on the page. */
-    margin: 0 auto;
+  max-width: 1200px;
+  width: 100%;
+  /* Center the projectgrid on the page. */
+  margin: 0 auto;
 }
 
 .projectGridContainer01 {
-    max-width: 1200px;
-    width: 100%;
-    /* Center the projectgrid on the page. */
-    margin: 0 auto;
+  max-width: 1200px;
+  width: 100%;
+  /* Center the projectgrid on the page. */
+  margin: 0 auto;
 
-    padding: 1rem;
-    background-color: #f5f5f5;
-    border-radius: 12px;
-    border: solid 1px #b8b8b8;
-    border: 0;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-radius: 12px;
+  border: solid 1px #b8b8b8;
+  border: 0;
 }
-
- /* NEW: Replace flexbox with a proper grid */
+[data-theme="dark"] .projectGridContainer01 {
+  background: #020202;
+}
+/* NEW: Replace flexbox with a proper grid */
 .projectGrid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr); /* 3 columns */
-    gap: 1.5rem;
-    align-items: stretch; /* Auto-match heights per row */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 3 columns */
+  gap: 1.5rem;
+  align-items: stretch; /* Auto-match heights per row */
 }
 
 .projectCard {
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border: 1px solid #909090;
-    border-radius: 12px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-
-    padding: 1rem;
-    text-align: left;
-    cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-
-    /* Remove sizing from flexbox layout */
-    flex: none;
-    max-width: none;
-
-    /* Keep your vertical stacking */
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 0;
-    /* Handle the long URL values. */
-    word-break: break-all;
-    overflow-wrap: anywhere;
-    min-width: 0;              /* critical for grid children */
-
-    /* YO: Modern approach: */
-    overflow-wrap: break-word;
-    word-break: normal;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border: 1px solid #909090;
+  border-radius: 12px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+
+  padding: 1rem;
+  text-align: left;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  /* Remove sizing from flexbox layout */
+  flex: none;
+  max-width: none;
+
+  /* Keep your vertical stacking */
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+  /* Handle the long URL values. */
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  min-width: 0; /* critical for grid children */
 
+  /* YO: Modern approach: */
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
 .projectCard:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  transform: translateY(-3px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 
 /* Breakpoints for tablets */
 @media (max-width: 1024px) {
-    .projectGrid {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  .projectGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 /* Breakpoints for mobile */
 @media (max-width: 640px) {
-    .projectGrid {
-        grid-template-columns: 1fr;
-    }
+  .projectGrid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .projectLogo {
-    width: 60px;
-    height: 60px;
-    margin: 0 auto 1rem;
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 1rem;
 }
 
 @keyframes slideUp {
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 /* Close button */
 .modalClose {
-    position: absolute;
-    bottom: 1rem;
-    right: 1rem;
-    padding: 0.5rem 1rem;
-    background-color: #0366d6;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 0.5rem 1rem;
+  background-color: #0366d6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
 }
 
 .modalClose:hover {
-    background-color: #024c9c;
+  background-color: #024c9c;
 }
 
-
 /* Spec links inside modal */
 .projectLinks {
-    text-align: left;
-    border-top: solid 1px #d8d8d8;
-    padding-top: 5px;
-    margin-top: 10px;
+  text-align: left;
+  border-top: solid 1px #d8d8d8;
+  padding-top: 5px;
+  margin-top: 10px;
 
-    /* Handle the long URL values. */
-    word-break: break-all;
-    overflow-wrap: anywhere;
-    line-height: 1.25rem;
+  /* Handle the long URL values. */
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  line-height: 1.25rem;
 
-    /* Modern approach: */
-    overflow-wrap: break-word;
-    word-break: normal;
+  /* Modern approach: */
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
 .projectLinks a {
-    margin-right: 1rem;
-    text-decoration: none;
-    color: #0366d6;
-    font-weight: 500;
-    /* 'break-all' for links -- "words" don't matter */
-    word-break: break-all;
-    overflow-wrap: anywhere;
+  margin-right: 1rem;
+  text-decoration: none;
+  color: #0366d6;
+  font-weight: 500;
+  /* 'break-all' for links -- "words" don't matter */
+  word-break: break-all;
+  overflow-wrap: anywhere;
 }
 
 .projectLinks a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .modalLinks01 {
-    text-align: left;
-    padding-top: 5px;
-    line-height: 1.25rem;
+  text-align: left;
+  padding-top: 5px;
+  line-height: 1.25rem;
 }
 .modalLinks01 a {
-    margin-right: 1rem;
-    text-decoration: none;
-    color: #0366d6;
-    font-weight: 500;
-    font-weight:normal;
-    /* Handle the long URL values. */
-    word-break: break-all;
-    overflow-wrap: anywhere;
+  margin-right: 1rem;
+  text-decoration: none;
+  color: #0366d6;
+  font-weight: 500;
+  font-weight: normal;
+  /* Handle the long URL values. */
+  word-break: break-all;
+  overflow-wrap: anywhere;
 }
 .modalLinks01 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 /* 2025-12-11 Thursday 11:14:14. */
@@ -191,143 +192,143 @@ display: list-item !important;
 } */
 
 .featureList {
-    line-height: 1.25rem;
+  line-height: 1.25rem;
 }
 
 /* Spec metadata list */
 .projectMeta {
-    list-style: none;
-    padding: 0;
-    margin: 0.5rem 0;
-    margin: 0.1rem 0;
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0;
+  margin: 0.1rem 0;
 }
 
 /* Modal. */
 /* Modal styles */
 .modalBackdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: 1rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
 }
 
 /* Adding another .modalContent below with 'position: relative;' hoping to position the alert inside the open modal. */
 .modalContent {
-    background: white;
-    border-radius: 8px;
-    max-width: 1200px;
-    max-width: 1000px;
-    max-width: 800px;
-    width: 100%;
-    max-height: 90vh;
-    /* overflow: hidden; */
-    /* overflow-y: auto; */
-    overflow:none;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  background: white;
+  border-radius: 8px;
+  max-width: 1200px;
+  max-width: 1000px;
+  max-width: 800px;
+  width: 100%;
+  max-height: 90vh;
+  /* overflow: hidden; */
+  /* overflow-y: auto; */
+  overflow: none;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 /* Tabs */
 .modalTabs {
-    display: flex;
-    border-bottom: 1px solid #e0e0e0;
-    border-bottom: 2px solid #e0e0e0;
-    border-bottom: 0;
-    background-color: #f5f5f5;
-    background-color: #ffffff;
+  display: flex;
+  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 2px solid #e0e0e0;
+  border-bottom: 0;
+  background-color: #f5f5f5;
+  background-color: #ffffff;
 }
 
 .tab {
-    flex: 1;
-    padding: 1rem;
-    border: none;
-    background: none;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: 500;
-    transition: background-color 0.2s;
+  flex: 1;
+  padding: 1rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
 
-    border-bottom: 2px solid #e8e8e8;
+  border-bottom: 2px solid #e8e8e8;
 
-    color: #606060;
-    background-color: #f8f8f8;
-    background-color: #f5f5f5;
-    background-color: #e8e8e8;
-    background-color: #ffffff;
+  color: #606060;
+  background-color: #f8f8f8;
+  background-color: #f5f5f5;
+  background-color: #e8e8e8;
+  background-color: #ffffff;
 }
 
 .tab:hover {
-    background-color: #e8e8e8;
-    background-color: #f5f5f5;
-    background-color: #ffffff;
-    color: #0066ff;
-    border-bottom: 2px solid #0066ff;
+  background-color: #e8e8e8;
+  background-color: #f5f5f5;
+  background-color: #ffffff;
+  color: #0066ff;
+  border-bottom: 2px solid #0066ff;
 }
 
 .tabActive {
-    background-color: white;
-    border-bottom: 2px solid #007bff;
-    border-bottom: 2px solid #000000;
+  background-color: white;
+  border-bottom: 2px solid #007bff;
+  border-bottom: 2px solid #000000;
 
-    color: #000000;
+  color: #000000;
 }
 
 .tabActive:hover {
-    background-color: white;
-    cursor: auto;
-    border-bottom: 2px solid #000000;
-    color: #000000;
+  background-color: white;
+  cursor: auto;
+  border-bottom: 2px solid #000000;
+  color: #000000;
 }
 
 /* Modal body */
 .modalBody {
-    flex: 1;
-    overflow-y: auto;
-    padding: 2rem;
-    padding: 1.5rem;
-    border-top: solid 1px #ff0000;
-    border-top: 0 !important;
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem;
+  padding: 1.5rem;
+  border-top: solid 1px #ff0000;
+  border-top: 0 !important;
 
-    /* padding-bottom: 0; */
+  /* padding-bottom: 0; */
 }
 
 /* Full width section */
 .fullWidthSection {
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
+  margin-bottom: 2rem;
+  padding-bottom: 2rem;
 
-    margin-bottom: 0rem;
-    padding-bottom: 0rem;
+  margin-bottom: 0rem;
+  padding-bottom: 0rem;
 
-    border-bottom: 1px solid #e0e0e0;
-    line-height: 1.25rem;
+  border-bottom: 1px solid #e0e0e0;
+  line-height: 1.25rem;
 }
 
 .fullWidthSection h2 {
-    margin-top: 0;
-    margin-bottom: 1rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
 }
 
 /* Two column section */
 .twoColumnSection {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
 
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 .column h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
 }
 
 /* 2025-12-11 Thursday 11:25:36.I don't think we need or want. */
@@ -342,349 +343,353 @@ display: list-item !important;
 
 /* See also new modalLinks01 style I'm creating below the projectlinks style toward the top of this file -- using that in the modal to displayHome: x on 1 line. */
 .modalLinks {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .modalLinks a {
-    display: inline-block;
-    background-color: #007bff;
-    background-color: #ffffff;
-    color: white;
-    color: #0066ff;
-    text-decoration: none;
-    border-radius: 4px;
-    transition: background-color 0.2s;
+  display: inline-block;
+  background-color: #007bff;
+  background-color: #ffffff;
+  color: white;
+  color: #0066ff;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: background-color 0.2s;
 
-    /* No effect? */
-    display: inline;
+  /* No effect? */
+  display: inline;
 }
 
 .modalLinks a:hover {
-    background-color: #0056b3;
-    background-color: #ffffff;
-    text-decoration: underline;
+  background-color: #0056b3;
+  background-color: #ffffff;
+  text-decoration: underline;
 }
 
 .modalFooter {
-    padding: 1rem 2rem;
-    padding: 0rem 1.5rem 1.5rem 1.5rem;
-    /* 2025-12-11 Thursday 10:19:33. */
-    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
-    border-top: solid 1px #e8e8e8;
+  padding: 1rem 2rem;
+  padding: 0rem 1.5rem 1.5rem 1.5rem;
+  /* 2025-12-11 Thursday 10:19:33. */
+  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
+  border-top: solid 1px #e8e8e8;
 
-    display: flex;
-    justify-content: flex-end;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .closeButton {
-    padding: 0.5rem 1.5rem;
-    background: #2563eb;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
+  padding: 0.5rem 1.5rem;
+  background: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s;
 }
 
 .closeButton:hover {
-    background-color: #5a6268;
+  background-color: #5a6268;
 }
 
 /* Responsive design */
 @media (max-width: 768px) {
-    .twoColumnSection {
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
-    }
+  .twoColumnSection {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
 
-    .modalBody {
-        padding: 1rem;
-    }
+  .modalBody {
+    padding: 1rem;
+  }
 
-    .modalFooter {
-        padding: 1rem;
-    }
+  .modalFooter {
+    padding: 1rem;
+  }
 }
 
 /* Limit display to two lines, then add ellipsis. */
 /* YO 2025-11-18 Tuesday 18:22:21.  Maybe rename to tooltipTarget */
 .projectDescription {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
 
-    -webkit-line-clamp: 8;
-    line-clamp: 8;
+  -webkit-line-clamp: 8;
+  line-clamp: 8;
 
-    -webkit-box-orient: vertical;
-    /* line-height: 1.4em; */
-    /* height: 2.8em; */
-    /* height: 4.2em; */
-    cursor: default;
+  -webkit-box-orient: vertical;
+  /* line-height: 1.4em; */
+  /* height: 2.8em; */
+  /* height: 4.2em; */
+  cursor: default;
 
-    /* 2025-11-18 Tuesday 09:40:29.   */
-    /* line-height: 1.25em; */
-    /* 2025-11-24 Monday 14:27:30.  */
-    /* line-height: 0.5rem; */
+  /* 2025-11-18 Tuesday 09:40:29.   */
+  /* line-height: 1.25em; */
+  /* 2025-11-24 Monday 14:27:30.  */
+  /* line-height: 0.5rem; */
 }
 
 .projectDescriptionWrapper {
-    position: relative;
-    width: 100%;
-    line-height: 1.25rem;
-    /* line-height: 1.4rem; */
+  position: relative;
+  width: 100%;
+  line-height: 1.25rem;
+  /* line-height: 1.4rem; */
 
-    /* 2025-12-11 Thursday 07:51:06. */
-    /* border-top: 1px solid #d8d8d8; */
-    margin-top: 20px;
-    margin-top: 0px;
+  /* 2025-12-11 Thursday 07:51:06. */
+  /* border-top: 1px solid #d8d8d8; */
+  margin-top: 20px;
+  margin-top: 0px;
 
-    padding-top: 10px;
-    padding-top: 0px;
+  padding-top: 10px;
+  padding-top: 0px;
 }
 
 /* Tooltip arrow */
 .tooltip::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -6px;
-    border-width: 6px;
-    border-style: solid;
-    border-color: rgba(40, 40, 40, 0.95) transparent transparent transparent;
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -6px;
+  border-width: 6px;
+  border-style: solid;
+  border-color: rgba(40, 40, 40, 0.95) transparent transparent transparent;
 }
 
 .tooltip {
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    /* background: var(--ifm-background-surface-color); */
-    /* color: var(--ifm-font-color-base); */
-
-    background: #f5f5f5;
-    background: #ffffff;
-    color: #000000;
-    border: 1px solid var(--ifm-color-emphasis-200);
-    border: solid 2px #000000;
-    border: solid 2px #0066ff;
-
-    padding: 8px 10px;
-    padding: 8px 10px 0px 10px;
-    border-radius: 6px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    white-space: normal;
-    width: max-content;
-    max-width: 420px;
-    z-index: 10;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease-in-out;
-
-    font-size: 0.9rem;
-    font-size: 14px;
-    font-size: 15px;
-    font-size: 16px;
-    line-height: 1.5;
-    line-height: 1.25em;
-    font-size: 0.9rem;
-    font-size: 1.0rem;
-
-    overflow-wrap: break-word;
-    word-break: normal;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  /* background: var(--ifm-background-surface-color); */
+  /* color: var(--ifm-font-color-base); */
+
+  background: #f5f5f5;
+  background: #ffffff;
+  color: #000000;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border: solid 2px #000000;
+  border: solid 2px #0066ff;
+
+  padding: 8px 10px;
+  padding: 8px 10px 0px 10px;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  white-space: normal;
+  width: max-content;
+  max-width: 420px;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+
+  font-size: 0.9rem;
+  font-size: 14px;
+  font-size: 15px;
+  font-size: 16px;
+  line-height: 1.5;
+  line-height: 1.25em;
+  font-size: 0.9rem;
+  font-size: 1rem;
+
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
 /* 2025-12-12 Friday 14:41:19.Remember to uncomment this if you're turning tooltips back on! */
 .projectDescriptionWrapper:hover .tooltip {
-    opacity: 1;
+  opacity: 1;
 }
+[data-theme="dark"] .tooltip {
+  background: #282828;
+  color: #f0f0f0;
+  border: solid 2px #505050;
+}   
 
 .packageDownloadWrapper {
-    position: relative;
-    width: 100%;
-    line-height: 1.25rem;
-    /* line-height: 1.4rem; */
+  position: relative;
+  width: 100%;
+  line-height: 1.25rem;
+  /* line-height: 1.4rem; */
 
-    /* 2025-12-11 Thursday 07:51:06. */
-    border-top: 1px solid #d8d8d8;
-    margin-top: 20px;
-    padding-top: 10px;
+  /* 2025-12-11 Thursday 07:51:06. */
+  border-top: 1px solid #d8d8d8;
+  margin-top: 20px;
+  padding-top: 10px;
 }
 
 /* This is for the alert that appears inside
 the modal when the link is clicked from inside an open modal. */
 .modalAlert {
-    margin-top: 1rem;
-    padding: 0.75rem 1rem;
-    background-color: #f8d7da;
-    color: #721c24;
-    border: 1px solid #f5c6cb;
-    border-radius: 6px;
-    text-align: center;
-    font-size: 0.9rem;
-    animation: fadeIn 0.3s ease;
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+  border-radius: 6px;
+  text-align: center;
+  font-size: 0.9rem;
+  animation: fadeIn 0.3s ease;
 }
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* In place of .modalAlert just above, try this (including another .modalContent with 'position: relative;' hoping to position the alert inside the open modal. */
- /* ensure positioning context */
+/* ensure positioning context */
 .modalContent {
-    position: relative;
+  position: relative;
 }
 
 .modalAlertOverlay {
-    position: absolute;
-    bottom: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #f8d7da;
-    color: #721c24;
-    border: 1px solid #f5c6cb;
-    border-radius: 6px;
-    padding: 0.6rem 1rem;
-    text-align: center;
-    width: 80%;
-    max-width: 320px;
-    z-index: 10;
-    animation: fadeIn 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+  border-radius: 6px;
+  padding: 0.6rem 1rem;
+  text-align: center;
+  width: 80%;
+  max-width: 320px;
+  z-index: 10;
+  animation: fadeIn 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translate(-50%, 4px);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, 0);
-    }
+  from {
+    opacity: 0;
+    transform: translate(-50%, 4px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
 }
 
 /* For the under-construction popup. */
 .popupMessage {
-    position: fixed;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #2563eb;
-    background: #fcf3ce;
-    color: #fff;
-    color: #000;
-    padding: 0.75rem 1.25rem;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 2px 10px #000000;
-    z-index: 999;
-    opacity: 0;
-    animation: fadeInOut 2.5s ease forwards;
-    animation: fadeInOut 5s ease forwards;
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #2563eb;
+  background: #fcf3ce;
+  color: #fff;
+  color: #000;
+  padding: 0.75rem 1.25rem;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 10px #000000;
+  z-index: 999;
+  opacity: 0;
+  animation: fadeInOut 2.5s ease forwards;
+  animation: fadeInOut 5s ease forwards;
 }
 
 @keyframes fadeInOut {
-    0% {
-        opacity: 0;
-        transform: translate(-50%, 10px);
-    }
-    10% {
-        opacity: 1;
-        transform: translate(-50%, 0);
-    }
-    90% {
-        opacity: 1;
-        transform: translate(-50%, 0);
-    }
-    100% {
-        opacity: 0;
-        transform: translate(-50%, 10px);
-    }
+  0% {
+    opacity: 0;
+    transform: translate(-50%, 10px);
+  }
+  10% {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  90% {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, 10px);
+  }
 }
 
 /* See if I can adapt this (used in the modal) to the main page: */
 .modalAlertOverlay_main {
-    position: absolute;
-    position: fixed;
-    bottom: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #f8d7da;
-    color: #721c24;
-    border: 1px solid #f5c6cb;
-    border-radius: 6px;
-    padding: 0.6rem 1rem;
-    text-align: center;
-    width: 80%;
-    max-width: 320px;
-    z-index: 10;
-    z-index: 999;
-    animation: fadeIn 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  position: fixed;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+  border-radius: 6px;
+  padding: 0.6rem 1rem;
+  text-align: center;
+  width: 80%;
+  max-width: 320px;
+  z-index: 10;
+  z-index: 999;
+  animation: fadeIn 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translate(-50%, 4px);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, 0);
-    }
+  from {
+    opacity: 0;
+    transform: translate(-50%, 4px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
 }
 
 /* Handle the long URLs. */
 .modalLinkUrl {
-    /* font-size: 0.85rem; */
-    /* line-height: 1.2; */
-    word-break: break-all;       /* forces breaks anywhere when needed */
-    overflow-wrap: anywhere;     /* clean modern wrapping */
-    max-width: 100%;             /* prevents overflow */
-    /* 2025-11-24 Monday 15:00:41.  */
-    width: auto;
-
-    /* This fixed the display-on-same-line-as-field problem!!! */
-    display: inline;
-    /* line-height: 1.25rem; */
+  /* font-size: 0.85rem; */
+  /* line-height: 1.2; */
+  word-break: break-all; /* forces breaks anywhere when needed */
+  overflow-wrap: anywhere; /* clean modern wrapping */
+  max-width: 100%; /* prevents overflow */
+  /* 2025-11-24 Monday 15:00:41.  */
+  width: auto;
+
+  /* This fixed the display-on-same-line-as-field problem!!! */
+  display: inline;
+  /* line-height: 1.25rem; */
 }
 /* 2025-11-24 Monday 16:45:48.  For the project.name value */
 .modalLinkUrl_break_word {
-    overflow-wrap: break-word;
-    word-break: normal;
-    max-width: 100%;
-    width: auto;
-    display: inline;
+  overflow-wrap: break-word;
+  word-break: normal;
+  max-width: 100%;
+  width: auto;
+  display: inline;
 }
 
 .modalText {
-    font-size: 1rem;
-    line-height: 1.2;
-    max-width: 100%;             /* prevents overflow */
-    /* This fixed the display-on-same-line-as-field problem!!! */
-    display: inline;
-    line-height: 1.25rem;
-    /* Modern approach: */
-    overflow-wrap: break-word;
-    word-break: normal;
+  font-size: 1rem;
+  line-height: 1.2;
+  max-width: 100%; /* prevents overflow */
+  /* This fixed the display-on-same-line-as-field problem!!! */
+  display: inline;
+  line-height: 1.25rem;
+  /* Modern approach: */
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
 .note_field {
-    line-height: 1.25rem;
-    padding-top: 5px;
+  line-height: 1.25rem;
+  padding-top: 5px;
 }
 
-
 /* 2025-11-22 Saturday 12:08:53.  Does this work? */
 /* Dark mode */
 /* [data-theme='dark'] .card {
@@ -704,14 +709,14 @@ the modal when the link is clicked from inside an open modal. */
   color: #e5e5e5;
 } */
 
-[data-theme='dark'] .projectCard {
+[data-theme="dark"] .projectCard {
   background: #000000;
   border-color: #909090;
   border-color: #505050;
   color: #e5e5e5;
 }
 
-[data-theme='dark'] .projectGridWrapper {
+[data-theme="dark"] .projectGridWrapper {
   background: #303030;
   border: solid 1px #505050;
   color: #e5e5e5;
@@ -719,9 +724,9 @@ the modal when the link is clicked from inside an open modal. */
 
 /* 2025-11-23 Sunday 18:53:02.  */
 .projectName {
-    /* Modern approach: */
-    overflow-wrap: break-word;
-    word-break: normal;
+  /* Modern approach: */
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
 /* 2025-11-24 Monday 16:33:21.  Modify project card to add logo (if any). */
@@ -733,12 +738,12 @@ the modal when the link is clicked from inside an open modal. */
 }
 
 .logoWrapper {
-  flex-shrink: 0;        /* logo never shrinks */
-  width: 40px;           /* pick your static width */
-  height: 40px;          /* consistent box */
+  flex-shrink: 0; /* logo never shrinks */
+  width: 40px; /* pick your static width */
+  height: 40px; /* consistent box */
   display: flex;
   align-items: center;
-  align-items: flex-start;    /* align logo at the top */
+  align-items: flex-start; /* align logo at the top */
   justify-content: center;
 }
 
@@ -750,12 +755,11 @@ the modal when the link is clicked from inside an open modal. */
 
 /* 2025-12-10 Wednesday 18:53:41.  For the JSON values that are lists of URLs. */
 .wordWrap {
-  word-wrap: break-word;     /* old name, still works */
+  word-wrap: break-word; /* old name, still works */
   overflow-wrap: break-word; /* modern standard */
-  word-break: break-all;     /* fallback for very stubborn strings */
+  word-break: break-all; /* fallback for very stubborn strings */
 }
 
-
 /* 2025-12-11 Thursday 16:32:13. */
 /* .sectionHeader h1 {
     margin-bottom: 0px;
@@ -768,8 +772,6 @@ the modal when the link is clicked from inside an open modal. */
     color: #992600;
 } */
 
-
-
 /* 2025-12-11 Thursday 17:12:30. */
 /* .gridSection {
     margin-bottom: 3rem;
@@ -784,13 +786,13 @@ the modal when the link is clicked from inside an open modal. */
 } */
 
 .sectionTitle h2 {
-    color: #992600;
-    /* color: #f49c1f; */
-    margin-top: 20px;
-    /* margin-top: 40px; */
+  color: #992600;
+  /* color: #f49c1f; */
+  margin-top: 20px;
+  /* margin-top: 40px; */
 
-    margin-bottom: 20px;
-    /* margin-bottom: 10px; */
+  margin-bottom: 20px;
+  /* margin-bottom: 10px; */
 }
 /* 2025-12-11 Thursday 18:08:34.Above replaces this below. */
 /* .projectGridWrapper01 h2 {
@@ -808,7 +810,7 @@ the modal when the link is clicked from inside an open modal. */
 } */
 
 .sectionIntro {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 /* 2025-12-12 Friday 14:03:35.  Add tooltips to the ProjectGridTemplate.  See above */
@@ -816,7 +818,7 @@ the modal when the link is clicked from inside an open modal. */
 /* 2025-12-12 Friday 18:07:06.  This is the grid container -- adding a separator between bottom of grid and following section. */
 
 .gridSection {
-    border-bottom: solid 1px #000000;
-    margin-bottom: 30px;
-    padding-bottom: 30px;
+  border-bottom: solid 1px #000000;
+  margin-bottom: 30px;
+  padding-bottom: 30px;
 }
diff --git a/website/src/components/SupporterGrid/styles.module.css b/website/src/components/SupporterGrid/styles.module.css
index 87dc68d..b23531b 100644
--- a/website/src/components/SupporterGrid/styles.module.css
+++ b/website/src/components/SupporterGrid/styles.module.css
@@ -27,7 +27,10 @@
     padding: 0.5rem 0.5rem;
     box-shadow: inset 0 20px 40px -20px rgba(0, 0, 0, 0.05);
 }
-
+[data-theme="dark"] .purlGridContainer {
+    background-color: #202020;
+    box-shadow: inset 0 0 6px #0000001a;
+}
 /* Container for the grid */
 .purlGrid {
     display: flex;
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 3a37668..a2a180f 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -1,4 +1,4 @@
-/**
+/* *
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
@@ -62,11 +62,17 @@
 .theme-doc-sidebar-menu .menu__link {
   color: #000000;
 }
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__link {
+  color: #dadde1;
+}
 .theme-doc-sidebar-menu .menu__link:hover,
 .theme-doc-sidebar-menu .menu__link--active {
   color: #3366cc;
 }
-
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__link:hover,
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active {
+  color: #3366cc;
+}
 
 /* MOBILE NAV MENU */
 @media (max-width: 996px) {