dark mode and light mode support

pages/project/[slug].tsx

@@ -6,11 +6,9 @@ import { MarkdownRenderingResult } from "../../types/types";
 import { MainLayout } from "../../layouts/MainLayout";
 import Link from "next/link";
 import { IoMdArrowRoundBack as BackIcon } from "react-icons/io";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 import { readingTime } from "../../utils/general";
-import { MarkdownComponents } from "../../utils/reactmarkdown";
 import { PostHeader } from "../../components/PostHeader";
+import { StyledMarkdown } from "../../components/StyledMarkdown";
 
 export const ProjectArticle = ({
   frontMatter,
@@ -19,27 +17,15 @@ export const ProjectArticle = ({
   return (
     <MainLayout>
       <Link href="/projects">
-        <button className="flex flex-row items-center gap-2 text-secondary hover:text-secondary/50 transition-all ease-in duration-75">
+        <button className="flex flex-row items-center gap-2 text-primary hover:text-primary-dark dark:text-secondary dark:hover:text-secondary/50 transition-all ease-in duration-75">
           <BackIcon />
           <span>Go Back</span>
         </button>
       </Link>
 
       <PostHeader frontMatter={frontMatter} estTime={readingTime(html)} />
-      <div
-        className="
-        prose prose-code:font-mono prose-code:text-gray-100 prose-code:bg-gray-700 
-        prose-code:p-1 prose-code:m-1 prose-code:rounded-md prose-headings:text-primary-text 
-      prose-p:text-gray-100 prose-img:w-full prose-img:h-auto xl:prose-img:max-h-96 
-      prose-img:object-cover prose-li:text-gray-300 prose-td:text-gray-400 
-      prose-a:text-action prose-strong:text-gray-50"
-      >
-        <ReactMarkdown
-          components={MarkdownComponents}
-          remarkPlugins={[remarkGfm]}
-          children={html}
-        />
-      </div>
+
+      <StyledMarkdown html={html} />
     </MainLayout>
   );
 };