Implement proper light theme support

src/components/button/Button.module.css

@@ -30,6 +30,7 @@
     color: var(--gray-9);
     background-color: var(--brand-color);
     &:hover  {
+      color: var(--brand-color-fg);
       @media(hover: hover) {
         background-color: hsl(var(--brand-color-hsl)/.7);
       }

src/components/custom-mdx/CustomMDX.module.css

@@ -50,18 +50,15 @@
     border: 1px solid var(--gray-5);
     display: block;
   }
-  & :global(.mermaid-diagram *[fill]) {
-    fill: var(--brand-color) !important;
-  }
-  & :global(.mermaid-diagram *[color]) {
-    color: var(--brand-color) !important;
-  }
-  & :global(.mermaid-diagram) * {
-    color: white !important;
-  }
-  & :global(.mermaid-diagram svg) * {
+
+  & :global(.mermaid-diagram svg .actor-man) * {
     fill: white !important;
   }
+
+  & :global(.mermaid-diagram svg .actor-man) :is(text, text *) {
+    color: var(--white) !important;
+    fill: var(--white) !important;
+  }
 }
 
 @keyframes footnote-highlight {

src/components/donate-card/DonateCard.module.css

@@ -66,12 +66,16 @@
   padding: 12px 24px;
   border-radius: 8px;
   background-color: var(--brand-color);
-  color: var(--gray-9);
+  color: var(--brand-color-fg);
   font-weight: 600;
   font-size: 15px;
   text-decoration: none;
   transition: background-color 0.15s ease, transform 0.15s ease;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--gray-9);
