ojosproject · calejvaldez · Jan 27, 2026
diff --git a/public/images/tools/call_dark.png b/public/images/tools/call_dark.png
diff --git a/public/images/tools/call_light.png b/public/images/tools/call_light.png
diff --git a/public/images/tools/care_instructions_dark.png b/public/images/tools/care_instructions_dark.png
diff --git a/public/images/tools/care_instructions_light.png b/public/images/tools/care_instructions_light.png
diff --git a/public/images/tools/contacts_dark.png b/public/images/tools/contacts_dark.png
diff --git a/public/images/tools/contacts_light.png b/public/images/tools/contacts_light.png
diff --git a/public/images/tools/medications_dark.png b/public/images/tools/medications_dark.png
diff --git a/public/images/tools/medications_light.png b/public/images/tools/medications_light.png
diff --git a/public/images/tools/pro_dark.png b/public/images/tools/pro_dark.png
diff --git a/public/images/tools/pro_light.png b/public/images/tools/pro_light.png
diff --git a/public/images/tools/resources_dark.png b/public/images/tools/resources_dark.png
diff --git a/public/images/tools/resources_light.png b/public/images/tools/resources_light.png
diff --git a/public/images/tools/settings_dark.png b/public/images/tools/settings_dark.png
diff --git a/public/images/tools/settings_light.png b/public/images/tools/settings_light.png
diff --git a/src-tauri/icons/128x128.png b/src-tauri/icons/128x128.png
diff --git a/src-tauri/icons/128x128@2x.png b/src-tauri/icons/128x128@2x.png
diff --git a/src-tauri/icons/32x32.png b/src-tauri/icons/32x32.png
diff --git a/src-tauri/icons/64x64.png b/src-tauri/icons/64x64.png
diff --git a/src-tauri/icons/Square107x107Logo.png b/src-tauri/icons/Square107x107Logo.png
diff --git a/src-tauri/icons/Square142x142Logo.png b/src-tauri/icons/Square142x142Logo.png
diff --git a/src-tauri/icons/Square150x150Logo.png b/src-tauri/icons/Square150x150Logo.png
diff --git a/src-tauri/icons/Square284x284Logo.png b/src-tauri/icons/Square284x284Logo.png
diff --git a/src-tauri/icons/Square30x30Logo.png b/src-tauri/icons/Square30x30Logo.png
diff --git a/src-tauri/icons/Square310x310Logo.png b/src-tauri/icons/Square310x310Logo.png
diff --git a/src-tauri/icons/Square44x44Logo.png b/src-tauri/icons/Square44x44Logo.png
diff --git a/src-tauri/icons/Square71x71Logo.png b/src-tauri/icons/Square71x71Logo.png
diff --git a/src-tauri/icons/Square89x89Logo.png b/src-tauri/icons/Square89x89Logo.png
diff --git a/src-tauri/icons/StoreLogo.png b/src-tauri/icons/StoreLogo.png
diff --git a/src-tauri/icons/icon.icns b/src-tauri/icons/icon.icns
diff --git a/src-tauri/icons/icon.ico b/src-tauri/icons/icon.ico
diff --git a/src-tauri/icons/icon.png b/src-tauri/icons/icon.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -20,7 +20,7 @@ import { getConfig, setAppearanceConfig } from "@/utils/settings";
 import { setupOnboarding } from "@/utils/onboarding";
 
 export default function Hub() {
-  const [onboardingCompleted, setOnboardingCompleted] = useState(false);
+  const [config, setConfig] = useState<Config | null>(null);
   const [availableTools, setAvailableTools] = useState<HubTool[]>(hubTools);
   const router = useRouter();
 
@@ -47,7 +47,7 @@ export default function Hub() {
       try {
         await setupOnboarding();
         const c = await getConfig();
-        setOnboardingCompleted(c.onboarding_completed);
+        setConfig(c);
 
         if (!c.onboarding_completed) {
           router.push("/onboarding");
@@ -68,7 +68,8 @@ export default function Hub() {
   }, []);
 
   return (
-    onboardingCompleted && (
+    config &&
+    config.onboarding_completed && (
       <main>
         <HubHeader></HubHeader>
         <section className={styles.sectionTools}>
@@ -78,7 +79,11 @@ export default function Hub() {
               <HubToolButton
                 key={hubTool.name}
                 link={hubTool.link}
-                icon={hubTool.icon}
+                icon={
+                  config.appearance === "dark"
+                    ? hubTool.icon
+                    : hubTool.icon.replace("light", "dark")
+                }
                 name={hubTool.name}
               />
             ))}

diff --git a/src/utils/hub.ts b/src/utils/hub.ts
@@ -10,37 +10,37 @@ export const hubTools: HubTool[] = [
   {
     link: "./resources",
     name: "Resources",
-    icon: "/images/tools/resources.png",
+    icon: "/images/tools/resources_light.png",
   },
   {
     link: "./care-instructions",
     name: "Care Instructions",
-    icon: "/images/tools/care-instructions.png",
+    icon: "/images/tools/care_instructions_light.png",
   },
   {
     link: "./pro",
     name: "Survey",
-    icon: "/images/tools/pro.png",
+    icon: "/images/tools/pro_light.png",
   },
   {
     link: "./medications",
     name: "Medications",
-    icon: "/images/tools/medications.png",
+    icon: "/images/tools/medications_light.png",
   },
   {
     link: "./call",
     name: "Video",
-    icon: "/images/tools/call.png",
+    icon: "/images/tools/call_light.png",
   },
   {
     link: "./settings/device",
     name: "Settings",
-    icon: "/images/tools/settings.png",
+    icon: "/images/tools/settings_light.png",
   },
   {
     link: "./contacts",
     name: "Contacts",
-    icon: "/images/tools/contacts.png",
+    icon: "/images/tools/contacts_light.png",
   },
 ].sort((a, b) => {
   // Sorts list by HubTool.name