Merge pull request #125 from objectstack-ai/fix/dark-mode-icon-colors

fix(ux): theme-aware icon + markdown colors for dark mode

Author: os-zhuang

app/(app)/[appName]/[objectName]/index.tsx

@@ -12,6 +12,7 @@ import { ScreenHeader } from "~/components/common/ScreenHeader";
 import { useToast } from "~/components/ui/Toast";
 import { useConfirm } from "~/components/ui/ConfirmDialog";
 import { useObjectMeta } from "~/hooks/useObjectMeta";
+import { useThemeColors } from "~/lib/theme-colors";
 
 export default function ObjectListScreen() {
   const { appName, objectName } = useLocalSearchParams<{
@@ -21,6 +22,7 @@ export default function ObjectListScreen() {
   const client = useClient();
   const router = useRouter();
   const { t } = useTranslation();
+  const { accent } = useThemeColors();
   const { toastError } = useToast();
   const confirm = useConfirm();
 
@@ -100,7 +102,7 @@ export default function ObjectListScreen() {
             accessibilityLabel={t("records.createNamed", { name: displayName })}
             className="h-10 w-10 items-center justify-center rounded-full active:bg-muted"
           >
-            <Plus size={24} color="#1e40af" />
+            <Plus size={24} color={accent} />
           </Pressable>
         }
       />

app/(app)/[appName]/index.tsx

@@ -8,6 +8,7 @@ import { ListSkeleton } from "~/components/ui/ListSkeleton";
 import { ScreenHeader } from "~/components/common/ScreenHeader";
 import { useApp, type NavigationItem } from "~/hooks/useApps";
 import { getIcon } from "~/lib/getIcon";
+import { useThemeColors } from "~/lib/theme-colors";
 
 /**
  * App home — renders the app's curated navigation tree (the same
@@ -19,6 +20,7 @@ import { getIcon } from "~/lib/getIcon";
 export default function AppHomeScreen() {
   const { appName } = useLocalSearchParams<{ appName: string }>();
   const router = useRouter();
+  const { accent } = useThemeColors();
   const { app, isLoading, error } = useApp(appName);
 
   const displayName =
@@ -71,7 +73,7 @@ export default function AppHomeScreen() {
         accessibilityLabel={item.label}
       >
         <View className="rounded-xl bg-primary/10 p-2.5">
-          <Icon size={20} color="#1e40af" />
+          <Icon size={20} color={accent} />
         </View>
         <Text className="ml-3 flex-1 text-base font-medium text-card-foreground">
           {item.label}

app/(app)/packages.tsx

@@ -14,6 +14,7 @@ import { ScreenHeader } from "~/components/common/ScreenHeader";
 import { EmptyState } from "~/components/ui/EmptyState";
 import { ListSkeleton } from "~/components/ui/ListSkeleton";
 import { useConfirm } from "~/components/ui/ConfirmDialog";
+import { useThemeColors } from "~/lib/theme-colors";
 
 /**
  * Package management screen – list, enable, disable, uninstall packages.
@@ -22,6 +23,7 @@ import { useConfirm } from "~/components/ui/ConfirmDialog";
  */
 export default function PackagesScreen() {
   const { t } = useTranslation();
+  const { accent } = useThemeColors();
   const { packages, isLoading, error, refetch, enable, disable, uninstall } =
     usePackageManagement();
   const confirm = useConfirm();
@@ -87,7 +89,7 @@ export default function PackagesScreen() {
                 <CardHeader>
                   <View className="flex-row items-center justify-between">
                     <View className="flex-row items-center gap-2 flex-1">
-                      <Package size={18} color="#1e40af" />
+                      <Package size={18} color={accent} />
                       <CardTitle>{pkg.label}</CardTitle>
                     </View>
                     <View className="flex-row items-center gap-3">

app/(tabs)/apps.tsx

@@ -12,11 +12,13 @@ import { useApps } from "~/hooks/useApps";
 import { getIcon } from "~/lib/getIcon";
 import { getUserErrorMessage } from "~/lib/error-handling";
 import { tCount } from "~/lib/i18n";
+import { useThemeColors } from "~/lib/theme-colors";
 
 export default function AppsScreen() {
   const { apps, isLoading, error, refetch } = useApps();
   const router = useRouter();
   const { t } = useTranslation();
+  const { accent } = useThemeColors();
   const [isRefreshing, setIsRefreshing] = useState(false);
 
   const handleAppPress = (appName: string) => {
@@ -85,7 +87,7 @@ export default function AppsScreen() {
                   accessibilityLabel={t("apps.openA11y", { name: app.label })}
                 >
                   <View className="rounded-xl bg-primary/10 p-3">
-                    <Icon size={24} color="#1e40af" />
+                    <Icon size={24} color={accent} />
                   </View>
                   <View className="ml-4 flex-1">
                     <Text className="text-base font-semibold text-card-foreground">

app/(tabs)/index.tsx

@@ -129,7 +129,7 @@ export default function HomeScreen() {
         contentContainerStyle={webContentMaxWidth}
         showsVerticalScrollIndicator={false}
         refreshControl={
-          <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} tintColor="#1e40af" />
+          <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} tintColor={accent} />
         }
       >
         <View className="mb-5 flex-row items-start justify-between">
@@ -159,7 +159,7 @@ export default function HomeScreen() {
           accessibilityLabel={t("home.assistantTitle")}
         >
           <View className="rounded-xl bg-primary/10 p-3">
-            <Sparkles size={24} color="#1e40af" />
+            <Sparkles size={24} color={accent} />
           </View>
           <View className="ml-4 flex-1">
             <Text className="text-base font-semibold text-card-foreground">
@@ -263,7 +263,7 @@ export default function HomeScreen() {
                 accessibilityLabel={`Open ${d.label} dashboard`}
               >
                 <View className="rounded-xl bg-primary/10 p-3">
-                  <LayoutDashboard size={24} color="#1e40af" />
+                  <LayoutDashboard size={24} color={accent} />
                 </View>
                 <View className="ml-4 flex-1">
                   <Text className="text-base font-semibold text-card-foreground">

app/(tabs)/search.tsx

@@ -10,10 +10,12 @@ import { Input } from "~/components/ui/Input";
 import { EmptyState } from "~/components/ui/EmptyState";
 import { useGlobalSearch } from "~/hooks/useGlobalSearch";
 import { useSearchHistoryStore } from "~/stores/search-history-store";
+import { useThemeColors } from "~/lib/theme-colors";
 
 export default function SearchScreen() {
   const router = useRouter();
   const { t } = useTranslation();
+  const { accent } = useThemeColors();
   const { query, setQuery, groups, isSearching, hasSearched, totalCount, objectCount } =
     useGlobalSearch();
   const recentQueries = useSearchHistoryStore((s) => s.queries);
@@ -162,7 +164,7 @@ export default function SearchScreen() {
                     accessibilityLabel={t("search.openLabel", { title: rec.title })}
                   >
                     <View className="mr-3 rounded-lg bg-primary/10 p-2">
-                      <FileText size={16} color="#1e40af" />
+                      <FileText size={16} color={accent} />
                     </View>
                     <View className="flex-1">
                       <Text className="text-base text-foreground" numberOfLines={1}>

components/batch/BatchActionBar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, Text, Pressable } from "react-native";
 import { Trash2, Edit3, X } from "lucide-react-native";
 import { cn } from "~/lib/utils";
+import { useThemeColors } from "~/lib/theme-colors";
 
 export interface BatchActionBarProps {
   /** Number of selected records */
@@ -25,6 +26,7 @@ export function BatchActionBar({
   onClearSelection,
   className,
 }: BatchActionBarProps) {
+  const { accent } = useThemeColors();
   if (selectedCount === 0) return null;
 
   return (
@@ -49,7 +51,7 @@ export function BatchActionBar({
             onPress={onBatchEdit}
             className="flex-row items-center rounded-lg bg-primary/10 px-3 py-2"
           >
-            <Edit3 size={14} color="#1e40af" />
+            <Edit3 size={14} color={accent} />
             <Text className="ml-1.5 text-xs font-semibold text-primary">Edit</Text>
           </Pressable>
         )}

components/common/LanguageSelector.tsx

@@ -5,6 +5,7 @@ import { Check } from "lucide-react-native";
 import * as Haptics from "expo-haptics";
 import { SUPPORTED_LANGUAGES } from "~/lib/i18n";
 import { useUIStore } from "~/stores/ui-store";
+import { useThemeColors } from "~/lib/theme-colors";
 import { cn } from "~/lib/utils";
 
 /**
@@ -13,6 +14,7 @@ import { cn } from "~/lib/utils";
  */
 export function LanguageSelector({ className }: { className?: string }) {
   const { t } = useTranslation();
+  const { accent } = useThemeColors();
   const language = useUIStore((s) => s.language);
   const setLanguage = useUIStore((s) => s.setLanguage);
 
@@ -48,7 +50,7 @@ export function LanguageSelector({ className }: { className?: string }) {
             >
               {lang.label}
             </Text>
-            {isActive && <Check size={18} color="#1e40af" />}
+            {isActive && <Check size={18} color={accent} />}
           </Pressable>
         );
       })}

components/common/OfflineIndicator.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, Text, Pressable } from "react-native";
 import { WifiOff, RefreshCw } from "lucide-react-native";
 import { cn } from "~/lib/utils";
+import { useThemeColors } from "~/lib/theme-colors";
 
 export interface OfflineIndicatorProps {
   isOffline: boolean;
@@ -22,6 +23,7 @@ export function OfflineIndicator({
   onSyncPress,
   className,
 }: OfflineIndicatorProps) {
+  const { accent } = useThemeColors();
   if (!isOffline && pendingCount === 0) return null;
 
   return (
@@ -52,7 +54,7 @@ export function OfflineIndicator({
           disabled={isSyncing}
           className="flex-row items-center rounded-lg bg-primary/10 px-2.5 py-1"
         >
-          <RefreshCw size={12} color="#1e40af" />
+          <RefreshCw size={12} color={accent} />
           <Text className="ml-1 text-xs font-medium text-primary">
             {isSyncing ? "Syncing…" : "Sync"}
           </Text>

components/common/ScreenHeader.tsx

@@ -3,6 +3,7 @@ import { View, Text, Pressable } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ChevronLeft } from "lucide-react-native";
 import { useRouter } from "expo-router";
+import { useThemeColors } from "~/lib/theme-colors";
 
 export interface ScreenHeaderProps {
   /** Primary title shown in the bar. */
@@ -44,6 +45,7 @@ export function ScreenHeader({
 }: ScreenHeaderProps) {
   const router = useRouter();
   const insets = useSafeAreaInsets();
+  const { accent } = useThemeColors();
 
   const handleBack = () => {
     if (onBack) {
@@ -74,7 +76,7 @@ export function ScreenHeader({
             accessibilityLabel="Go back"
             className="h-11 w-11 items-center justify-center rounded-full active:bg-muted"
           >
-            <ChevronLeft size={26} color="#1e40af" />
+            <ChevronLeft size={26} color={accent} />
           </Pressable>
         )}