adding dark mode

letesdev · Jun 15, 2024 · 29097df · 29097df
1 parent 3988beb
commit 29097df
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 17 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,8 +1,8 @@
 ---
 const currentYear = new Date().getFullYear()
 ---
-<div class="p-8 sm:mx-auto sm:w-full sm:p-4">
-    <div class="mb-1.5 max-w-xl mx-auto mt-2">
+<div class="p-8 sm:mx-auto sm:w-full sm:p-4 dark:bg-slate-900">
+    <div class="mb-1.5 max-w-3xl mx-auto mt-2 dark:text-slate-400">
         © {currentYear} <a href="https://letesdev.github.io/" class="text-blue-500">letesdev</a>. Casi todos los derechos reservados.
     </div>
     <!-- <div class="footer_right"></div> -->

diff --git a/src/components/GoodReadsWidget.astro b/src/components/GoodReadsWidget.astro
@@ -122,8 +122,10 @@
             "my-auto",
             "mx-auto",
             "border",
-            "border-gray-400",
             "rounded-lg",
+            "border-gray-400",
+            "dark:bg-slate-800",
+            "dark:border-none",
         );
     });
 </script>
diff --git a/src/components/Section.astro b/src/components/Section.astro
@@ -3,7 +3,7 @@
 const { title, link, link_title } = Astro.props
 ---
 
-<section class="max-w-3xl mx-auto mt-4 mb-2" >
+<section class="dark:text-white max-w-3xl mx-auto mt-4 mb-2" >
   {title && !link && <h2 class="text-2xl leading-6 font-headers font-bold mb-2">{title}</h2>}
   {title && link && <h2 class="text-2xl leading-6 font-headers font-bold mb-2"><a href={link} title={link_title} target="_blank" class="hover:underline text-clip">{title}</a></h2>}
   <slot />

diff --git a/src/components/sections/About.astro b/src/components/sections/About.astro
@@ -7,10 +7,10 @@ const {text, book, author} = quote
 ---
 
 <Section title="Sobre mí">
-  <quote class="font-sans font-semibold tracking-tight text-justify text-sm">
+  <quote class="dark:text-slate-400 font-sans font-semibold tracking-tight text-justify text-sm">
     <i>{text}</i> - <b>{book}, {author}.</b>
   </quote>
-  <p class="font-sans text-gray-700 text-pretty pt-3">
+  <p class="font-sans text-gray-700 dark:text-slate-400 text-pretty pt-3">
     {summary}
   </p>
 </Section>
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
@@ -28,15 +28,15 @@ const printInfo = [email, linkedUrl].filter(Boolean).join(" • ")
   <div id="container" class="flex flex-col-reverse sm:flex-row items-center justify-between gap-4">
     <div id="info" class="flex justify-center items-center sm:items-start pr-0 flex-col gap-1 sm:gap-2 sm:pr-8">
       <h1 class="font-headers font-bold text-3xl text-center sm:text-left">{name}</h1>
-      <h2 class="text-gray-800 font-headers leading-6 font-medium text-[1.1rem] sm:text-wrap text-center sm:text-left">{label}</h2>
-      <span class="text-gray-600 flex items-center gap-1 font-medium text-xs tracking-tight text-center sm:text-left">
+      <h2 class="text-gray-800 dark:text-white font-headers leading-6 font-medium text-[1.1rem] sm:text-wrap text-center sm:text-left">{label}</h2>
+      <span class="text-gray-600 dark:text-slate-400 flex items-center gap-1 font-medium text-xs tracking-tight text-center sm:text-left">
         <WorldMap />
         {city}, {region}
       </span>
       <!-- <footer class="print">
         {printInfo}
       </footer> -->
