feat: light mode reactive icons

src/app/boards/components/BoardsList.tsx

@@ -19,7 +19,7 @@ export function BoardsList() {
     <div className="xxl:grid-cols-5 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {data?.map((board) => (
         <Link key={board.publicId} href={`boards/${board.publicId}`}>
-          <div className="align-center bg-light-100 border-light-600 hover:bg-light-200 relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed dark:border-dark-600 dark:bg-dark-100 dark:hover:bg-dark-200">
+          <div className="align-center bg-light-50 border-light-600 hover:bg-light-200 relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed shadow-sm dark:border-dark-600 dark:bg-dark-100 dark:hover:bg-dark-200">
             <div>
               <svg
                 style={{

src/app/components/FeedbackButton.tsx

@@ -1,11 +1,14 @@
 "use client";
 
 import { useState } from "react";
+import { useTheme } from "~/app/providers/theme";
 
 import LottieIcon from "~/app/components/LottieIcon";
-import chatIcon from "~/app/assets/chat.json";
+import chatIconLight from "~/app/assets/chat-light.json";
+import chatIconDark from "~/app/assets/chat-dark.json";
 
 const FeedbackButton: React.FC = () => {
+  const { theme } = useTheme();
   const [isHovered, setIsHovered] = useState(false);
   const [index, setIndex] = useState(0);
 
@@ -20,7 +23,11 @@ const FeedbackButton: React.FC = () => {
       onMouseEnter={handleMouseEnter}
       className="bg-light-50 border-light-600 flex items-center rounded-md border-[1px] px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-600 dark:bg-dark-50 dark:text-dark-1000"
     >
-      <LottieIcon index={index} json={chatIcon} isPlaying={isHovered} />
+      <LottieIcon
+        index={index}
+        json={theme === "dark" ? chatIconDark : chatIconLight}
+        isPlaying={isHovered}
+      />
       <span className="ml-1">Feedback</span>
     </button>
   );

src/app/components/SideNavigation.tsx

@@ -2,9 +2,14 @@
 
 import { usePathname } from "next/navigation";
 
-import boardsIcon from "~/app/assets/boards.json";
-import membersIcon from "~/app/assets/members.json";
-import settingsIcon from "~/app/assets/settings.json";
+import { useTheme } from "~/app/providers/theme";
+
+import boardsIconDark from "~/app/assets/boards-dark.json";
+import boardsIconLight from "~/app/assets/boards-light.json";
+import membersIconDark from "~/app/assets/members-dark.json";
+import membersIconLight from "~/app/assets/members-light.json";
+import settingsIconDark from "~/app/assets/settings-dark.json";
+import settingsIconLight from "~/app/assets/settings-light.json";
 
 import ReactiveButton from "~/app/components/ReactiveButton";
 import UserMenu from "~/app/components/UserMenu";
@@ -21,15 +26,24 @@ interface UserType {
 
 export default function SideNavigation({ user }: SideNavigationProps) {
   const pathname = usePathname();
+  const { theme } = useTheme();
 
   const navigation = [
-    { name: "Boards", href: "/boards", icon: boardsIcon },
+    {
+      name: "Boards",
+      href: "/boards",
+      icon: theme === "dark" ? boardsIconDark : boardsIconLight,
+    },
     {
       name: "Members",
       href: "/members",
-      icon: membersIcon,
+      icon: theme === "dark" ? membersIconDark : membersIconLight,
+    },
+    {
+      name: "Settings",
+      href: "/settings",
+      icon: theme === "dark" ? settingsIconDark : settingsIconLight,
     },
-    { name: "Settings", href: "/settings", icon: settingsIcon },
   ];
 
   return (

src/app/components/dashboard.tsx

@@ -13,7 +13,7 @@ export default async function Dashboard(props: { children: React.ReactNode }) {
   }
 
   return (
-    <main className="bg-light-50 flex h-screen flex-col items-center dark:bg-dark-50">
+    <main className="bg-light-100 flex h-screen flex-col items-center dark:bg-dark-50">
       <div className="border-light-600 m-auto flex h-16 w-full justify-between border-b px-5 py-2 align-middle dark:border-dark-600">
         <div className="my-auto flex w-full items-center justify-between">
           <h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">