echo
5102ed23c1
Set up Expo SDK 56 project with TypeScript and Expo Router (file-based). Backend: - Full Convex schema (users, accounts, sessions, ads, categories, reviews, chats, messages, posts) deployed to self-hosted instance - Custom email/password auth with SHA-256 hashing via Convex actions - Query/mutation scaffolds for all domain tables - Convex environment variables configured on backend App structure: - Root layout with ConvexProvider, ThemeProvider, AuthContext - (auth) group: login and register screens (Macedonian UI) with role selection (handyman/customer) - (tabs) group: 5 tabs (Home, Explore, Posts, Chat, Profile) each with nested Stack layouts - Placeholder detail screens for ad, post, chat, review flows - 404 not-found screen in Macedonian UI primitives (components/ui/): - Button (4 variants), Input, Card, Loading, Avatar, Rating, Badge - ThemeProvider with light/dark palette via React context All user-facing strings in Macedonian. Code identifiers in English. TypeScript passes with zero errors.
89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
import { createContext, useContext } from "react";
|
|
import { useColorScheme } from "react-native";
|
|
|
|
type ThemeColors = {
|
|
primary: string;
|
|
primaryLight: string;
|
|
secondary: string;
|
|
background: string;
|
|
surface: string;
|
|
card: string;
|
|
border: string;
|
|
text: string;
|
|
textSecondary: string;
|
|
textTertiary: string;
|
|
error: string;
|
|
errorLight: string;
|
|
star: string;
|
|
};
|
|
|
|
type Theme = {
|
|
colors: ThemeColors;
|
|
spacing: {
|
|
xs: number;
|
|
sm: number;
|
|
md: number;
|
|
lg: number;
|
|
xl: number;
|
|
};
|
|
radius: {
|
|
sm: number;
|
|
md: number;
|
|
lg: number;
|
|
xl: number;
|
|
};
|
|
};
|
|
|
|
const LightTheme: Theme = {
|
|
colors: {
|
|
primary: "#2563EB",
|
|
primaryLight: "#DBEAFE",
|
|
secondary: "#059669",
|
|
background: "#FFFFFF",
|
|
surface: "#F9FAFB",
|
|
card: "#FFFFFF",
|
|
border: "#E5E7EB",
|
|
text: "#111827",
|
|
textSecondary: "#6B7280",
|
|
textTertiary: "#9CA3AF",
|
|
error: "#DC2626",
|
|
errorLight: "#FEE2E2",
|
|
star: "#F59E0B",
|
|
},
|
|
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
|
|
radius: { sm: 6, md: 12, lg: 16, xl: 24 },
|
|
};
|
|
|
|
const DarkTheme: Theme = {
|
|
colors: {
|
|
primary: "#60A5FA",
|
|
primaryLight: "#1E3A5F",
|
|
secondary: "#34D399",
|
|
background: "#111827",
|
|
surface: "#1F2937",
|
|
card: "#1F2937",
|
|
border: "#374151",
|
|
text: "#F9FAFB",
|
|
textSecondary: "#9CA3AF",
|
|
textTertiary: "#6B7280",
|
|
error: "#F87171",
|
|
errorLight: "#451111",
|
|
star: "#FBBF24",
|
|
},
|
|
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
|
|
radius: { sm: 6, md: 12, lg: 16, xl: 24 },
|
|
};
|
|
|
|
export type { Theme };
|
|
|
|
const ThemeContext = createContext<Theme>(LightTheme);
|
|
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
const scheme = useColorScheme();
|
|
const theme = scheme === "dark" ? DarkTheme : LightTheme;
|
|
return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
|
|
}
|
|
|
|
export function useTheme() {
|
|
return useContext(ThemeContext);
|
|
} |