Fix dark mode logo and markdown link colors

Use a cropped white SVG logo without the black background rect for dark
mode. Add theme-aware link color to the markdown renderer so links in
news posts use the primary color instead of the harsh default blue.

Author: msaroufim

frontend/public/gpu-mode-logo/white-cropped.svg

@@ -28,7 +28,7 @@ export default function NavBar() {
   const isDark = theme.palette.mode === "dark";
 
   const logoSrc = isDark
-    ? "/gpu-mode-logo/white.svg"
+    ? "/gpu-mode-logo/white-cropped.svg"
     : "/gpu-mode-logo/black-cropped.svg";
 
   const cycleMode = () => {

frontend/src/components/app-layout/NavBar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
+import { useTheme } from "@mui/material/styles";
 
 type MarkdownRendererProps = {
   content: string;
@@ -44,11 +45,18 @@ const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
 }) => {
   const mergedImageProps = { ...defaultImageProps, ...imageProps };
   const { align, ...styleProps } = mergedImageProps;
+  const theme = useTheme();
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw]}
       components={{
+        a: ({ node, ...props }) => (
+          <a
+            style={{ color: theme.palette.primary.main, textDecoration: "none" }}
+            {...props}
+          />
+        ),
         figure: ({ node, ...props }) => (
           <figure style={{ textAlign: align, margin: "1.5rem 0" }} {...props} />
         ),