feat: dark-light mode logo

Author: stakbucks

docs/public/dark-logo.png

@@ -4,6 +4,7 @@ import { getPageMap } from "nextra/page-map";
 import "nextra-theme-docs/style-prefixed.css";
 import "./globals.css";
 import { TrackClick, TrackImpression, TrackProvider } from "@/tracker";
+import { Logo } from "@/logo";
 
 export const metadata = {
   title: {
@@ -15,9 +16,13 @@ const navbar = (
   <Navbar
     logo={
       <TrackClick params={{ target: "logo" }}>
-        <b>event-tracker</b>
+        <div className="flex items-center gap-2">
+          <Logo />
+          <b>event-tracker</b>
+        </div>
       </TrackClick>
     }
+    projectLink="https://github.com/offlegacy/event-tracker"
   />
 );
 const footer = (

docs/public/light-logo.png

@@ -1,6 +1,7 @@
 import { Image } from "nextra/components";
 import Link from "next/link";
 import { TrackClick, TrackPageView } from "@/tracker";
+import { Logo } from "@/logo";
 
 export const metadata = {};
 
@@ -9,7 +10,7 @@ export default function Page() {
     <>
       <div className="mx-auto flex min-h-screen max-w-6xl flex-col items-center px-6 py-16">
         <div className="mb-16 flex flex-col items-center text-center">
-          <Image src="/logo.jpg" alt="event-tracker logo" width={200} height={200} className="mb-8" />
+          <Logo size={200} />
           <h1 className="mb-6 text-5xl font-bold">event-tracker</h1>
           <p className="mb-6 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
             A lightweight, type-safe event tracking library for React applications that simplifies analytics integration

docs/src/app/layout.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTheme } from "nextra-theme-docs";
+import Image from "next/image";
+import { useSystemDarkMode } from "./useSystemDarkMode";
+
+interface LogoProps {
+  size?: number;
+}
+
+const DARK_LOGO_PATH = "/dark-logo.png";
+const LIGHT_LOGO_PATH = "/light-logo.png";
+
+export const Logo = ({ size = 30 }: LogoProps) => {
+  const isSystemDarkMode = useSystemDarkMode();
+  const { theme } = useTheme();
+
+  const isDarkMode = theme === "system" ? isSystemDarkMode : theme === "dark";
+
+  return (
+    <Image src={isDarkMode ? DARK_LOGO_PATH : LIGHT_LOGO_PATH} alt="event-tracker logo" width={size} height={size} />
+  );
+};

docs/src/app/page.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+const DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
+
+export const useSystemDarkMode = () => {
+  const [isSystemDarkMode, setIsSystemDarkMode] = useState(false);
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(DARK_MODE_QUERY);
+    setIsSystemDarkMode(matchMedia.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsSystemDarkMode(e.matches);
+    };
+
+    matchMedia.addEventListener("change", handleChange);
+
+    return () => {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  return isSystemDarkMode;
+};