diff --git a/apps/website/src/assets/screenshot_desktop_mac_dark.png b/apps/website/src/assets/screenshot_desktop_mac_dark.png
new file mode 100644
index 000000000..2eae66f18
Binary files /dev/null and b/apps/website/src/assets/screenshot_desktop_mac_dark.png differ
diff --git a/apps/website/src/assets/screenshot_desktop_mac_light.png b/apps/website/src/assets/screenshot_desktop_mac_light.png
new file mode 100644
index 000000000..a2b64b7fb
Binary files /dev/null and b/apps/website/src/assets/screenshot_desktop_mac_light.png differ
diff --git a/apps/website/src/download-helper.ts b/apps/website/src/download-helper.ts
index 84c887dd6..8a4dc7442 100644
--- a/apps/website/src/download-helper.ts
+++ b/apps/website/src/download-helper.ts
@@ -167,7 +167,7 @@ export function getArchitecture(): Architecture {
     return "x64";
 }
 
-function getPlatform(): Platform {
+export function getPlatform(): Platform {
     const userAgent = navigator.userAgent.toLowerCase();
     if (userAgent.includes('macintosh') || userAgent.includes('mac os x')) {
         return "macos";
diff --git a/apps/website/src/hooks.tsx b/apps/website/src/hooks.tsx
index a5d061c74..710de0c60 100644
--- a/apps/website/src/hooks.tsx
+++ b/apps/website/src/hooks.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 export function usePageTitle(title: string) {
     useEffect(() => {
@@ -9,3 +9,17 @@ export function usePageTitle(title: string) {
         }
     }, [ title ]);
 }
+
+export function useColorScheme() {
+    const [ prefersDark, setPrefersDark ] = useState((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches));
+
+    useEffect(() => {
+        const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+        const listener = () => setPrefersDark((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches));
+
+        mediaQueryList.addEventListener("change", listener);
+        return () => mediaQueryList.removeEventListener("change", listener);
+    }, []);
+
+    return prefersDark ? "dark" : "light";
+}
diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx
index 80957bbbb..113268024 100644
--- a/apps/website/src/pages/Home/index.tsx
+++ b/apps/website/src/pages/Home/index.tsx
@@ -3,10 +3,11 @@ import Card from '../../components/Card';
 import Section from '../../components/Section';
 import DownloadButton from '../../components/DownloadButton';
 import "./index.css";
-import { usePageTitle } from '../../hooks';
+import { useColorScheme, usePageTitle } from '../../hooks';
 import Button from '../../components/Button';
 import gitHubIcon from "../../assets/boxicons/bx-github.svg?raw";
 import dockerIcon from "../../assets/boxicons/bx-docker.svg?raw";
+import { getPlatform } from '../../download-helper';
 
 export function Home() {
     usePageTitle("");
@@ -23,6 +24,23 @@ export function Home() {
 }
 
 function HeroSection() {
+    const platform = getPlatform();
+    let screenshotUrl: string;
+    const colorScheme = useColorScheme();
+
+    switch (platform) {
+        case "macos":
+            screenshotUrl = `./src/assets/screenshot_desktop_mac_${colorScheme}.png`;
+            break;
+
+        case "linux":
+            break;
+        case "windows":
+        default:
+            screenshotUrl = "./src/assets/screenshot_desktop_win.png";
+            break;
+    }
+
     return (
         <Section className="hero-section">
             <div class="title-section">
@@ -41,7 +59,7 @@ function HeroSection() {
 
             </div>
 
-            <img class="screenshot" src="./src/assets/screenshot_desktop_win.png" />
+            {screenshotUrl && <img class="screenshot" src={screenshotUrl} />}
         </Section>
     )
 }