Merge pull request #43 from xandemon/showcase/multiThemeSupport

Multi theme support in showcase
xandemon · Jan 21, 2025 · f07fcad · f07fcad
2 parents 2976d5e + 1e2bbdf
commit f07fcad
Show file tree

Hide file tree

Showing 18 changed files with 175 additions and 60 deletions.
diff --git a/showcase/assets/hero-image.png → showcase/assets/hero-image-dark.png b/showcase/assets/hero-image.png → showcase/assets/hero-image-dark.png
diff --git a/showcase/assets/hero-image-light.png b/showcase/assets/hero-image-light.png
diff --git a/showcase/src/components/FeatureSection.astro b/showcase/src/components/FeatureSection.astro
@@ -39,17 +39,19 @@ const features = [
 <div class="grid grid-cols-3 gap-4">
   {
     features.map((feature) => (
-      <div class="flex flex-col gap-3 bg-gradient-to-br from-zinc-800 to-[#27272a77] p-5 rounded-xl">
-        <div class="p-3 bg-zinc-900 rounded-lg w-fit text-2xl text-sky-500">
+      <div class="flex flex-col gap-3 bg-gradient-to-br from-zinc-200/75 to-zinc-200 dark:from-zinc-800 dark:to-[#27272a77] p-5 rounded-xl">
+        <div class="p-3 bg-white dark:bg-zinc-900 rounded-lg w-fit text-2xl text-sky-500 pointer-events-none">
           {feature.title === "Highly Optimized" && "⚡"}
           {feature.title === "Customizable" && "🎨"}
           {feature.title === "Perfectly Scalable" && "🚀"}
           {feature.title === "Consistent Icons" && "🎯"}
           {feature.title === "Various Variants" && "🌗"}
           {feature.title === "Free & Open-Source" && "⭐"}
         </div>
-        <h3 class="text-lg font-semibold">{feature.title}</h3>
-        <p class=" opacity-80">{feature.desc}</p>
+        <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+          {feature.title}
+        </h3>
+        <p class="text-zinc-700 dark:text-zinc-400">{feature.desc}</p>
       </div>
     ))
   }

diff --git a/showcase/src/components/HeroSection.astro b/showcase/src/components/HeroSection.astro
@@ -7,18 +7,22 @@ import { publicBaseUrl } from "@/config";
 
 <div class="flex items-center justify-between gap-4 w-full py-4">
   <div class="flex flex-col gap-4">
-    <Badge className="tracking-widest">🚀 v5.2.4</Badge>
-    <p class="text-5xl font-bold leading-tight">
+    <Badge className="tracking-widest pointer-events-none">🚀 v5.2.4</Badge>
+    <p
+      class="text-5xl font-bold leading-tight text-zinc-900 dark:text-zinc-100"
+    >
       <span class="text-sky-600">Ready-to-use</span>
       <br />
       customizable tech icons
     </p>
-    <p class="text-xl text-zinc-500 font-medium opacity-80">
+    <p class="text-xl text-zinc-600 dark:text-zinc-3000 font-medium">
       No more searching for "<em>transparent</em>" PNGs and SVGs.
     </p>
     <div class="flex items-center gap-3 pt-4">
       <a href={`${publicBaseUrl}/icons/All`}>
-        <Button className="px-5">Browse all icons</Button>
+        <Button className="px-5 bg-sky-500 text-zinc-100 hover:bg-sky-500/90"
+          >Browse all icons</Button
+        >
       </a>
       <a href={`${publicBaseUrl}/docs`}>
         <Button variant="secondary" className="px-5"> Read Docs </Button>
@@ -35,9 +39,16 @@ import { publicBaseUrl } from "@/config";
     </div>
   </div>
 
-  <img
-    src={`${publicBaseUrl}/hero-image.png`}
-    class="rounded-lg w-full h-[350px] max-w-[45%] object-cover shadow-lg shadow-zinc-950"
-    alt="Developer Icons Hero Image"
-  />
+  <>
+    <img
+      src={`${publicBaseUrl}/hero-image-light.png`}
+      class="dark:hidden rounded-lg w-full h-[350px] max-w-[45%] object-cover shadow-lg shadow-zinc-300 dark:shadow-zinc-950"
+      alt="Developer Icons Hero Image"
+    />
+    <img
+      src={`${publicBaseUrl}/hero-image-dark.png`}
+      class="hidden dark:block rounded-lg w-full h-[350px] max-w-[45%] object-cover shadow-lg shadow-zinc-300 dark:shadow-zinc-950"
+      alt="Developer Icons Hero Image"
+    />
+  </>
 </div>
diff --git a/showcase/src/components/Navbar.astro b/showcase/src/components/Navbar.astro
@@ -1,7 +1,8 @@
 ---
-import { GitHubLight, NPM } from "developer-icons";
-import { publicBaseUrl } from "@/config";
+import { GitHubDark, GitHubLight, NPM } from "developer-icons";
 import { DisclaimerAlert } from "./disclaimerAlert";
+import { ThemeToggle } from "./ui/themeToggle";
+import { publicBaseUrl } from "@/config";
 import { cn } from "@/lib/utils";
 
 const url = Astro.url;
@@ -20,28 +21,33 @@ const matchSamePage = (href: string) => {
 ---
 
 <div
-  class="navbar flex items-center justify-between py-3 px-8 bg-zinc-900 sticky top-0"
+  class="navbar flex items-center justify-between py-3 px-8 bg-zinc-100 dark:bg-zinc-900 sticky top-0"
 >
   <a href={publicBaseUrl} class="flex items-center gap-2">
     <img
       src={`${publicBaseUrl}/favicon.svg`}
       width="30"
       height="30"
       alt="Developer Icons Logo"
+      class="rounded"
     />
-    <span class="font-semibold text-lg">Developer Icons</span>
+    <span class="font-semibold text-lg text-zinc-900 dark:text-zinc-100"
+      >Developer Icons</span
+    >
   </a>
   <nav class="flex items-center justify-end gap-6 font-medium">
     <DisclaimerAlert client:load url={url} />
 
-    <span class="w-[1px] h-4 bg-zinc-700"></span>
+    <ThemeToggle client:load />
+
+    <span class="w-[1px] h-4 bg-zinc-300 dark:bg-zinc-700"></span>
 
     {
       navLinks.map((link, index) => (
         <a
           href={publicBaseUrl + link.href}
           class={cn(
-            "hover:text-sky-200",
+            "hover:text-sky-800 dark:hover:text-sky-200",
             matchSamePage(link.href) && "text-sky-500"
           )}
         >
@@ -50,15 +56,16 @@ const matchSamePage = (href: string) => {
       ))
     }
 
-    <span class="w-[1px] h-4 bg-zinc-700"></span>
+    <span class="w-[1px] h-4 bg-zinc-300 dark:bg-zinc-700"></span>
 
     <a
       href="https://github.com/xandemon/developer-icons"
       target="_blank"
       rel="noopener noreferrer"
     >
-      <GitHubLight size={20} className="github" /></a
-    >
+      <GitHubLight size={20} className="hidden dark:inline-block" />
+      <GitHubDark size={20} className="inline-block dark:hidden" />
+    </a>
     <a
       href="https://www.npmjs.com/package/developer-icons"
       target="_blank"

diff --git a/showcase/src/components/disclaimerAlert.tsx b/showcase/src/components/disclaimerAlert.tsx
@@ -39,19 +39,19 @@ export const DisclaimerAlert = ({ url }: { url: URL }) => {
       open={showDisclaimer}
       onOpenChange={() => setShowDisclaimer((prev) => !prev)}
     >
-      <AlertDialogTrigger className="px-4 py-2 text-sm font-medium text-white bg-zinc-800/50 hover:bg-zinc-800/100 rounded-lg transition-colors">
+      <AlertDialogTrigger className="px-4 py-2 text-sm font-medium text-zinc-900 dark:text-white bg-zinc-300/50 dark:bg-zinc-800/50 hover:bg-zinc-300/100 dark:hover:bg-zinc-800/10 rounded-lg transition-colors">
         Disclaimer
       </AlertDialogTrigger>
-      <AlertDialogContent className="max-w-3xl bg-zinc-900 text-white border border-zinc-800">
+      <AlertDialogContent className="max-w-3xl bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-white border border-zinc-200 dark:border-zinc-800">
         <AlertDialogHeader>
           <AlertDialogTitle asChild>
-            <span className="flex items-center gap-2 text-xl font-semibold text-amber-400">
+            <span className="flex items-center gap-2 text-xl font-semibold text-amber-600 dark:text-amber-400">
               <AlertTriangle className="h-5 w-5" />
               <h2>Disclaimer</h2>
             </span>
           </AlertDialogTitle>
         </AlertDialogHeader>
-        <AlertDialogDescription className="space-y-4 text-sm text-zinc-300">
+        <AlertDialogDescription className="space-y-4 text-sm text-zinc-700 dark:text-zinc-300">
           <p>
             All trademarks, logos, and brand identities displayed here remain
             the intellectual property of their respective owners. The icons
@@ -76,15 +76,15 @@ export const DisclaimerAlert = ({ url }: { url: URL }) => {
               collection
             </li>
           </ul>
-          <div className="pt-4 border-t border-zinc-800">
-            <p className="text-sm text-zinc-400">
+          <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800">
+            <p className="text-sm text-zinc-600 dark:text-zinc-400">
               For trademark owners: If you wish to have your intellectual
               property removed from this collection, please submit a request
               through our{" "}
               <a
                 href="https://github.com/xandemon/developer-icons/issues"
                 target="_blank"
-                className="text-blue-400 hover:text-blue-300 transition-colors"
+                className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
               >
                 GitHub repository's issue tracker
               </a>
@@ -94,7 +94,12 @@ export const DisclaimerAlert = ({ url }: { url: URL }) => {
         </AlertDialogDescription>
         <AlertDialogFooter>
           <AlertDialogAction asChild>
-            <Button onClick={onDisclaimerUnderstand}>I Understand</Button>
+            <Button
+              className="bg-sky-500 text-zinc-100 hover:bg-sky-500/90"
+              onClick={onDisclaimerUnderstand}
+            >
+              I Understand
+            </Button>
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

diff --git a/showcase/src/components/iconsList.tsx b/showcase/src/components/iconsList.tsx
@@ -22,7 +22,7 @@ export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => {
 
   return (
     <section className="relative w-full flex flex-col h-full max-h-full overflow-scroll">
-      <div className="sticky top-0 bg-zinc-900 pb-3">
+      <div className="sticky top-0 bg-zinc-100 dark:bg-zinc-900 pb-3">
         <div className="relative top-0 w-full">
           <SearchIcon
             className="absolute top-1/2 left-3 -translate-y-1/2"
@@ -31,13 +31,13 @@ export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => {
           <input
             type="text"
             placeholder="Search developer icons"
-            className="w-full p-2 px-5 pl-10 rounded-xl bg-transparent border border-zinc-800 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
+            className="w-full p-2 px-5 pl-10 rounded-xl bg-transparent border border-zinc-200 dark:border-zinc-800 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-400 dark:focus:border-zinc-600"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.currentTarget.value)}
           />
           {!!searchQuery && (
             <X
-              className="absolute top-1/2 right-3 -translate-y-1/2 text-zinc-500 hover:text-zinc-400 cursor-pointer"
+              className="absolute top-1/2 right-3 -translate-y-1/2 text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-400 cursor-pointer"
               size={16}
               onClick={() => setSearchQuery("")}
             />

diff --git a/showcase/src/components/ui/badge.tsx b/showcase/src/components/ui/badge.tsx
@@ -9,9 +9,9 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-zinc-300 text-zinc-800 hover:bg-zinc-300/80 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-800/80 pl-3 pr-5",
+          "border-transparent bg-zinc-200 text-zinc-800 hover:bg-zinc-300/80 dark:hover:bg-zinc-300/80 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-800/80 pl-3 pr-5",
         secondary:
-          "border-zinc-800 bg-zinc-800 bg-opacity-25 text-zinc-50 hover:bg-zinc-800/80 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800/80",
+          "border-zinc-200 dark:border-zinc-800 bg-zinc-200 dark:bg-zinc-800 bg-opacity-25 text-zinc-950 dark:text-zinc-50 hover:bg-zinc-200/80 dark:hover:bg-zinc-800/80",
         destructive:
           "border-transparent bg-red-900 text-zinc-50 hover:bg-red-900/80 dark:bg-red-500 dark:text-zinc-50 dark:hover:bg-red-500/80",
         outline: "text-zinc-50 dark:text-zinc-950",

diff --git a/showcase/src/components/ui/button.tsx b/showcase/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         outline:
           "border border-zinc-200 text-zinc-50 bg-transparent hover:bg-zinc-200 hover:text-zinc-50 dark:border-zinc-800 dark:bg-transparent dark:hover:bg-zinc-800 dark:hover:text-zinc-400",
         secondary:
-          "bg-zinc-200 text-zinc-200 hover:bg-zinc-200/80 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80",
+          "bg-zinc-200 text-zinc-500 hover:bg-zinc-200/80 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80",
         ghost:
           "hover:bg-zinc-800 hover:text-zinc-50 dark:hover:bg-zinc-100 dark:hover:text-zinc-900",
         link: "text-zinc-50 underline-offset-4 hover:underline dark:text-zinc-900",

diff --git a/showcase/src/components/ui/iconCard.tsx b/showcase/src/components/ui/iconCard.tsx
@@ -54,10 +54,10 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
   }, [activeTooltip, showCopied]);
 
   return (
-    <div className="w-full max-w-[300px] h-44 border border-zinc-800 rounded-xl flex flex-col items-center justify-center gap-2 from-zinc-950/25 to-zinc-950/50 hover:bg-gradient-to-br group">
+    <div className="w-full max-w-[300px] h-44 border border-zinc-200 dark:border-zinc-800 rounded-xl flex flex-col items-center justify-center gap-2 from-zinc-200/50 dark:from-zinc-950/25 to-zinc-200/75 dark:to-zinc-950/50 hover:bg-gradient-to-br group">
       <DynamicIcon
         size={50}
-        className="group-hover:drop-shadow-[0_4px_4px_rgba(256,256,256,0.1)]"
+        className="group-hover:drop-shadow-[0_4px_4px_rgba(0,0,0,0.1)] dark:group-hover:drop-shadow-[0_4px_4px_rgba(256,256,256,0.1)]"
       />
       <p className="font-semibold">{icon.name}</p>
       <div className="flex items-center gap-1 flex-wrap ">
@@ -68,13 +68,16 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
               .replace("DevOps & AI/ML", "DevOps")
               .replaceAll(" ", "-")}`}
           >
-            <Badge variant={"secondary"} className="font-normal text-xs">
+            <Badge
+              variant={"secondary"}
+              className="font-normal text-xs group-hover:bg-zinc-300"
+            >
               {category}
             </Badge>
           </a>
         ))}
       </div>
-      <div className="flex items-center justify-center gap-2 text-zinc-400">
+      <div className="flex items-center justify-center gap-2 text-zinc-600 dark:text-zinc-400">
         <Popover
           open={showCopied}
           onOpenChange={(value) => setShowCopied(value)}
@@ -83,7 +86,7 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
             trigger={
               <PopoverTrigger asChild>
                 <span
-                  className="p-1 flex flex-center cursor-pointer hover:text-yellow-300"
+                  className="p-1 flex flex-center cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-300"
                   onClick={() => copyComponent(icon.name)}
                 >
                   <Copy size={18} />
@@ -98,7 +101,7 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
           <PopoverContent className="max-w-fit rounded-full py-2 text-sm opacity-70">
             <span className="flex items-center gap-1 w-full">
               Copied{" "}
-              <strong className="text-sky-300">{`<${generateIconCompName(
+              <strong className="text-sky-500 dark:text-sky-300">{`<${generateIconCompName(
                 icon.name
               )} />`}</strong>
               🎉
@@ -109,7 +112,7 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
           <ActionTooltip
             trigger={
               <span
-                className="p-1 flex flex-center cursor-pointer hover:text-blue-300"
+                className="p-1 flex flex-center cursor-pointer hover:text-blue-500 dark:hover:text-blue-300"
                 onClick={() => downloadIcon(icon.path)}
               >
                 <Download size={18} />
@@ -128,7 +131,7 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
               target="_blank"
               rel="noreferrer"
               className={cn(
-                "p-1 flex flex-center cursor-pointer hover:text-rose-300",
+                "p-1 flex flex-center cursor-pointer hover:text-rose-500 dark:hover:text-rose-300",
                 { "pointer-events-none": showCopied }
               )}
             >

diff --git a/showcase/src/components/ui/installCmd.tsx b/showcase/src/components/ui/installCmd.tsx
@@ -6,12 +6,12 @@ const copyInstallCmd = () => {
 
 const InstallCmd = () => {
   return (
-    <span className="flex items-center gap-3 border border-zinc-800 rounded-lg px-4 py-2 text-zinc-400">
+    <span className="flex items-center gap-3 border border-zinc-600 dark:border-zinc-500 rounded-lg px-4 py-2 text-zinc-600 dark:text-zinc-400">
       <Terminal size={18} />
       <pre>npm i developer-icons</pre>
       <Copy
         size={18}
-        className="cursor-pointer hover:text-zinc-300"
+        className="cursor-pointer hover:opacity-80"
         onClick={copyInstallCmd}
       />
     </span>

diff --git a/showcase/src/components/ui/loader.tsx b/showcase/src/components/ui/loader.tsx
@@ -16,7 +16,7 @@ export const Loader = ({
     return (
       <div
         className={cn(
-          `w-5 h-5 border-[3px] border-zinc-800 border-t-zinc-600 rounded-full animate-spin`,
+          `w-5 h-5 border-[3px] border-zinc-200 dark:border-zinc-800 border-t-zinc-400 dark:border-t-zinc-600 rounded-full animate-spin`,
           { [className]: !!className }
         )}
         style={style}

diff --git a/showcase/src/components/ui/themeToggle.tsx b/showcase/src/components/ui/themeToggle.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { Button } from "./button";
+import { Moon, Sun } from "lucide-react";
+
+export const ThemeToggle = () => {
+  const [theme, setTheme] = useState<"light" | "dark">();
+  console.log(theme);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    document.documentElement.classList.toggle("dark");
+    localStorage.setItem("theme", newTheme);
+  };
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    setTheme(savedTheme as "light" | "dark");
+  }, []);
+
+  return (
+    <Button
+      size={"icon"}
+      variant={"outline"}
+      className="border-none rounded-full"
+      onClick={toggleTheme}
+    >
+      {theme === "light" ? (
+        <Moon size={20} className="text-gray-900" />
+      ) : (
+        <Sun size={20} className="text-yellow-400" />
+      )}
+    </Button>
+  );
+};