fix(frontend): logo color on dark mode (#2882)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/lib/assets/QuivrLogo.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useEffect, useState } from "react";
 
 interface QuivrLogoProps {
   size: number;
@@ -9,22 +10,19 @@ export const QuivrLogo = ({
   size,
   color = "white",
 }: QuivrLogoProps): JSX.Element => {
-  let src = "/logo-white.svg";
-  if (color === "primary") {
-    src = "/logo-primary.svg";
-  } else if (color === "accent") {
-    src = "/logo-accent.svg";
-  }
+  const [src, setSrc] = useState<string>("/logo-white.svg");
 
-  const filter = color === "black" ? "invert(1)" : "none";
+  useEffect(() => {
+    if (color === "primary") {
+      setSrc("/logo-primary.svg");
+    } else if (color === "accent") {
+      setSrc("/logo-accent.svg");
+    } else if (color === "black") {
+      setSrc("/logo-black.svg");
+    } else {
+      setSrc("/logo-white.svg");
+    }
+  }, [color]);
 
-  return (
-    <Image
-      src={src}
-      alt="Quivr Logo"
-      width={size}
-      height={size}
-      style={{ filter }}
-    />
-  );
+  return <Image src={src} alt="Quivr Logo" width={size} height={size} />;
 };