132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
/**
|
|
* Theme Context Hook for managing app-wide theme state
|
|
* Supports Light, Dark, and System (automatic) modes
|
|
*
|
|
* IMPORTANT: Requires expo-system-ui plugin in app.json for Android support
|
|
*/
|
|
|
|
import { Colors, ColorName } from "@/constants/theme";
|
|
import { getStorageItem, setStorageItem } from "@/utils/storage";
|
|
import {
|
|
createContext,
|
|
useContext,
|
|
useEffect,
|
|
useState,
|
|
ReactNode,
|
|
} from "react";
|
|
import { useColorScheme as useSystemColorScheme } from "react-native";
|
|
|
|
type ThemeMode = "light" | "dark" | "system";
|
|
type ColorScheme = "light" | "dark";
|
|
|
|
interface ThemeContextType {
|
|
themeMode: ThemeMode;
|
|
colorScheme: ColorScheme;
|
|
colors: typeof Colors.light;
|
|
setThemeMode: (mode: ThemeMode) => Promise<void>;
|
|
getColor: (colorName: ColorName) => string;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
const THEME_STORAGE_KEY = "theme_mode";
|
|
|
|
export function ThemeProvider({ children }: { children: ReactNode }) {
|
|
// Dùng useColorScheme từ react-native để detect theme thiết bị
|
|
const deviceColorScheme = useSystemColorScheme(); // "light" | "dark" | null | undefined
|
|
|
|
// State lưu user's choice (light/dark/system)
|
|
const [themeMode, setThemeModeState] = useState<ThemeMode>("system");
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
// Xác định colorScheme cuối cùng
|
|
const colorScheme: ColorScheme =
|
|
themeMode === "system"
|
|
? deviceColorScheme === "dark"
|
|
? "dark"
|
|
: "light"
|
|
: themeMode;
|
|
|
|
const colors = Colors[colorScheme];
|
|
|
|
useEffect(() => {
|
|
const loadThemeMode = async () => {
|
|
try {
|
|
const savedThemeMode = await getStorageItem(THEME_STORAGE_KEY);
|
|
if (
|
|
savedThemeMode &&
|
|
["light", "dark", "system"].includes(savedThemeMode)
|
|
) {
|
|
setThemeModeState(savedThemeMode as ThemeMode);
|
|
}
|
|
} catch (error) {
|
|
console.warn("Failed to load theme mode:", error);
|
|
} finally {
|
|
setIsLoaded(true);
|
|
}
|
|
};
|
|
loadThemeMode();
|
|
}, []);
|
|
|
|
const setThemeMode = async (mode: ThemeMode) => {
|
|
try {
|
|
setThemeModeState(mode);
|
|
await setStorageItem(THEME_STORAGE_KEY, mode);
|
|
console.log("[Theme] Changed to:", mode);
|
|
} catch (error) {
|
|
console.warn("Failed to save theme mode:", error);
|
|
}
|
|
};
|
|
|
|
const getColor = (colorName: ColorName): string => {
|
|
return colors[colorName] || colors.text;
|
|
};
|
|
|
|
// Chờ theme load xong trước khi render
|
|
if (!isLoaded) {
|
|
// Render với default theme (system) khi đang load
|
|
const defaultScheme: ColorScheme =
|
|
deviceColorScheme === "dark" ? "dark" : "light";
|
|
return (
|
|
<ThemeContext.Provider
|
|
value={{
|
|
themeMode: "system",
|
|
colorScheme: defaultScheme,
|
|
colors: Colors[defaultScheme],
|
|
setThemeMode: async () => {},
|
|
getColor: (colorName: ColorName) =>
|
|
Colors[defaultScheme][colorName] || Colors[defaultScheme].text,
|
|
}}
|
|
>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
const value: ThemeContextType = {
|
|
themeMode,
|
|
colorScheme,
|
|
colors,
|
|
setThemeMode,
|
|
getColor,
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useThemeContext(): ThemeContextType {
|
|
const context = useContext(ThemeContext);
|
|
if (context === undefined) {
|
|
throw new Error("useThemeContext must be used within a ThemeProvider");
|
|
}
|
|
return context;
|
|
}
|
|
|
|
// Legacy hook cho backward compatibility
|
|
export function useColorScheme(): ColorScheme {
|
|
const { colorScheme } = useThemeContext();
|
|
return colorScheme;
|
|
}
|