Merge pull request #15 from Shubidumdu/dark-mode

Dark mode
Shubidumdu · Aug 1, 2024 · 70840b5 · 70840b5
2 parents d36d15e + 134323d
commit 70840b5
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -54,15 +54,15 @@ 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>
           <BadgeList items={post.attributes.tags} />
         </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
@@ -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
@@ -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
@@ -22,17 +22,17 @@ 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>
       <div className="flex gap-4">
         {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
@@ -50,6 +50,10 @@
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
   }
+
+  .hljs {
+    color: #eef !important;
+  }
 }
 
 body {
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,10 @@ @@
         --background-start-rgb: 0, 0, 0;
         --background-end-rgb: 0, 0, 0;
       }
+      .hljs {
+        color: #eef !important;
+      }
     }
     body {
@@ Expand Down @@