diff --git a/src/components/donate-card/DonateCard.module.css b/src/components/donate-card/DonateCard.module.css
index 0da9728d..4a2ea033 100644
--- a/src/components/donate-card/DonateCard.module.css
+++ b/src/components/donate-card/DonateCard.module.css
@@ -59,7 +59,7 @@
   line-height: 1.6;
 }
 
-.button {
+a.button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -82,6 +82,10 @@
   &:active {
     transform: translateY(0);
   }
+
+  @media (prefers-color-scheme: light) {
+    color: var(--gray-1);
+  }
 }
 
 .buttonIcon {
diff --git a/src/components/nav-tree/NavTree.module.css b/src/components/nav-tree/NavTree.module.css
index 2b5c357c..1338744e 100644
--- a/src/components/nav-tree/NavTree.module.css
+++ b/src/components/nav-tree/NavTree.module.css
@@ -81,6 +81,9 @@ ul.nodesList {
       &.active {
         background: var(--brand-color);
         color: var(--gray-9);
+        @media (prefers-color-scheme: light) {
+          color: var(--gray-1);
+        }
       }
     }
   }
diff --git a/src/components/navbar/Navbar.module.css b/src/components/navbar/Navbar.module.css
index e986ff5a..ff29e59a 100644
--- a/src/components/navbar/Navbar.module.css
+++ b/src/components/navbar/Navbar.module.css
@@ -10,6 +10,10 @@
     display: none;
   }
 
+  @media (prefers-color-scheme: light) {
+    background: var(--gray-5);
+  }
+
   & .gridContainer {
     height: 100%;
     display: flex;
@@ -30,6 +34,10 @@
         & a {
           color: var(--gray-5);
           text-decoration: none;
+
+          @media (prefers-color-scheme: light) {
+            color: var(--gray-1);
+          }
           &.active {
             text-decoration: underline;
           }
@@ -41,6 +49,13 @@
 
       & .cta {
         margin-left: 30px;
+
+        @media (prefers-color-scheme: light) {
+          background-color: var(--gray-1);
+          &:hover {
+            background-color: var(--button-color);
+          }
+        }
       }
     }
   }
diff --git a/src/components/sponsor-card/SponsorCard.module.css b/src/components/sponsor-card/SponsorCard.module.css
index 1729bda8..2ac4f2b0 100644
--- a/src/components/sponsor-card/SponsorCard.module.css
+++ b/src/components/sponsor-card/SponsorCard.module.css
@@ -15,6 +15,16 @@
       background: hsl(var(--brand-color-hsl) / 0.03);
     }
   }
+
+  @media (prefers-color-scheme: light) {
+    background: var(--gray-3);
+
+    &:hover {
+      @media (hover: hover) {
+        background: hsl(var(--brand-color-hsl) / 0.4);
+      }
+    }
+  }
 }
 
 .logoContainer {
@@ -36,15 +46,23 @@
   gap: 8px;
 }
 
-.description {
+p.description {
   margin: 0;
   color: var(--gray-6);
   font-size: 14px;
   line-height: 1.6;
+
+  @media (prefers-color-scheme: light) {
+    color: var(--gray-1);
+  }
 }
 
 .since {
   font-size: 12px;
   color: var(--gray-5);
   font-weight: 500;
+
+  @media (prefers-color-scheme: light) {
+    color: var(--gray-2);
+  }
 }
diff --git a/src/lib/docs/docs-mdx.module.css b/src/lib/docs/docs-mdx.module.css
index dca9b8ce..72db21c1 100644
--- a/src/lib/docs/docs-mdx.module.css
+++ b/src/lib/docs/docs-mdx.module.css
@@ -49,6 +49,10 @@
     background: var(--gray-1);
     border: 1px solid var(--gray-5);
     display: block;
+
+    @media (prefers-color-scheme: light) {
+      background: var(--gray-3);
+    }
   }
   & :global(.mermaid-diagram *[fill]) {
     fill: var(--brand-color) !important;
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2b6a0828..afacebe2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -145,7 +145,7 @@ pre code {
   text-decoration: underline;
 }
 
-@media print {
+@media print, (prefers-color-scheme: light) {
   /* Invert the lightness in print mode */
   html,
   body {