+  }
+
   &:hover {
     @media (hover: hover) {
       background-color: hsl(var(--brand-color-hsl) / 0.85);

src/components/link/Link.module.css

@@ -58,6 +58,10 @@
   &:hover {
     background-color: var(--button-color);
     text-decoration: none;
+
+    &.brand {
+      color: var(--brand-color-fg);
+    }
   }
 
   border-radius: 6px;

src/components/mermaid/index.tsx

@@ -11,11 +11,33 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) {
   const elementRef = useRef<HTMLDivElement>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [primaryColor, setPrimaryColor] = useState("#ffffff");
+  const [brandColor, setBrandColor] = useState("#3551F3");
+
+
+  useEffect(() => {
+    const colorSchemeMatch = window.matchMedia("(prefers-color-scheme: dark)");
+    const computedStyle = window.getComputedStyle(document.body);
+    const brandColor = computedStyle.getPropertyValue("--brand-color");
+
+    setBrandColor(brandColor);
+    setPrimaryColor(colorSchemeMatch.matches ? "#ffffff" : "#000000")
+
+    const cb = (e: MediaQueryListEvent) => {
+      setPrimaryColor(e.matches ? "#ffffff" : "#000000")
+    };
+
+    colorSchemeMatch.addEventListener("change", cb);
+
+    return () => {
+      colorSchemeMatch.removeEventListener("change", cb);
+    }
+  }, []);
 
   useEffect(() => {
     let mermaidInstance: any;
     const element = elementRef.current;
-
+    
     const renderMermaid = async () => {
       try {
         setIsLoading(true);
@@ -30,31 +52,31 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) {
           fontFamily: "inherit",
           fontSize: 14,
           themeVariables: {
-            primaryColor: "#ffffff",
-            primaryTextColor: "#ffffff",
-            primaryBorderColor: "#ffffff",
+            primaryColor: brandColor,
+            primaryTextColor: primaryColor,
+            primaryBorderColor: primaryColor,
 
-            lineColor: "#ffffff",
+            lineColor: primaryColor,
 
             edgeLabelBackground: "transparent",
 
-            actorBorder: "#ffffff",
-            actorBkg: "transparent",
-            actorTextColor: "#ffffff",
-            actorLineColor: "#ffffff",
-            signalColor: "#ffffff",
-            signalTextColor: "#ffffff",
+            actorBorder: primaryColor,
+            actorBkg: brandColor,
+            actorTextColor: "white",
+            actorLineColor: primaryColor,
+            signalColor: primaryColor,
+            signalTextColor: primaryColor,
 
-            gridColor: "#ffffff",
+            gridColor: primaryColor,
 
-            git0: "#ffffff",
-            git1: "#ffffff",
-            git2: "#ffffff",
-            git3: "#ffffff",
-            git4: "#ffffff",
-            git5: "#ffffff",
-            git6: "#ffffff",
-            git7: "#ffffff",
+            git0: primaryColor,
+            git1: primaryColor,
+            git2: primaryColor,
+            git3: primaryColor,
+            git4: primaryColor,
+            git5: primaryColor,
+            git6: primaryColor,
+            git7: primaryColor,
 
             background: "transparent",
             secondaryColor: "transparent",
@@ -96,30 +118,20 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) {
             const paths = svgElement.querySelectorAll("path");
             paths.forEach((path) => {
               if (path.getAttribute("stroke") !== "none") {
-                path.setAttribute("stroke", "#ffffff");
+                path.setAttribute("stroke", primaryColor);
               }
               if (
                 path.getAttribute("fill") !== "none" &&
                 path.getAttribute("fill") !== "transparent"
               ) {
-                path.setAttribute("fill", "#ffffff");
+                path.setAttribute("fill", primaryColor);
               }
             });
 
             const markers = svgElement.querySelectorAll("marker path");
             markers.forEach((marker) => {
-              marker.setAttribute("fill", "#ffffff");
-              marker.setAttribute("stroke", "#ffffff");
-            });
-
-            const polylines = svgElement.querySelectorAll("polyline");
-            polylines.forEach((polyline) => {
-              polyline.setAttribute("stroke", "#ffffff");
-            });
-
-            const lines = svgElement.querySelectorAll("line");
-            lines.forEach((line) => {
-              line.setAttribute("stroke", "#ffffff");
+              marker.setAttribute("fill", primaryColor);
+              marker.setAttribute("stroke", primaryColor);
             });
           }
         }
@@ -140,7 +152,7 @@ export default function Mermaid({ chart, id, className = "" }: MermaidProps) {
         element.innerHTML = "";
       }
     };
-  }, [chart, id]);
+  }, [chart, id, primaryColor]);
 
   if (error) {
     return (

src/components/nav-tree/NavTree.module.css

@@ -80,7 +80,7 @@ ul.nodesList {
 
       &.active {
         background: var(--brand-color);
-        color: var(--gray-9);
+        color: var(--brand-color-fg);
       }
     }
   }

src/components/navbar/index.tsx

@@ -8,6 +8,7 @@ import GridContainer, { NavAndFooterGridConfig } from "../grid-container";
 import Link, { ButtonLink, SimpleLink } from "../link";
 import NavTree, { BreakNode, LinkNode, NavTreeNode } from "../nav-tree";
 import GhosttyWordmark from "./ghostty-wordmark.svg";
+import GhosttyWordmarkBlack from "./ghostty-wordmark-black.svg";
 import s from "./Navbar.module.css";
 import { useRouter } from "next/router";
 
@@ -31,6 +32,18 @@ export default function Navbar({
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const mobileContentRef = useRef<HTMLDivElement>(null);
   const activeItemRef = useRef<HTMLLIElement>(null);
+  const [darkTheme, setDarkTheme] = useState(true);
+
+  useEffect(() => {
+    const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)");
+    setDarkTheme(mediaMatch.matches);
+    const cb = (e: MediaQueryListEvent) => {
+      setDarkTheme(e.matches);
+    };
+    mediaMatch.addEventListener("change", cb);
+
+    return () => mediaMatch.removeEventListener("change", cb);
+  }, []);
 
   useEffect(() => {
     function handleSizeUpdated() {
@@ -92,7 +105,7 @@ export default function Navbar({
         gridConfig={NavAndFooterGridConfig}
       >
         <NextLink href="/">
-          <Image src={GhosttyWordmark} alt="Ghostty" />
+          <Image src={darkTheme ? GhosttyWordmark : GhosttyWordmarkBlack} alt="Ghostty" />
         </NextLink>
         <div className={s.desktopLinks}>
           {links && (

src/components/sidecar/Sidecar.module.css

@@ -5,6 +5,10 @@
   --gradient-height: 20px;
   --gradient-color: var(--gray-0);
 
+  @media (prefers-color-scheme: light) {
+    --gradient-color: var(--black);
+  }
+
   &::before,
   &::after {
     content: "";

src/components/sponsor-card/SponsorCard.module.css

@@ -5,14 +5,25 @@
   padding: 24px;
   border-radius: 12px;
   border: 1px solid var(--gray-3);
-  background: var(--gray-1);
+  background: var(--gray-2);
   text-decoration: none;
   transition: border-color 0.15s ease, background-color 0.15s ease;
-
   &:hover {
     @media (hover: hover) {
-      border-color: var(--gray-4);
-      background: hsl(var(--brand-color-hsl) / 0.03);
+      border-color: var(--gray-6);
+      background: color-mix(in srgb, var(--brand-color) 20%, transparent);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid var(--gray-3);
+    background: var(--gray-1);
+
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--gray-6);
+        background: color-mix(in srgb, var(--brand-color) 3%, transparent);
+      }
     }
   }
 }

src/components/terminal/Terminal.module.css

@@ -51,6 +51,11 @@
   display: flex;
   flex-direction: column;
 
+  @media (prefers-color-scheme: light) {
+    background: var(--gray-8);
+    color: var(--gray-0)
+  }
+
   & .header {
     display: grid;
     align-items: center;
@@ -102,7 +107,6 @@
   & .content {
     font-size: var(--content-font-size);
     padding-top: var(--code-margin-top);
-    color: var(--gray-6);
     word-wrap: break-word;
     scroll-behavior: smooth;
     overflow-y: scroll;
@@ -117,6 +121,10 @@
         color: var(--brand-color);
       }
     }
+
+    @media (prefers-color-scheme: light) {
+      color: var(--gray-1);
+    }
   }
 
   &.adwaita {

src/layouts/root-layout/RootLayout.module.css

@@ -1,7 +1,7 @@
 .rootLayout {
   font-family: var(--pretendard-std-variable);
 
-  & a {
+  :where(& a) {
 		color: var(--gray-9);
   }
 

src/pages/docs/[...path]/DocsPage.module.css

@@ -154,6 +154,7 @@
   .editOnGithub {
     display: flex;
     align-items: center;
+    margin: 1em 0;
 
     svg {
       margin-left: 4px;

src/styles/globals.css

@@ -9,7 +9,7 @@
 }
 
 html {
-  color-scheme: dark;
+  color-scheme: light dark;
 }
 
 html,
@@ -31,6 +31,7 @@ body {
 
   max-width: 100vw;
   --brand-color: #3551F3;
+  --brand-color-fg: #fff;
   --brand-color-hsl: 240 100% 45%;
   --gray-0: #0F0F11; /* Background color */
   --gray-1: #16161A; /* Blocks */
@@ -145,7 +146,7 @@ pre code {
   text-decoration: underline;
 }
 
-@media print {
+@media print, screen and (prefers-color-scheme: light) {
   /* Invert the lightness in print mode */
   html,
   body {
@@ -174,4 +175,8 @@ pre code {
     --atom-one-gray: #8f97a3;
     --atom-one-white: #434958;
   }
+
+  ::selection {
+    background: color-mix(in srgb, var(--brand-color) 40%, transparent);
+  }
 }