diff --git a/src/app/components/Comment.tsx b/src/app/components/Comment.tsx
index aaba1cc..1a48b8b 100644
--- a/src/app/components/Comment.tsx
+++ b/src/app/components/Comment.tsx
@@ -6,7 +6,9 @@ const UTTERANCES_SCRIPT_OPTIONS = {
   repo: 'Shubidumdu/shubidumdu.github.io',
   'issue-term': 'pathname',
   label: 'comment',
-  theme: 'github-light',
+  theme: window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark-blue'
+    : 'github-light',
   crossorigin: 'anonymous',
 } as const;
 
diff --git a/src/app/components/Post.tsx b/src/app/components/Post.tsx
index 8eb6d24..f894a8e 100644
--- a/src/app/components/Post.tsx
+++ b/src/app/components/Post.tsx
@@ -54,7 +54,7 @@ const Post = ({ post, base }: PostProps) => {
   if (!parsedMarkDown) return null;
 
   return (
-    <div className="container m-auto max-w-4xl rounded max-sm:rounded-none p-4 font-mono bg-white shadow">
+    <div className="container m-auto max-w-4xl rounded max-sm:rounded-none p-4 font-mono bg-white dark:bg-gray-800 shadow">
       <div className="flex justify-between">
         <h3 className="text-gray-400 text-xs">{post.attributes.createdAt}</h3>
         <div>
@@ -62,7 +62,7 @@ const Post = ({ post, base }: PostProps) => {
         </div>
       </div>
       <div
-        className="markdown-body font-mono pt-4"
+        className="markdown-body font-mono pt-4 dark:bg-gray-800"
         dangerouslySetInnerHTML={{
           __html: parsedMarkDown,
         }}
diff --git a/src/app/components/PostCard.tsx b/src/app/components/PostCard.tsx
index fe97281..e7038cc 100644
--- a/src/app/components/PostCard.tsx
+++ b/src/app/components/PostCard.tsx
@@ -17,7 +17,7 @@ const PostCard = ({
   createdAt,
 }: PostCardProps) => {
   return (
-    <li className="bg-white rounded-md shadow hover:scale-105 transition-all">
+    <li className="bg-white dark:bg-gray-800 rounded-md shadow hover:scale-105 transition-all">
       <Link className="h-full" href={`/posts/${id}`}>
         <article className="flex flex-row h-full max-sm:flex-col">
           <div
@@ -33,11 +33,18 @@ const PostCard = ({
             />
           </div>
           <div className="w-full p-4 pb-2 pt-2">
-            <h3 className="text-lg mb-1 font-bold text-gray-800">{title}</h3>
-            <p className="text-sm mb-2 font-normal text-gray-700">{desc}</p>
+            <h3 className="text-lg mb-1 font-bold text-gray-800 dark:text-gray-100">
+              {title}
+            </h3>
+            <p className="text-sm mb-2 font-normal text-gray-700 dark:text-gray-300">
+              {desc}
+            </p>
             <div className="flex justify-between items-end">
               {tags ? <BadgeList items={tags} /> : null}
-              <time className="text-xs text-gray-400" dateTime={createdAt}>
+              <time
+                className="text-xs text-gray-400 dark:text-gray-500"
+                dateTime={createdAt}
+              >
                 {createdAt}
               </time>
             </div>
diff --git a/src/app/components/ProjectCard.tsx b/src/app/components/ProjectCard.tsx
index 3ee88ce..3c2d6d1 100644
--- a/src/app/components/ProjectCard.tsx
+++ b/src/app/components/ProjectCard.tsx
@@ -21,7 +21,7 @@ const ProjectCard = ({
   createdAt,
 }: ProjectCardProps) => {
   return (
-    <li className="bg-white rounded-md shadow hover:scale-105 transition-all">
+    <li className="bg-white dark:bg-gray-800 rounded-md shadow hover:scale-105 transition-all">
       <Link className="h-full" href={href}>
         <article className="flex flex-row h-full max-sm:flex-col">
           <div
@@ -37,8 +37,12 @@ const ProjectCard = ({
             />
           </div>
           <div className="w-full p-4 pb-2 pt-2">
-            <h3 className="text-lg mb-1 font-bold text-gray-800">{title}</h3>
-            <p className="text-sm mb-2 font-normal text-gray-700">{desc}</p>
+            <h3 className="text-lg mb-1 font-bold text-gray-800 dark:text-gray-100">
+              {title}
+            </h3>
+            <p className="text-sm mb-2 font-normal text-gray-700 dark:text-gray-300">
+              {desc}
+            </p>
             <div className="flex justify-between items-end">
               {tags ? <BadgeList items={tags} /> : null}
               <time className="text-xs text-gray-400" dateTime={createdAt}>
diff --git a/src/app/components/TopBar.tsx b/src/app/components/TopBar.tsx
index a06809f..623da1b 100644
--- a/src/app/components/TopBar.tsx
+++ b/src/app/components/TopBar.tsx
@@ -22,9 +22,9 @@ const TopBar = () => {
   const pathname = usePathname();
 
   return (
-    <header className="bg-white font-mono w-full h-12 flex justify-between items-center drop-shadow-md z-50 fixed top-0 p-6">
+    <header className="bg-white dark:bg-gray-800 font-mono w-full h-12 flex justify-between items-center drop-shadow-md z-50 fixed top-0 p-6">
       <Link href="/">
-        <h1 className="text-xl font-bold text-gray-600 hover:text-gray-800 transition-all">
+        <h1 className="text-xl font-bold text-gray-600 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 transition-all">
           Shubidumdu
         </h1>
       </Link>
@@ -32,7 +32,7 @@ const TopBar = () => {
         {PATHS.map(({ path, label }, index) => (
           <Link href={path} key={index}>
             <h2
-              className={`text-l text-gray-600 hover:text-gray-800 hover:underline underline-offset-2 transition-all ${
+              className={`text-l text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-500 hover:underline underline-offset-2 transition-all ${
                 pathname.includes(path) ? 'text-gray-800 font-bold' : ''
               }`}
             >
diff --git a/src/app/globals.css b/src/app/globals.css
index 97b7980..8c1ddcb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -50,6 +50,10 @@
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
   }
+
+  .hljs {
+    color: #eef !important;
+  }
 }
 
 body {