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

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>
         )}
 

components/common/ThemeSelector.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Check, Sun, Moon, SmartphoneNfc } from "lucide-react-native";
 import * as Haptics from "expo-haptics";
 import { useUIStore, type ThemeMode } from "~/stores/ui-store";
+import { useThemeColors } from "~/lib/theme-colors";
 import { cn } from "~/lib/utils";
 
 const OPTIONS: { mode: ThemeMode; icon: typeof Sun; labelKey: string }[] = [
@@ -19,6 +20,7 @@ const OPTIONS: { mode: ThemeMode; icon: typeof Sun; labelKey: string }[] = [
  */
 export function ThemeSelector({ className }: { className?: string }) {
   const { t } = useTranslation();
+  const { accent } = useThemeColors();
   const theme = useUIStore((s) => s.theme);
   const setTheme = useUIStore((s) => s.setTheme);
 
@@ -47,7 +49,7 @@ export function ThemeSelector({ className }: { className?: string }) {
             }}
           >
             <View className="flex-row items-center gap-3">
-              <Icon size={20} color={isActive ? "#1e40af" : "#64748b"} />
+              <Icon size={20} color={isActive ? accent : "#64748b"} />
               <Text
                 className={cn(
                   "text-base",
@@ -57,7 +59,7 @@ export function ThemeSelector({ className }: { className?: string }) {
                 {t(labelKey)}
               </Text>
             </View>
-            {isActive && <Check size={18} color="#1e40af" />}
+            {isActive && <Check size={18} color={accent} />}
           </Pressable>
         );
       })}

components/query/GlobalSearch.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, TextInput } from "react-native";
 import { Search } from "lucide-react-native";
 import { cn } from "~/lib/utils";
+import { useThemeColors } from "~/lib/theme-colors";
 
 export interface GlobalSearchProps {
   value: string;
@@ -20,14 +21,15 @@ export function GlobalSearch({
   placeholder = "Search across all fields…",
   className,
 }: GlobalSearchProps) {
+  const { accent } = useThemeColors();
   return (
     <View
       className={cn(
         "flex-row items-center gap-2 rounded-xl border border-primary/30 bg-primary/5 px-3",
         className,
       )}
     >
-      <Search size={18} color="#1e40af" />
+      <Search size={18} color={accent} />
       <TextInput
         className="h-11 flex-1 text-sm text-foreground placeholder:text-muted-foreground"
         value={value}

components/query/QueryBuilder.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import { View, Text, Pressable, ScrollView } from "react-native";
 import { Plus, Trash2, ToggleLeft } from "lucide-react-native";
 import { cn } from "~/lib/utils";
+import { useThemeColors } from "~/lib/theme-colors";
 import type { FieldDefinition } from "~/components/renderers/types";
 import {
   type CompoundFilter,
@@ -43,6 +44,7 @@ export function QueryBuilder({
   onClear,
   className,
 }: QueryBuilderProps) {
+  const { accent } = useThemeColors();
   const handleAdd = useCallback(() => {
     const firstField = fields[0]?.name ?? "";
     onAddFilter(firstField, "eq");
@@ -56,7 +58,7 @@ export function QueryBuilder({
           onPress={onToggleLogic}
           className="flex-row items-center rounded-lg border border-primary/30 bg-primary/10 px-3 py-1.5"
         >
-          <ToggleLeft size={14} color="#1e40af" />
+          <ToggleLeft size={14} color={accent} />
           <Text className="ml-1.5 text-xs font-semibold text-primary">
             Match {root.logic === "AND" ? "ALL" : "ANY"}
           </Text>

components/renderers/CalendarViewRenderer.tsx

@@ -6,6 +6,7 @@ import {
   Pressable,
 } from "react-native";
 import { ChevronLeft, ChevronRight } from "lucide-react-native";
+import { useThemeColors } from "~/lib/theme-colors";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { cn } from "~/lib/utils";
 
@@ -112,6 +113,7 @@ export function CalendarViewRenderer({
   initialYear,
   initialMonth,
 }: CalendarViewRendererProps) {
+  const { accent } = useThemeColors();
   const now = new Date();
   const [year, setYear] = useState(initialYear ?? now.getFullYear());
   const [month, setMonth] = useState(initialMonth ?? now.getMonth());
@@ -183,13 +185,13 @@ export function CalendarViewRenderer({
       {/* Month navigation */}
       <View className="mb-4 flex-row items-center justify-between">
         <Pressable onPress={goToPrevMonth} className="rounded-lg p-2 active:bg-muted">
-          <ChevronLeft size={20} color="#1e40af" />
+          <ChevronLeft size={20} color={accent} />
         </Pressable>
         <Text className="text-lg font-bold text-foreground">
           {MONTH_NAMES[month]} {year}
         </Text>
         <Pressable onPress={goToNextMonth} className="rounded-lg p-2 active:bg-muted">
-          <ChevronRight size={20} color="#1e40af" />
+          <ChevronRight size={20} color={accent} />
         </Pressable>
       </View>
 

components/renderers/ChartViewRenderer.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { View, Text, ScrollView } from "react-native";
 import { BarChart3, TrendingUp, PieChart, Activity, AlertCircle } from "lucide-react-native";
+import { useThemeColors } from "~/lib/theme-colors";
 import { Card, CardHeader, CardTitle, CardContent } from "~/components/ui/Card";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { EmptyState } from "~/components/ui/EmptyState";
@@ -32,15 +33,16 @@ export interface ChartViewRendererProps {
 /* ------------------------------------------------------------------ */
 
 function ChartIcon({ type }: { type: ChartType }) {
+  const { accent } = useThemeColors();
   switch (type) {
     case "line":
-      return <TrendingUp size={18} color="#1e40af" />;
+      return <TrendingUp size={18} color={accent} />;
     case "pie":
-      return <PieChart size={18} color="#1e40af" />;
+      return <PieChart size={18} color={accent} />;
     case "funnel":
-      return <Activity size={18} color="#1e40af" />;
+      return <Activity size={18} color={accent} />;
     default:
-      return <BarChart3 size={18} color="#1e40af" />;
+      return <BarChart3 size={18} color={accent} />;
   }
 }