-      <footer id="no-print" class="text-gray-600 flex gap-2 items-center">
+      <footer id="no-print" class="text-gray-600 dark:text-slate-100 flex gap-2 items-center">
         {
           email && (
             <a

diff --git a/src/components/sections/Projects.astro b/src/components/sections/Projects.astro
@@ -13,10 +13,10 @@ import { projects } from "@cv"
         ({ url, description, highlights, name, isActive, github }) => {
           return (
             <li>
-              <article class="flex flex-col border-none pb-4 shadow-[0_1px_0_0_rgb(242,242,242)] sm:border-solid sm:border sm:border-gray-200 sm:rounded-lg gap-4 sm:p-4">
+              <article class="dark:sm:bg-slate-800 flex flex-col border-none pb-4 sm:border-solid sm:border sm:border-gray-200 dark:sm:border-none sm:rounded-lg gap-4 sm:p-4">
                 <header>
                   {/* <h3 class="flex items-center font-headers font-bold text-[23px] leading-6 mb-2"> */}
-                  <h3 class="flex items-center font-headers font-bold leading-6 mb-2">
+                  <h3 class="dark:text-white flex items-center font-headers font-bold leading-6 mb-2">
                     <a href={url} target="_blank" title={`Ver el proyecto ${name}`} class="hover:underline text-clip ">
                       {name}
                     </a>
@@ -32,13 +32,14 @@ import { projects } from "@cv"
                       </a>
                     )}
                   </h3>
-                  <p class="text-pretty text-gray-700 text-sm leading-5 mb-1">{description}</p>
+                  <p class="text-pretty text-gray-700 dark:text-slate-400 text-sm leading-5 mb-1">{description}</p>
                 </header>
                 <footer class="flex flex-wrap gap-1 text-xs">
                   {highlights.map((highlight) => {
-                    return <span class="rounded-md bg-gray-100 text-gray-600 font-medium px-1.5 py-0.5">{highlight}</span>
+                    return <span class="rounded-md bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-100 font-medium px-1.5 py-0.5">{highlight}</span>
                   })}
                 </footer>
+                <hr class="border-[rgb(242,242,242)] dark:border-slate-700 sm:border-none">
               </article>
             </li>
           )

diff --git a/src/components/sections/Skills.astro b/src/components/sections/Skills.astro
@@ -50,7 +50,7 @@ const SKILLS_ICONS: Record<string, any> = {
         const Icon = SKILLS_ICONS[iconName]
 
         return (
-          <li class="flex items-center bg-gray-200 rounded-md text-black font-medium gap-1 px-2 py-1">
+          <li class="flex items-center bg-gray-200 dark:bg-slate-700 text-black dark:text-slate-100 rounded-md font-medium gap-1 px-2 py-1">
             {Icon && <Icon />} <span>{name}</span>
           </li>
         )

diff --git a/src/components/sections/Writings.astro b/src/components/sections/Writings.astro
@@ -13,7 +13,7 @@ const maxPosts = 3;
         {
             allPosts.slice(0, maxPosts).map((post) => (
                 <li class="flex">
-                    <div class="min-w-28 text-gray-700">
+                    <div class="min-w-28 text-gray-700 dark:text-slate-400">
                         {/* <time>{post.frontmatter.date}</time> */}
                         <time>{post.data.date.toLocaleDateString("es-es", {
                             year: 'numeric',
@@ -23,7 +23,7 @@ const maxPosts = 3;
                     </div>
                     <span>
                         {/* <a href={post.url}>{post.frontmatter.title}</a> */}
-                        <a class="underline-offset-4 hover:underline text-gray-700" href={`/portfolio/posts/${post.slug}/`}>{post.data.title}</a>
+                        <a class="underline-offset-4 hover:underline text-gray-700 dark:text-slate-400" href={`/portfolio/posts/${post.slug}/`}>{post.data.title}</a>
                     </span>
                 </li>
             ))

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -16,7 +16,7 @@ const { name, label } = basics
 ---
 
 <Layout title={`${name} - ${label}`}>
-  <main class="p-8 sm:mx-auto sm:w-full sm:p-4">
+  <main class="bg-white dark:bg-slate-900 p-8 sm:mx-auto sm:w-full sm:p-4">
     <Hero />
     <About />
     <Skills />