Skip to main content

​
Overview

The useUniwind hook provides access to the current theme name and automatically triggers a re-render when the theme changes. This is useful when you need to conditionally render components or apply logic based on the active theme.

​
Usage

import { useUniwind } from 'uniwind'

export const MyComponent = () => {
  const { theme } = useUniwind()

  return (
    <View className="p-4">
      <Text>Current theme: {theme}</Text>
    </View>
  )
}

​
When to Use This Hook

The useUniwind hook is ideal for scenarios where you need to:
  • Display the current theme name in your UI
  • Conditionally render different components based on the active theme
  • Execute side effects when the theme changes
  • Access theme information for logging or analytics
For most styling use cases, you don’t need this hook. Use theme-based className variants instead (e.g., dark:bg-gray-900).

​
Return Values

​
theme
string
The name of the currently active theme (e.g., "light", "dark", or any custom theme name you’ve defined).

​
Examples

​
Conditional Rendering Based on Theme

import { useUniwind } from 'uniwind'
import { View, Text } from 'react-native'

export const ThemedIcon = () => {
  const { theme } = useUniwind()

  return (
    <View className="p-4">
      {theme === 'dark' ? (
        <MoonIcon className="text-white" />
      ) : (
        <SunIcon className="text-yellow-500" />
      )}
    </View>
  )
}

​
Using Theme in Side Effects

import { useUniwind } from 'uniwind'
import { useEffect } from 'react'

export const ThemeLogger = () => {
  const { theme } = useUniwind()

  useEffect(() => {
    console.log('Theme changed to:', theme)
    // You could also:
    // - Update analytics
    // - Store preference in MMKV storage
    // - Trigger additional theme-related logic
  }, [theme])

  return null
}

​
Displaying Current Theme

import { useUniwind } from 'uniwind'
import { View, Text } from 'react-native'

export const ThemeIndicator = () => {
  const { theme } = useUniwind()

  return (
    <View className="bg-gray-100 dark:bg-gray-800 p-2 rounded">
      <Text className="text-sm text-gray-600 dark:text-gray-300">
        Active theme: {theme}
      </Text>
    </View>
  )
}

Theming Basics

Learn how to set up and configure themes in Uniwind

Custom Themes

Create and manage custom theme configurations
⌘I