@oxyhq/services
Version:
69 lines (67 loc) • 2.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useThemeStyles = void 0;
var _react = require("react");
var _useColorScheme = require("./useColorScheme.js");
var _theme = require("../constants/theme.js");
var _themeUtils = require("../utils/themeUtils.js");
/**
* Reusable hook for theme styles
* Replaces duplicated themeStyles useMemo pattern across multiple screens
*
* Provides consistent theme colors across all service screens:
* - Base colors (text, background, borders)
* - Semantic colors (primary, danger, success)
* - Theme-aware calculations
* - Normalized color scheme and Colors object
*
* @param theme - Theme string ('light' | 'dark')
* @param colorSchemeFromHook - Optional color scheme from useColorScheme() hook. If not provided, will call useColorScheme() internally.
* @returns ThemeStyles object with consistent color values
*
* @example
* ```tsx
* const themeStyles = useThemeStyles(theme);
* <View style={{ backgroundColor: themeStyles.backgroundColor }}>
* <Text style={{ color: themeStyles.textColor }}>Hello</Text>
* </View>
* ```
*
* @example
* ```tsx
* const colorScheme = useColorScheme();
* const themeStyles = useThemeStyles(theme, colorScheme);
* const iconColor = themeStyles.colors.iconSecurity;
* ```
*/
const useThemeStyles = (theme, colorSchemeFromHook) => {
const hookColorScheme = (0, _useColorScheme.useColorScheme)();
const colorSchemeToUse = colorSchemeFromHook ?? hookColorScheme;
return (0, _react.useMemo)(() => {
const colorScheme = (0, _themeUtils.normalizeColorScheme)(colorSchemeToUse, theme);
const isDarkTheme = colorScheme === 'dark';
const colors = _theme.Colors[colorScheme];
return {
// Base colors
textColor: isDarkTheme ? '#FFFFFF' : '#000000',
backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
mutedTextColor: '#8E8E93',
// Same for both themes
// Semantic colors (consistent across themes)
primaryColor: '#007AFF',
dangerColor: '#FF3B30',
successColor: '#34C759',
// Theme flag
isDarkTheme,
// Normalized color scheme and theme colors
colorScheme,
colors
};
}, [theme, colorSchemeToUse]);
};
exports.useThemeStyles = useThemeStyles;
//# sourceMappingURL=useThemeStyles.js.map