chore: build

mobile/src/api/api.ts

@@ -778,6 +778,11 @@ export interface PublicSettings {
     telegram_notifications_enabled: boolean;
     two_fa_enabled: boolean;
     contact_telegram: string;
+    client_color_primary: string;
+    client_color_secondary: string;
+    client_color_success: string;
+    client_color_danger: string;
+    client_color_warning: string;
 }
 
 export const getPublicSettings = async (): Promise<PublicSettings> => {
@@ -794,6 +799,11 @@ export const getPublicSettings = async (): Promise<PublicSettings> => {
         telegram_notifications_enabled: false,
         two_fa_enabled: false,
         contact_telegram: "",
+        client_color_primary: "#7c3aed",
+        client_color_secondary: "#22d3ee",
+        client_color_success: "#4ade80",
+        client_color_danger: "#ef4444",
+        client_color_warning: "#f59e0b",
     };
     try {
         const { data } = await apiClient.get(`${V1}/app-settings`);
@@ -816,6 +826,11 @@ export const getPublicSettings = async (): Promise<PublicSettings> => {
                 data.telegram_notifications_enabled ?? false,
             two_fa_enabled: data.two_fa_enabled ?? false,
             contact_telegram: data.contact_telegram || "",
+            client_color_primary: data.client_color_primary || "#7c3aed",
+            client_color_secondary: data.client_color_secondary || "#22d3ee",
+            client_color_success: data.client_color_success || "#4ade80",
+            client_color_danger: data.client_color_danger || "#ef4444",
+            client_color_warning: data.client_color_warning || "#f59e0b",
         };
     } catch {
         return defaults;

mobile/src/context/ThemeContext.tsx

@@ -1,6 +1,8 @@
-import React, { createContext, useContext, useState, useEffect, type ReactNode } from "react";
+import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import { AppState } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { darkColors, lightColors, type Colors } from "../theme/colors";
+import { getPublicSettings } from "../api/api";
 
 type ThemeMode = "dark" | "light";
 
@@ -12,16 +14,45 @@ interface ThemeContextType {
 }
 
 const STORAGE_KEY = "@theme_mode";
+const COLORS_CACHE_KEY = "@client_colors_cache";
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
     const [mode, setMode] = useState<ThemeMode>("dark");
+    const [colorOverrides, setColorOverrides] = useState<Partial<Colors>>({});
+
+    const fetchClientColors = useCallback(async () => {
+        try {
+            const s = await getPublicSettings();
+            const overrides: Partial<Colors> = {};
+            if (s.client_color_primary) overrides.accent = s.client_color_primary;
+            if (s.client_color_secondary) overrides.secondary = s.client_color_secondary;
+            if (s.client_color_success) overrides.success = s.client_color_success;
+            if (s.client_color_danger) overrides.danger = s.client_color_danger;
+            if (s.client_color_warning) overrides.warning = s.client_color_warning;
+            setColorOverrides(overrides);
+            AsyncStorage.setItem(COLORS_CACHE_KEY, JSON.stringify(overrides)).catch(() => {});
+        } catch {}
+    }, []);
 
     useEffect(() => {
         AsyncStorage.getItem(STORAGE_KEY).then((val) => {
             if (val === "light" || val === "dark") setMode(val);
         });
-    }, []);
+        AsyncStorage.getItem(COLORS_CACHE_KEY).then((val) => {
+            if (val) {
+                try { setColorOverrides(JSON.parse(val)); } catch {}
+            }
+        });
+        fetchClientColors();
+    }, [fetchClientColors]);
+
+    useEffect(() => {
+        const sub = AppState.addEventListener("change", (state) => {
+            if (state === "active") fetchClientColors();
+        });
+        return () => sub.remove();
+    }, [fetchClientColors]);
 
     const toggleTheme = () => {
         const next = mode === "dark" ? "light" : "dark";
@@ -29,8 +60,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
         AsyncStorage.setItem(STORAGE_KEY, next);
     };
 
+    const baseColors = mode === "dark" ? darkColors : lightColors;
+    const colors: Colors = { ...baseColors, ...colorOverrides };
+
     const value: ThemeContextType = {
-        colors: mode === "dark" ? darkColors : lightColors,
+        colors,
         mode,
         toggleTheme,
         isDark: mode === "dark",

mobile/src/theme/colors.ts

@@ -16,6 +16,7 @@ export const darkColors = {
     accent: "#7c3aed",
     accentDark: "#6d28d9",
     accentLight: "#8b5cf6",
+    secondary: "#22d3ee",
 
     // Status
     success: "#4ade80",
@@ -62,6 +63,7 @@ export const lightColors: Colors = {
     accent: "#7c3aed",
     accentDark: "#6d28d9",
     accentLight: "#8b5cf6",
+    secondary: "#0891b2",
 
     // Status
     success: "#16a34a",