🎨 Add light/dark theme + custom theme switcher & update UI components with new theme mode

Author: pheralb

website/app/components/card.tsx

@@ -24,14 +24,17 @@ const Card = (props: iCard) => {
   };
 
   return (
-    <div className="group flex flex-col items-center justify-center space-y-1 rounded-lg border border-zinc-800 px-4 pb-2 pt-4 transition-colors hover:bg-zinc-800/50">
+    <div className="group flex flex-col items-center justify-center space-y-1 rounded-lg border border-zinc-200 px-4 pb-2 pt-4 hover:bg-zinc-200/50 dark:border-zinc-800 dark:hover:bg-zinc-800/50">
       <props.icon width={props.iconSize} height={props.iconSize} />
-      <p className="text-sm tracking-tight text-white">{props.name}</p>
+      <p className="text-sm tracking-tight text-black dark:text-white">
+        {props.name}
+      </p>
       <div className="flex items-center space-x-1">
         <Button
           variant="ghost"
           size="icon"
           onClick={handleCopy}
+          className="transition-none"
           title="Copy to clipboard"
         >
           <CopyIcon width={17} height={17} strokeWidth={1.5} />

website/app/components/footer.tsx

@@ -4,37 +4,37 @@ import { containerClasses } from "@/ui/container";
 
 const Footer = () => {
   return (
-    <footer className="animate-in slide-in-from-bottom-3 fade-in-30 fixed bottom-0 w-full bg-zinc-900/80 py-4 text-sm text-zinc-400 backdrop-blur-sm duration-500">
+    <footer className="animate-in slide-in-from-bottom-3 fade-in-30 fixed bottom-0 w-full bg-zinc-50 py-4 text-sm text-zinc-600 backdrop-blur-sm dark:bg-zinc-900/80 dark:text-zinc-400">
       <div
         className={cn(containerClasses, "flex items-center justify-between")}
       >
         <ExternalLink
           title="Miguel Solorio"
           href="https://www.miguelsolorio.com/"
-          className="group flex items-center space-x-2 transition-colors hover:text-white"
+          className="group flex items-center space-x-2 transition-colors hover:text-black dark:hover:text-white"
         >
           <span className="hidden md:block">Icons crafted by </span>
           <img
-            className="h-6 w-6 rounded-full transition-shadow group-hover:ring-2 group-hover:ring-react-symbol-pink"
+            className="group-hover:ring-react-symbol-pink h-6 w-6 rounded-full transition-shadow group-hover:ring-2"
             src="https://avatars.githubusercontent.com/u/35271042?v=4"
             alt="Miguel Solorio"
           />
-          <span className="underline decoration-zinc-500 decoration-wavy underline-offset-[4px] group-hover:decoration-react-symbol-pink">
+          <span className="group-hover:decoration-react-symbol-pink underline decoration-zinc-500 decoration-wavy underline-offset-[4px]">
             Miguel Solorio
           </span>
         </ExternalLink>
         <ExternalLink
           title="Pablo Hernández"
           href="https://pheralb.dev"
-          className="group flex items-center space-x-2 transition-colors hover:text-white"
+          className="group flex items-center space-x-2 transition-colors hover:text-black dark:hover:text-white"
         >
           <span className="hidden md:block">Website by</span>
           <img
-            className="h-6 w-6 rounded-full transition-shadow group-hover:ring-2 group-hover:ring-react-symbol-aqua"
+            className="group-hover:ring-react-symbol-aqua h-6 w-6 rounded-full transition-shadow group-hover:ring-2"
             src="https://avatars.githubusercontent.com/u/62877300?v=4"
             alt="Pablo Hernández"
           />
-          <span className="underline decoration-zinc-500 decoration-wavy underline-offset-[4px] group-hover:decoration-react-symbol-aqua">
+          <span className="group-hover:decoration-react-symbol-aqua underline decoration-zinc-500 decoration-wavy underline-offset-[4px]">
             Pablo Hernández
           </span>
         </ExternalLink>

website/app/components/getCode/index.tsx

@@ -74,6 +74,7 @@ const GetCode = (props: iGetCode) => {
         variant="ghost"
         size="icon"
         onClick={() => handleGetCode()}
+        className="transition-none"
         title="Get React Component"
       >
         <CodeIcon width={17} height={17} strokeWidth={1.5} />
@@ -95,11 +96,11 @@ const GetCode = (props: iGetCode) => {
             </div>
           ) : fileContent ? (
             <div className="my-1 flex flex-col space-y-1 overflow-hidden">
-              <div className="mr-1 flex items-center justify-end space-x-2 font-mono text-[12px] text-zinc-400">
+              <div className="mr-1 flex items-center justify-end space-x-2 font-mono text-[12px] text-zinc-600 dark:text-zinc-400">
                 <Reactjs width={16} height={16} />
                 <span>{camelCase(props.componentName)}.tsx</span>
               </div>
-              <div className="max-h-80 rounded-lg border border-zinc-800 p-3 font-mono text-sm hover:overflow-auto">
+              <div className="max-h-80 rounded-lg border border-zinc-200 p-3 font-mono text-sm hover:overflow-auto dark:border-zinc-800">
                 <pre
                   className="select-all"
                   dangerouslySetInnerHTML={{ __html: highlight(fileContent) }}
@@ -109,7 +110,7 @@ const GetCode = (props: iGetCode) => {
           ) : (
             <div className="my-4 flex flex-col items-center justify-center gap-2">
               <AlertIcon
-                height={25}
+                height={30}
                 className="flex items-center justify-center"
               />
               <p className="text-sm text-zinc-400">

website/app/components/header.tsx

@@ -29,6 +29,10 @@ const linkClasses = buttonVariants({
   className: "rounded-3xl w-auto group",
 });
 
+const arrowClasses = cn(
+  "text-zinc-400 transition-transform group-hover:translate-x-[0.1rem] group-hover:text-black dark:group-hover:text-white",
+);
+
 interface iHeaderProps {
   npmVersion: string;
 }
@@ -38,7 +42,7 @@ const Header = (props: iHeaderProps) => {
     <section
       className={cn(
         "pb-4 pt-8 md:py-10",
-        "flex flex-col space-y-6",
+        "flex flex-col space-y-5",
         containerClasses,
       )}
     >
@@ -51,17 +55,17 @@ const Header = (props: iHeaderProps) => {
           >
             React-Symbols
           </Link>
-          <div className="flex flex-col items-start space-x-0 space-y-2 text-sm text-zinc-400 md:flex-row md:space-x-2 md:space-y-0 md:text-[16px]">
+          <div className="flex flex-col items-start space-x-0 space-y-2 text-sm text-zinc-600 md:flex-row md:space-x-2 md:space-y-0 md:text-[16px] dark:text-zinc-400">
             <span>
               Beautifully File & Folder Icons for your React projects.
             </span>
           </div>
         </div>
       </div>
-      <div className="flex w-full flex-col items-center space-x-0 space-y-4 md:w-auto md:flex-row md:space-x-4 md:space-y-0">
+      <div className="mb-1 flex w-full flex-col items-center space-x-0 space-y-4 md:w-auto md:flex-row md:space-x-4 md:space-y-0">
         <InstallCommand className="w-full md:w-auto" />
         <Divider className="hidden md:block" />
-        <nav className="container flex items-center space-x-2 overflow-y-auto md:w-auto">
+        <nav className="container flex items-center space-x-2 overflow-y-auto pb-1 md:w-auto">
           <ExternalLink
             title="NPM Package"
             href="https://www.npmjs.com/package/@react-symbols/icons"
@@ -73,7 +77,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.1rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
           <ExternalLink
@@ -87,7 +91,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
           <ExternalLink
@@ -101,7 +105,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
           <ExternalLink
@@ -115,7 +119,7 @@ const Header = (props: iHeaderProps) => {
               height={13}
               width={13}
               strokeWidth={2}
-              className="text-zinc-400 transition-transform duration-200 group-hover:translate-x-[0.07rem] group-hover:text-white"
+              className={arrowClasses}
             />
           </ExternalLink>
         </nav>

website/app/components/installCommand.tsx

@@ -77,8 +77,9 @@ const InstallCommand = (props: iInstallCommandProps) => {
       className={cn(
         buttonVariants({
           variant: "outline",
+          className: "active:scale-100",
         }),
-        "select-all space-x-3 rounded-3xl text-zinc-400 transition-colors hover:bg-transparent hover:text-white dark:hover:bg-transparent",
+        "select-all space-x-3 rounded-3xl text-zinc-600 transition-colors hover:bg-transparent dark:text-zinc-400 dark:hover:bg-transparent dark:hover:text-white",
         props.className,
       )}
     >

website/app/components/loading.tsx

@@ -8,7 +8,7 @@ interface iLoading {
 const Loading = (props: iLoading) => (
   <div
     className={cn(
-      "animate-in animate-out fade-in-40 flex flex-col space-y-2 duration-1000",
+      "animate-in animate-out fade-in-40 flex flex-col space-y-2 ",
       props.className,
     )}
   >

website/app/components/navbar/index.tsx

@@ -26,7 +26,7 @@ const NavIconsRoutes = [
 const Navbar = () => {
   const location = useLocation();
   return (
-    <nav className="sticky -top-1 z-50 border-y border-zinc-800 bg-zinc-900/80 py-[10px] backdrop-blur-sm">
+    <nav className="sticky -top-1 z-40 border-y border-zinc-200 bg-zinc-100/80 py-[10px] backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-900/80">
       <div
         className={cn(
           containerClasses,
@@ -46,7 +46,7 @@ const Navbar = () => {
                   ? `Search ${totalFolders} folder icons...`
                   : `Search ${totalLibraryIcons} icons...`
             }
-            className="rounded-none border-b border-l-0 border-r-0 border-t-0 pl-[34px] text-[16px] placeholder:text-[16px] focus:border-none focus:ring-0 md:border-none md:pl-[38px] dark:focus:border-none"
+            className="rounded-none border-b border-l-0 border-r-0 border-t-0 pl-[34px] text-[16px] shadow-none placeholder:text-[16px] focus:border-none focus:ring-0 focus-visible:ring-0 md:border-none md:pl-[38px] dark:focus:border-none dark:focus:ring-0"
           />
         </div>
         <Divider className="hidden md:block" />
@@ -61,11 +61,12 @@ const Navbar = () => {
               className={cn(
                 buttonVariants({
                   variant: "outline",
+                  className: "shadow-none",
                 }),
                 "w-full md:w-auto",
                 location.pathname === link.href
-                  ? "border-zinc-400 text-white"
-                  : "border-none bg-transparent text-zinc-400 hover:text-white dark:bg-transparent",
+                  ? "border-zinc-200 text-black dark:border-zinc-800 dark:text-white"
+                  : "border-none bg-transparent text-zinc-600 hover:text-black dark:bg-transparent dark:text-zinc-400 dark:hover:text-white",
               )}
             >
               {location.pathname === link.href ? (
@@ -78,7 +79,7 @@ const Navbar = () => {
           ))}
         </div>
         <Divider className="hidden md:block" />
-        <div className="flex w-full flex-col space-y-1 pb-1 text-zinc-400 transition-colors hover:text-white md:w-56 md:pb-0">
+        <div className="flex w-full flex-col space-y-1 pb-1 text-zinc-600 hover:text-black md:w-56 md:pb-0 dark:text-zinc-400 dark:hover:text-white">
           <p className="select-none text-xs font-medium uppercase">Size</p>
           <IconSize />
         </div>

website/app/components/settings.tsx

@@ -0,0 +1,11 @@
+import ThemeSwitcher from "./themeSwitcher";
+
+const Settings = () => {
+  return (
+    <nav className="fixed right-3 top-2 z-50 md:top-3">
+      <ThemeSwitcher />
+    </nav>
+  );
+};
+
+export default Settings;

website/app/components/themeSwitcher.tsx

@@ -0,0 +1,41 @@
+import { type Theme, useTheme } from "@/theme/themeProvider";
+import { MoonIcon, SunIcon } from "@/ui/icons/feather";
+import { cn } from "@/utils";
+
+const ThemeSwitcher = () => {
+  const [theme, setTheme] = useTheme();
+
+  const buttons = [
+    {
+      label: "dark" as const,
+      icon: <MoonIcon width={14} />,
+      active: theme === "dark",
+    },
+    {
+      label: "light" as const,
+      icon: <SunIcon width={14} />,
+      active: theme === "light",
+    },
+  ];
+
+  return (
+    <span className="flex w-fit items-center gap-0.5 overflow-hidden rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-800/80">
+      {buttons.map(({ label, icon, active }) => (
+        <button
+          type="button"
+          title={`Switch to ${label} theme`}
+          key={label}
+          onClick={() => setTheme(() => label as Theme)}
+          className={cn(
+            "flex h-6 w-6 items-center justify-center rounded-none transition-all hover:opacity-50",
+            active && "bg-zinc-200 dark:bg-zinc-900",
+          )}
+        >
+          {icon}
+        </button>
+      ))}
+    </span>
+  );
+};
+
+export default ThemeSwitcher;

website/app/providers/sonner.tsx

@@ -11,8 +11,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            "group toast group-[.toaster]:bg-zinc-900 group-[.toaster]:text-zinc-50 group-[.toaster]:border-zinc-800 group-[.toaster]:shadow-lg",
-          description: "group-[.toaster]:text-zinc-400 font-mono",
+            "group toast group-[.toaster]:bg-zinc-100 dark:group-[.toaster]:bg-zinc-900 group-[.toaster]:text-zinc-950 dark:group-[.toaster]:text-zinc-50 group-[.toaster]:border-zinc-200 dark:group-[.toaster]:border-zinc-800 group-[.toaster]:shadow-lg",
+          description:
+            "group-[.toaster]:text-zinc-600 dark:group-[.toaster]:text-zinc-400 font-mono",
           icon: "group-[.toaster]:mr-3",
         },
       }}