✈️ UPDATE: v1.3.0

src/components/Card.tsx

@@ -14,7 +14,7 @@ const Card = ({ directory }: CardProps) => {
 
   return (
     <div
-      className="relative h-full w-full max-w-sm cursor-pointer rounded-xl bg-white bg-center p-8 pt-12 shadow duration-150 ease-in-out hover:scale-105 lg:min-w-[350px]"
+      className="relative mx-auto h-full w-full max-w-sm cursor-pointer rounded-xl bg-white bg-center p-8 pt-12 shadow duration-150 ease-in-out hover:scale-105 dark:bg-gray-900 lg:min-w-[350px]"
       onClick={onCardClick}
     >
       <div className="flex w-full items-center">
@@ -27,7 +27,7 @@ const Card = ({ directory }: CardProps) => {
             className="absolute -top-4 left-8 self-end rounded-2xl"
           />
         </div>
-        <h2 className="flex w-full items-center gap-2 text-left text-xl font-semibold leading-6 text-neutral-dark">
+        <h2 className="flex w-full items-center gap-2 text-left text-xl font-semibold leading-6 text-neutral-dark dark:text-dark-neutral-light">
           {directory.name}{" "}
           {directory.verified ? (
             <Image src={check} alt="sample icon" height={14} width={14} />
@@ -55,12 +55,12 @@ export function SkeletonCard() {
   return (
     <div
       role="status"
-      className="relative h-[230px] w-full max-w-sm animate-pulse cursor-pointer rounded-xl bg-white bg-center p-8 pt-12 shadow duration-150 ease-in-out hover:scale-105 lg:min-w-[350px]"
+      className="relative h-[230px] w-full max-w-sm animate-pulse cursor-pointer rounded-xl bg-white bg-center p-8 pt-12 shadow duration-150 ease-in-out hover:scale-105 dark:bg-gray-900 lg:min-w-[350px]"
     >
       <div className="flex w-full items-center">
         <div>
           <svg
-            className="absolute -top-4 left-8 h-[50px] w-[50px] self-end rounded-2xl text-gray-400"
+            className="absolute -top-4 left-8 h-[50px] w-[50px] self-end rounded-2xl text-gray-400 dark:text-neutral-light"
             aria-hidden="true"
             fill="currentColor"
             viewBox="0 0 20 20"
@@ -74,18 +74,18 @@ export function SkeletonCard() {
           </svg>
         </div>
         <h2 className="mb-4 flex w-full items-center gap-2 text-left text-xl font-semibold leading-6 text-neutral-dark">
-          <div className="mb-2 h-2.5 w-32 rounded-full bg-gray-200" />
+          <div className="mb-2 h-2.5 w-32 rounded-full bg-gray-200 dark:bg-gray-400" />
         </h2>
       </div>
 
-      <div className="mb-2.5 h-2 rounded-full bg-gray-200" />
-      <div className="mb-2.5 h-2 rounded-full bg-gray-200" />
-      <div className="h-2 rounded-full bg-gray-200" />
+      <div className="mb-2.5 h-2 rounded-full bg-gray-200 dark:bg-gray-400" />
+      <div className="mb-2.5 h-2 rounded-full bg-gray-200 dark:bg-gray-400" />
+      <div className="h-2 rounded-full bg-gray-200 dark:bg-gray-400" />
       <ul className="absolute bottom-8 left-8 flex gap-2 text-xs">
-        <div className="h-2 w-10 rounded-full bg-gray-200" />
-        <div className="h-2 w-10 rounded-full bg-gray-200" />
-        <div className="h-2 w-10 rounded-full bg-gray-200" />{" "}
-        <div className="h-2 w-10 rounded-full bg-gray-200" />
+        <div className="h-2 w-10 rounded-full bg-gray-200 dark:bg-gray-400" />
+        <div className="h-2 w-10 rounded-full bg-gray-200 dark:bg-gray-400" />
+        <div className="h-2 w-10 rounded-full bg-gray-200 dark:bg-gray-400" />{" "}
+        <div className="h-2 w-10 rounded-full bg-gray-200 dark:bg-gray-400" />
       </ul>
     </div>
   );

src/components/DarkModeSwitch.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { TbSun, TbMoon } from "react-icons/tb";
+
+const iconDiv =
+  "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer transition-opacity duration-200";
+
+function DarkModeSwitch() {
+  //Set light theme by default
+  const [theme, setTheme] = useState("theme");
+
+  useEffect(() => {
+    //Set theme on device
+    if (typeof window !== "undefined") {
+      const _theme =
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+          ? "dark"
+          : "light";
+      changeTheme(_theme);
+    }
+  }, [theme]);
+
+  function changeTheme(_theme: string) {
+    //Set theme on the html tag.
+    if (_theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    setTheme(_theme);
+    localStorage.setItem("theme", _theme);
+  }
+
+  return (
+    <div className="relative ml-auto mr-5 h-12 w-12">
+      <div
+        className={`text-black ${iconDiv} ${
+          theme === "dark" ? "z-10 opacity-100" : "z-0 opacity-0"
+        }`}
+        onClick={() => changeTheme("light")}
+      >
+        <TbSun size={28} />
+      </div>
+      <div
+        className={`text-white ${iconDiv} ${
+          theme === "light" ? "z-10 opacity-100" : "z-0 opacity-0"
+        }`}
+        onClick={() => changeTheme("dark")}
+      >
+        <TbMoon size={28} />
+      </div>
+    </div>
+  );
+}
+
+export default DarkModeSwitch;

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import type { NextPage } from "next";
 import { useState } from "react";
 import Card, { SkeletonCard } from "@/components/Card";
+import DarkModeSwitch from "@/components/DarkModeSwitch";
 import Pagination from "@/components/Pagination";
 import Seo from "@/components/Seo";
 import { Directory } from "@/interface";
@@ -22,21 +23,24 @@ const Home: NextPage = () => {
   }
 
   return (
-    <div className="m-0 bg-[#F2F2F2] p-0">
+    <div className="m-0 bg-light-bg p-0 transition-all duration-500 dark:bg-dark-bg ">
       <Seo templateTitle="Home" />
       <header className="min-w-screen w-full bg-gradient-to-r from-purple-900 to-violet-500 md:h-[160px] md:rounded-bl-[100px]">
         <div className="mx-auto flex h-[200px] max-w-screen-2xl flex-col items-center justify-between px-6 md:h-[160px] md:flex-row md:items-center md:rounded-bl-[100px] md:px-10 lg:px-[165px] xl:px-[100px]">
-          <h3 className="mt-6 text-3xl font-bold capitalize text-white md:mt-0">
+          <h3 className="mt-6 text-center text-3xl font-bold capitalize text-white dark:text-black  md:mt-0">
             Web3 Philippines Directory
           </h3>
-          <a
-            href="https://forms.gle/8BUfE2A7NRtqYbm66"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="bg-purple-hearts mb-6 self-end rounded-2xl border-2 px-5 py-3 font-bold text-white hover:opacity-75 md:mb-0 md:self-center"
-          >
-            Submit project
-          </a>
+          <div className="flex">
+            <DarkModeSwitch />
+            <a
+              href="https://forms.gle/8BUfE2A7NRtqYbm66"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-purple-hearts mb-6 self-end rounded-2xl border-2 border-white px-5 py-3 font-bold text-white hover:opacity-75 dark:border-black dark:text-black md:mb-0 md:self-center"
+            >
+              Submit project
+            </a>
+          </div>
         </div>
       </header>
 

tailwind.config.js

@@ -65,8 +65,12 @@ module.exports = {
         "neutral-dark": "#19202D",
         "neutral-light": "#6E8098",
         "neutral-lightest": "#B0BDCF",
+        "dark-neutral-light": "#e6dfd2",
+        "light-bg": "#F2F2F2",
+        "dark-bg": "#0D0D0D",
       },
     },
   },
   plugins: [require("@tailwindcss/line-clamp")],
+  darkMode: "class",
 };