feat(website): macos light/dark screenshot

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";

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";
+}

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>
     )
 }