add: menu page dark theme

src/components/listview/MenuItem.tsx

@@ -32,7 +32,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
       />
       <div className="w-full inline-flex flex-col justify-between">
         <div>
-          <div className="text-sm2 font-normal text-black">{food.name}</div>
+          <div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
           <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
             {food.contains}
           </div>
@@ -49,15 +49,15 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 className="inline-flex w-full justify-center items-center gap-2"
               >
                 <PlusIcon />
-                <div className="text-sm2 pt-0.5 font-normal text-black">افزودن</div>
+                <div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
               </button>
             ) : (
               <>
                 <button
                   onClick={() => increment(food.id)}
-                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                 >
-                  <PlusIcon />
+                  <PlusIcon className="text-foreground" />
                 </button>
                 <motion.div
                   key={quantity}
@@ -72,9 +72,9 @@ const MenuItem = ({ food }: MenuItemProps) => {
 
                 <button
                   onClick={() => decrement(food.id)}
-                  className="bg-white hover:bg-white/60 active:bg-white/30 rounded-sm p-2"
+                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                 >
-                  <MinusIcon />
+                  <MinusIcon className="text-foreground" />
                 </button>
               </>
             )}