feat(header): integrate theme support for logo based on current theme

app/components/header.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { LoginLink, LogoutLink, RegisterLink } from "@kinde-oss/kinde-auth-nextjs/server";
 import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
+import { useTheme } from "@/app/providers";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -51,8 +52,11 @@ const userMenuItems = [
 
 export default function Header() {
   const { isAuthenticated, getUser, isLoading } = useKindeBrowserClient();
+  const { theme } = useTheme();
   const user = getUser();
 
+  const logoSrc = theme === "dark" ? "/vtorio-dark.svg" : "/vtorio.svg";
+
   if (isLoading) {
     return (
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -60,7 +64,7 @@ export default function Header() {
           <div className="flex items-center gap-6">
             <Link href="/" className="flex items-center space-x-2">
               <Image
-                src="/vtorio.svg"
+                src={logoSrc}
                 alt="vtor.io"
                 width={32}
                 height={8}
@@ -83,7 +87,7 @@ export default function Header() {
         <div className="flex items-center gap-6">
           <Link href="/" className="flex items-center space-x-2">
             <Image
-              src="/vtorio.svg"
+              src={logoSrc}
               alt="vtor.io"
               width={32}
               height={8}