Merge pull request #5 from SteveMoya/dark-mode

Dark mode realizado

src/components/Footer.astro

@@ -1,5 +1,5 @@
 <footer class="py-4 border-t-[1px] border-t-neutral-800">
 	<div class="container m-auto">
-		<a class="text-base no-underline hover:underline" href="https://github.com/doneber/linkhub" target="_blank">Repositorio de GitHub</a>
+		<a class="text-base no-underline hover:underline ml-4" href="https://github.com/doneber/linkhub" target="_blank">Repositorio de GitHub</a>
 	</div>
 </footer>

src/components/Logo.astro

@@ -0,0 +1,17 @@
+---
+
+---
+<svg 
+viewBox="0 0 16 17" 
+{...Astro.props}
+fill="none" 
+xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_106_566)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6667 1.83333H10.2222V6.2778H5.7778V10.7222H1.33333V15.1667H14.6667V1.83333Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_106_566">
+<rect width="16" height="16" fill="currentColor" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

src/components/Navbar.astro

@@ -1,10 +1,15 @@
+---
+import ToggleTheme from './ToggleTheme';
+import Logo from './Logo.astro';
+---
 <nav class="container mx-auto flex justify-between p-4">
   <a href="/" class="flex gap-2 items-center justify-center hover:underline underline-offset-4">
-    <img class="w-5 mt-1" src="/logo.svg" alt="Logo de Linkhub" >
+	<Logo class="w-5 mt-1" />
 		<span>LinkHub</span>
   </a>
+  <ToggleTheme client:only/>
   <div class="flex gap-3">
     <a class="hover:underline underline-offset-4" href="/contribution">Colaboraciones</a>
-    <a class="hover:underline underline-offset-4" href="/all">Recursos</a>
+    <a class="hover:underline underline-offset-4" href="/all">Todos los Recursos</a>
   </div>
 </nav>

src/components/ToggleTheme.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "preact/hooks";
+
+
+export default function ToggleTheme() {
+  const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "light");
+
+  const handleClick = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+useEffect(() => {
+	if (theme === "dark") {
+		document.documentElement.classList.add("dark");
+	} else {
+		document.documentElement.classList.remove("dark");
+	}
+	localStorage.setItem("theme", theme);
+}, [theme]);
+
+return (
+	<button className="rounded-full border p-1 dark:border-neutral-700" onClick={handleClick}>{theme === "light" ? "🌙" : "🌞"}</button>
+);
+}

src/components/card/Card.tsx

