Theme Hooks

The app provides utility hooks that make it easy to access theme information and colors in your components. These hooks allow for more programmatic control over theming when Tailwind classes aren't sufficient.

Available Hooks

useTheme

The useTheme hook provides access to the current theme state and a function to toggle it:

import { useTheme } from '@/app/contexts/ThemeContext';
 
function MyComponent() {
  const { isDark, toggleTheme } = useTheme();
  
  return (
    <View>
      <ThemedText>
        Current theme: {isDark ? 'Dark Mode' : 'Light Mode'}
      </ThemedText>
      <Button title="Toggle Theme" onPress={toggleTheme} />
    </View>
  );
}

useThemeColors

The useThemeColors hook provides programmatic access to all theme colors:

import { useThemeColors } from '@/app/contexts/ThemeColors';
 
function StyledComponent() {
  const colors = useThemeColors();
  
  return (
    <View style={{ 
      backgroundColor: colors.bg,
      borderColor: colors.border,
      borderWidth: 1,
      padding: 16,
      borderRadius: 8
    }}>
      <Text style={{ color: colors.text }}>
        This uses programmatic colors
      </Text>
      <View style={{ 
        backgroundColor: colors.secondary,
        padding: 8,
        marginTop: 8,
        borderRadius: 4
      }}>
        <Text style={{ color: colors.highlight }}>
          Highlighted content
        </Text>
      </View>
    </View>
  );
}

useThemeColors Properties

The useThemeColors hook returns an object with these properties:

Property	Description	Light Value	Dark Value
`bg`	Primary background	`#ffffff`	`#14212D`
`secondary`	Secondary background	`#E2E8F0`	`#324650`
`text`	Text color	`black`	`white`
`highlight`	Accent color	`#0EA5E9`	`#0EA5E9`
`border`	Border color	`#E2E8F0`	`#404040`
`icon`	Icon color	`black`	`white`
`placeholder`	Placeholder text	`#A5ABB4`	`#697F8D`
`isDark`	Is dark mode active	`false`	`true`

When to Use Hooks vs Tailwind

Use Tailwind Classes When:

Styling basic properties like background, text color, borders
Working with components that support className (like NativeWind components)
Applying responsive design patterns

<View className="bg-light-primary dark:bg-dark-primary p-4 rounded-lg">
  <ThemedText className="text-base font-bold">
    This uses Tailwind
  </ThemedText>
</View>

Use Theme Hooks When:

Working with components that don't support className
Needing dynamic styles based on theme and other state
Creating animations that depend on theme colors
Working with libraries that require style objects

function AnimatedComponent() {
  const colors = useThemeColors();
  const animation = useRef(new Animated.Value(0)).current;
  
  // Now you can use colors in your animation configuration
  const animatedStyle = {
    backgroundColor: animation.interpolate({
      inputRange: [0, 1],
      outputRange: [colors.bg, colors.highlight]
    })
  };
  
  return (
    <Animated.View style={[{ padding: 16, borderRadius: 8 }, animatedStyle]}>
      <Text style={{ color: colors.text }}>Animated content</Text>
    </Animated.View>
  );
}

Combining Approaches

You can combine both approaches for maximum flexibility:

function HybridComponent() {
  const colors = useThemeColors();
  
  return (
    <View className="p-4 rounded-lg bg-light-primary dark:bg-dark-primary">
      <ThemedText className="text-lg font-bold mb-2">
        This uses Tailwind classes
      </ThemedText>
      
      {/* Library component that doesn't support className */}
      <ExternalLibraryComponent
        style={{
          backgroundColor: colors.secondary,
          color: colors.text,
          borderColor: colors.border,
          borderWidth: 1
        }}
        highlightColor={colors.highlight}
      />
    </View>
  );
}

Theme Hooks

On this page