style: 💄 dark theme in sidebar

package.json

@@ -19,6 +19,7 @@
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
+    "tailwind-merge": "^2.2.2",
     "tailwind-variants": "^0.2.1"
   },
   "devDependencies": {

src/components/Button.tsx

@@ -10,7 +10,8 @@ const button = tv({
   variants: {
     variant: {
       primary: "bg-violet-600 text-white hover:bg-violet-700",
-      ghost: "rounded-md px-2 hover:bg-zinc-50 shadow-none",
+      ghost:
+        "rounded-md px-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 shadow-none text-zinc-500 dark:text-zinc-400",
       outline: "border border-zinc-300 text-zinc-700 hover:bg-zinc-50",
     },
   },

src/components/Input.tsx

@@ -1,4 +1,5 @@
 import { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
 
 interface InputPrefixProps extends ComponentProps<"div"> {}
 
@@ -11,7 +12,7 @@ interface InputControlProps extends ComponentProps<"input"> {}
 export function Control(props: InputControlProps) {
   return (
     <input
-      className="flex-1 border-0 bg-transparent p-0 focus:outline-none text-zinc-900 placeholder-zinc-600"
+      className="flex-1 border-0 bg-transparent p-0 focus:outline-none text-zinc-900 placeholder-zinc-600 dark:placeholder-zinc-400 dark:text-zinc-100"
       {...props}
     />
   );
@@ -21,7 +22,12 @@ type InputRootProps = ComponentProps<"div">;
 export function Root(props: InputRootProps) {
   return (
     <div
-      className="flex w-full items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 shadow-sm focus-within:border-violet-300 focus-within:ring-4 focus-within:ring-violet-100"
+      className={twMerge(
+        "flex w-full items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 shadow-sm",
+        "focus-within:border-violet-300 focus-within:ring-4 focus-within:ring-violet-100",
+        "dark:border-zinc-700 dark:bg-zinc-800 dark:focus-within:border-violet-500 dark:focus-within:ring-violet-500/20",
+        props.className
+      )}
       {...props}
     ></div>
   );

src/components/Sidebar/Logo.tsx

@@ -1,6 +1,6 @@
 export function Logo() {
   return (
-    <strong className="flex mx-1 items-center gap-2 text-xl font-semibold text-zinc-900">
+    <strong className="flex mx-1 items-center gap-2 text-xl font-semibold text-zinc-900 dark:text-zinc-100">
       <svg
         width={38}
         height={38}

src/components/Sidebar/NavItem.tsx

@@ -10,13 +10,13 @@ export function NavItem({ title, icon: Icon }: NavItemProps) {
   return (
     <a
       href=""
-      className="group flex items-center gap-3 rounded px-3 py-2 hover:bg-violet-50"
+      className="group flex items-center gap-3 rounded px-3 py-2 hover:bg-violet-50 dark:hover:bg-zinc-800"
     >
       <Icon className="h-5 w-5 text-zinc-500" />
-      <span className="font-medium text-zinc-700 group-hover:text-violet-500">
+      <span className="font-medium text-zinc-700 group-hover:text-violet-500 dark:text-zinc-100 dark:group-hover:text-violet-300">
         {title}
       </span>
-      <ChevronDown className="ml-auto h-5 w-5 text-zinc-400 group-hover:text-violet-400" />
+      <ChevronDown className="ml-auto h-5 w-5 text-zinc-400 group-hover:text-violet-400 dark:text-zinc-600" />
     </a>
   );
 }

src/components/Sidebar/Profile.tsx

@@ -11,10 +11,10 @@ export function Profile() {
           alt="Juliano Alves"
         />
         <div className="flex flex-col truncate">
-          <span className="text-sm font-semibold text-zinc-700">
+          <span className="text-sm font-semibold text-zinc-700 dark:text-zinc-100">
             Juliano Alves
           </span>
-          <span className="truncate text-sm text-zinc-500">
+          <span className="truncate text-sm text-zinc-500 dark:text-zinc-400">
             contato@julianoalves.me
           </span>
         </div>

src/components/Sidebar/UserSpaceWidget.tsx

@@ -5,28 +5,28 @@ export function UserSpaceWidget() {
   return (
     <>
       <div className="mt-auto flex flex-col gap-6">
-        <div className="flex flex-col gap-4 rounded-lg bg-violet-50 px-4 py-5">
+        <div className="flex flex-col gap-4 rounded-lg bg-violet-50 px-4 py-5 dark:bg-zinc-800">
           <div className="space-y-1">
-            <span className="text-sm/5 font-medium leading-5 text-violet-700">
+            <span className="text-sm/5 font-medium leading-5 text-violet-700 dark:text-zinc-100">
               Used space
             </span>
-            <p className="text-sm/5 text-violet-500">
+            <p className="text-sm/5 text-violet-500 dark:text-zinc-400">
               Your team has used 80% of your available space. Need more?
             </p>
           </div>
-          <div className="h-2 rounded-full bg-violet-100">
-            <div className="h-2 w-4/5 rounded-full bg-violet-600"></div>
+          <div className="h-2 rounded-full bg-violet-100 dark:bg-zinc-600">
+            <div className="h-2 w-4/5 rounded-full bg-violet-600 dark:bg-violet-400"></div>
           </div>
           <div className="space-x-3">
             <button
               type="button"
-              className="text-sm font-medium text-violet-500 hover:text-violet-700"
+              className="text-sm font-medium text-violet-500 hover:text-violet-700 dark:text-violet-300 dark:hover:text-violet-200"
             >
               Dismiss
             </button>
             <button
               type="button"
-              className="text-sm font-medium text-violet-700 hover:text-violet-900"
+              className="text-sm font-medium text-violet-700 hover:text-violet-900 dark:text-zinc-300 dark:hover:text-violet-100"
             >
               Upgrade plan
             </button>

src/components/Sidebar/index.tsx

@@ -22,7 +22,7 @@ import { Button } from "../Button";
 
 export function Sidebar() {
   return (
-    <Collapsible.Root className="fixed left-0 right-0 top-0 z-20 flex flex-col gap-6 border-b border-zinc-200 bg-white p-4 data-[state=open]:bottom-0 lg:right-auto  lg:w-80 lg:border-r lg:px-5 lg:py-8 lg:data-[state=closed]:bottom-0">
+    <Collapsible.Root className="fixed left-0 right-0 top-0 z-20 flex flex-col gap-6 border-b border-zinc-200 bg-white dark:bg-zinc-900 dark:border-zinc-800 p-4 data-[state=open]:bottom-0 lg:right-auto  lg:w-80 lg:border-r lg:px-5 lg:py-8 lg:data-[state=closed]:bottom-0">
       <div className="flex items-center justify-between">
         <Logo />
         <Collapsible.Trigger asChild className="lg:hidden">