@@ -8,17 +8,15 @@ interface Props {
 
 export const Card = ({ href, title, description, imageUrl, hashtags }: Props) => {
   return (
-    <li className="rounded border-[1px] border-[solid] border-neutral-700 hover:bg-neutral-800 hover:bg-[0]">
+    <li className="rounded border-[1px] border-[solid] border-neutral-700 hover:bg-neutral-800 hover:bg-[0] dark:hover:bg-neutral-200">
       <a href={href} target="_blank" className="flex h-full flex-col md:flex-row">
         <div class="flex w-full h-full flex-col p-4">
           <h2 className="min-h-4 truncate text-base">{title}</h2>
-          <p class="mt-2 text-sm text-neutral-400"
+          <p class="mt-2 text-sm text-neutral-400 dark:text-neutral-800 overflow-hidden"
 							style="
-								@apply overflow-hidden;
 								display: -webkit-box;
 								-webkit-box-orient: vertical;
 								-webkit-line-clamp: 2;
-								overflow: hidden;
 								text-overflow: ellipsis;
 							"
 					>{description}</p>

src/components/searcher/SearchIcon.tsx

@@ -1,3 +1,3 @@
-export const SearchIcon = () => (<svg width="30" fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+export const SearchIcon = () => (<svg width="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 	<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
 	</svg>)

src/components/searcher/Searcher.tsx

@@ -21,9 +21,9 @@ export const Searcher = () => {
 	}, [])
 
   return (
-    <form method="GET" action="/search" className="flex justify-center items-center gap-2" onSubmit={handleSearch}>
-      <input ref={inputRef} required placeholder="Ej. svg" name="q" className="h-10 w-full rounded-lg border border-solid border-neutral-700 bg-transparent px-4 py-1 focus:outline-none focus:ring-0" />
-      <button type={"submit"} className="pt-2 pb-0 px-2 rounded-lg hover:bg-[#333]">
+    <form method="GET" autocomplete="off" action="/search" className="flex justify-center items-center gap-2" onSubmit={handleSearch}>
+      <input ref={inputRef} required placeholder="Ej. svg" name="q" className="h-10 w-full rounded-lg border border-solid border-neutral-700 bg-transparent px-4 py-1 focus:outline-none focus:ring-0 " />
+      <button type={"submit"} className="pt-2 pb-0 px-2 rounded-lg hover:bg-[#333] dark:hover:bg-neutral-200">
         <SearchIcon />
       </button>
     </form>

src/components/searcher/SearcherQuery.tsx

@@ -2,19 +2,19 @@ import { SearchIcon } from "./SearchIcon"
 
 export const SearcherQuery = () => {
   return (
-    <form action="/search" method="GET" className="flex flex-col justify-center items-center gap-6">
+    <form action="/search" method="GET" autocomplete="off" className="flex flex-col justify-center items-center gap-6">
 			<div className="flex border rounded-lg border-solid border-neutral-700 w-full max-w-[520px] pl-4 py-0">
-				<input required name="q" placeholder="Ej. svg" className="w-full bg-transparent focus:border-transparent focus:outline-none focus:ring-0" />
+				<input required name="q" placeholder="Ej. svg" className="w-full bg-transparent focus:border-transparent focus:outline-none focus:ring-0  " />
 				<button type={"submit"} className="flex justify-center items-center border-none p-0 pt-2 pb-1 px-2 rounded-lg">
 					<SearchIcon />
 				</button>
 			</div>
 			{/* TODO: Analizar un mejor diseño */}
 			{/* <div className="flex gap-4">
-				<button type={"submit"} className="text-lg border border-solid border-neutral-700 rounded px-8 py-2 hover:bg-neutral-700">
+				<button type={"submit"} className="text-lg border border-solid border-neutral-700 rounded px-8 py-2 dark:bg-neutral-200 dark:hover:bg-neutral-300 hover:bg-neutral-700 bg-neutral-800">
 					Buscar
 				</button>
-				<a href="/all" type={"button"} className="text-lg border border-solid border-neutral-700 rounded px-5 py-2 bg-transparent hover:bg-neutral-800">
+				<a href="/all" type={"button"} className="text-lg border border-solid border-neutral-800 rounded px-5 py-2 bg-transparent hover:bg-neutral-800 dark:hover:bg-neutral-200">
 					Ver todos
 				</a>
 			</div> */}

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -11,7 +11,7 @@ const { title } = Astro.props
 ---
 
 <!doctype html>
-<html lang="es">
+<html lang="es" class="dark:text-black text-white">
   <head>
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
@@ -30,19 +30,30 @@ const { title } = Astro.props
 			gtag('config', 'G-EMQSEBG01K');
 		</script>
   </head>
-  <body class="flex min-h-screen flex-col bg-neutral-900 text-white">
+  <body class="flex min-h-screen flex-col bg-neutral-900 text-white dark:bg-neutral-50 dark:text-black ">
     <Navbar />
     <main class="container mx-auto max-w-4xl flex-1 overflow-y-auto p-4 px-8 text-xl">
       <slot />
     </main>
     <Footer />
   </body>
-	<style is:global>
-		input:-webkit-autofill,
-		textarea:-webkit-autofill,
-		select:-webkit-autofill {
-			-webkit-box-shadow: 0 0 0 1000px #191919 inset !important;
-			-webkit-text-fill-color: white !important;
-		}
-	</style>
+
 </html>
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme");
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  })();
+
+  if (theme === "light") {
+    document.documentElement.classList.remove("dark");
+  } else {
+    document.documentElement.classList.add("dark");
+  }
+  window.localStorage.setItem("theme", theme);
+</script>

src/pages/index.astro

@@ -7,7 +7,7 @@ import { TagList } from "@src/components/Tag/TagList"
 <Layout title="LinkHub">
 	<section class="min-h-[60vh] flex flex-col justify-center">
 		<h1 class="text-5xl md:text-7xl font-bold  text-center my-4">LinkHub</h1>
-		<p class="text-xl text-center mb-6 text-pretty text-neutral-200">
+		<p class="text-xl text-center mb-6 text-pretty text-neutral-200 dark:text-neutral-600">
 			Encuentra las mejores herramientas de desarrollo
 		</p>
 		<SearcherQuery client:load />

tailwind.config.mjs

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	darkMode: "class",
 	theme: {
 		extend: {