Skip to main content

Function: useTheme()

useTheme(customStyleConfig?): object

Defined in: hooks/useTheme.ts:57

Hook to access and manage theme configuration with automatic color scheme detection.

Parameters​

customStyleConfig?​

StyleContextType

Optional custom style configuration to override the context value

Returns​

object

Object containing theme utilities and current theme state

theme​

theme: ThemeMap

themeConfig​

themeConfig: ThemeConfig

colorScheme​

colorScheme: ColorSchemeName

getColor()​

getColor: (color) => Color

Parameters​

color​

string

Returns​

Color

getColors()​

getColors: (...colors) => Color[]

Parameters​

colors​

...string[]

Returns​

Color[]

Examples​

const MyComponent = () => {
  const { theme, getColor, colorScheme } = useTheme();

  return (
    <View style={{
      backgroundColor: getColor('theme.colors.background'),
      color: getColor('theme.colors.text')
    }}>
      <Text>Current scheme: {colorScheme}</Text>
    </View>
  );
};
const MyComponent = () => {
  const { getColors } = useTheme();
  const [bgColor, textColor, borderColor] = getColors(
    'theme.colors.background',
    'theme.colors.text',
    'theme.colors.border'
  );

  return (
    <View style={{ backgroundColor: bgColor, borderColor }}>
      <Text style={{ color: textColor }}>Multiple colors</Text>
    </View>
  );
};