Merge pull request #17 from h4sci/fix_theme

added dark fonts to blog section

Author: mbannert

src/components/SectionHead.astro

@@ -3,10 +3,10 @@ const { align = "center" } = Astro.props;
 ---
 
 <div class:list={["mt-16", align === "center" && "text-center"]}>
-  <h1 class="text-4xl lg:text-5xl font-bold lg:tracking-tight">
+  <h1 class="text-4xl lg:text-5xl font-bold lg:tracking-tight  dark:text-white ">
     <slot name="title">Title</slot>
   </h1>
-  <p class="text-lg mt-4 text-slate-600">
+  <p class="text-lg mt-4 text-slate-600  dark:text-gray-300">
     <slot name="desc">Some description goes here</slot>
   </p>
 </div>

src/pages/blog.astro

@@ -50,7 +50,7 @@ console.log("Cover data:", publishedBlogEntries[0]?.data.cover);
                         {blogPostEntry.data.category}
                       </span>
 
-                      <h2 class="text-3xl font-semibold leading-snug tracking-tight mt-1 ">
+                      <h2 class="text-3xl font-semibold leading-snug tracking-tight mt-1 dark:text-white">
                         {blogPostEntry.data.title}
                       </h2>
                       <Image src={blogPostEntry.data.cover} alt={blogPostEntry.data.coverAlt}

src/pages/blog/[slug].astro

@@ -16,7 +16,6 @@ export async function getStaticPaths() {
 // Get the entry directly from the prop on render
 const { entry } = Astro.props;
 const { Content } = await entry.render();
-
 ---
 
 <Layout title={entry.data.title}>
@@ -26,19 +25,20 @@ const { Content } = await entry.render();
         {entry.data.category}
       </span>
       <h1
-        class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight">
+        class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight dark:text-white"
+      >
         {entry.data.title}
       </h1>
-      <Image src={entry.data.cover} alt={entry.data.coverAlt}
-      />
+      <Image src={entry.data.cover} alt={entry.data.coverAlt} />
       <div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap">
         <span class="text-gray-400">
           {entry.data.author}
         </span>
         <span class="text-gray-400">•</span>
         <time
           class="text-gray-400"
-          datetime={entry.data.publishDate.toISOString()}>
+          datetime={entry.data.publishDate.toISOString()}
+        >
           {entry.data.publishDate.toDateString()}
         </time>
         <span class="text-gray-400 hidden md:block">•</span>
@@ -52,13 +52,13 @@ const { Content } = await entry.render();
       </div>
     </div>
 
-    <div class="mx-auto prose prose-lg mt-6 max-w-3xl">
+    <div class="mx-auto prose prose-lg mt-6 max-w-3xl dark:prose-invert">
       <Content />
     </div>
     <div class="text-center mt-8 mb-16">
       <a
         href="/blog"
-        class="bg-gray-100 px-5 py-3 rounded-md hover:bg-gray-200 transition"
+        class="bg-gray-100 px-5 py-3 rounded-md hover:bg-gray-200 transition dark:bg-gray-700 dark:hover:bg-gray-600"
         >← Back to Blog</a
       >
     </div>