fix-dark-theme

Author: domanskyi

app/blog/page.tsx

@@ -16,7 +16,7 @@ export default function Page() {
       <div className="flex items-start justify-between">
         <h1 className="font-semibold mb-2 tracking-tighter">Blog</h1>
         <Link
-          className="flex items-center transition-all text-neutral-600 hover:text-neutral-800 dark:hover:text-neutral-100"
+          className="flex items-center transition-all text-neutral-200 hover:text-neutral-800 dark:hover:text-neutral-100"
           rel="noopener noreferrer"
           target="_blank"
           href="/rss"

app/components/blogPosts.tsx

@@ -42,7 +42,7 @@ const BlogPosts: FC<TBlogPostsProps> = ({ posts }) => {
                   />
                 )}
               </p>
-              <span className="text-neutral-500 text-sm">
+              <span className="text-neutral-400 text-sm">
                 {post.tags.join(", ")}
               </span>
             </div>

app/components/socials.tsx

@@ -103,13 +103,13 @@ const Socials = () => {
           />
         </span>
         {drawerOpened && (
-          <div className="absolute right-0 top-6  flex flex-col gap-0.5 py-2 bg-white border border-neutral-100 rounded-xs shadow-lg z-10">
+          <div className="absolute right-0 top-6  flex flex-col gap-0.5 py-2 bg-white dark:bg-black border border-neutral-100 dark:border-neutral-800 rounded-xs shadow-lg z-10">
             {socials.map((social) => (
               <Link
                 href={social.url}
                 key={social.title}
                 target="_blank"
-                className="py-1 px-2 w-[9.375rem] flex flex-row items-center gap-2 text-neutral-600 hover:text-neutral-800 transition-colors text-sm"
+                className="py-1 px-2 w-[9.375rem] flex flex-row items-center gap-2 text-neutral-600 dark:text-white hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors text-sm"
               >
                 {social.icon}
                 {social.title}

app/global.css

@@ -157,5 +157,5 @@ table {
 .navbar {
   position: sticky;
   top: 0;
-  background-color: #fff;
+  @apply bg-white dark:bg-black;
 }

app/views/blogPost.tsx

@@ -41,7 +41,7 @@ const BlogPost: FC<TBlogPostProps> = ({ post }) => {
           {post.metadata.title}
         </h1>
         <Link
-          className="flex items-center transition-all text-neutral-600 hover:text-neutral-800 dark:hover:text-neutral-100"
+          className="flex items-center transition-all text-neutral-200 hover:text-neutral-800 dark:hover:text-neutral-100"
           rel="noopener noreferrer"
           target="_blank"
           href="/rss"
@@ -54,7 +54,7 @@ const BlogPost: FC<TBlogPostProps> = ({ post }) => {
         <p className="text-sm text-neutral-600 dark:text-neutral-400">
           {formatDate(new Date(post.metadata.publishedAt), true)}
         </p>
-        <span className="text-neutral-500 text-sm">
+        <span className="text-neutral-400 text-sm">
           {post.metadata.tags?.join(", ")}
         </span>
       </div>