57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { selectTheme } from "@/redux/user/user.selectors";
|
|
import { darkTheme, lightTheme } from "@/util/theme";
|
|
import { useColorScheme } from "react-native";
|
|
import { useSelector } from "react-redux";
|
|
|
|
type ThemePreference = "light" | "dark" | "system";
|
|
|
|
/**
|
|
* Custom hook that returns the appropriate theme based on user preference
|
|
*
|
|
* This hook automatically selects the correct theme (light or dark) based on:
|
|
* - User's explicit preference (light/dark)
|
|
* - System appearance when "system" is selected
|
|
* - Defaults to system theme if no preference is set
|
|
*
|
|
* @returns The theme object compatible with React Native Paper
|
|
*
|
|
* @example
|
|
* ```typescript
|
|
* import { useTheme } from "@/hooks/useTheme";
|
|
*
|
|
* const MyComponent = () => {
|
|
* const theme = useTheme();
|
|
*
|
|
* return (
|
|
* <View style={{ backgroundColor: theme.colors.background }}>
|
|
* <Text style={{ color: theme.colors.onBackground }}>
|
|
* Themed content
|
|
* </Text>
|
|
* </View>
|
|
* );
|
|
* };
|
|
* ```
|
|
*/
|
|
export const useTheme = () => {
|
|
const userThemePreference: ThemePreference = useSelector(selectTheme);
|
|
const systemColorScheme = useColorScheme();
|
|
|
|
// Determine which theme to use based on user preference
|
|
let selectedTheme;
|
|
|
|
switch (userThemePreference) {
|
|
case "light":
|
|
selectedTheme = lightTheme;
|
|
break;
|
|
case "dark":
|
|
selectedTheme = darkTheme;
|
|
break;
|
|
case "system":
|
|
default:
|
|
// Use system preference when user selects "system" or as fallback
|
|
selectedTheme = systemColorScheme === "dark" ? darkTheme : lightTheme;
|
|
break;
|
|
}
|
|
|
|
return selectedTheme;
|
|
}; |