Skip to main content

​
Overview

The useUniwind hook provides access to the current theme name and adaptive theme status. It automatically triggers a re-render when the theme changes or when adaptive themes are toggled. 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, hasAdaptiveThemes } = useUniwind()

  return (
    <View className="p-4">
      <Text>Current theme: {theme}</Text>
      <Text>Adaptive themes: {hasAdaptiveThemes ? 'enabled' : 'disabled'}</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
  • Check if adaptive themes (system theme) are enabled
  • 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", "system", or any custom theme name you’ve defined).
​
hasAdaptiveThemes
boolean
Indicates whether adaptive themes are currently enabled. When true, the app automatically follows the device’s system color scheme. When false, the app uses a fixed theme.

​
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, hasAdaptiveThemes } = 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>
      <Text className="text-xs text-gray-500 dark:text-gray-400 mt-1">
        {hasAdaptiveThemes ? 'Following system theme' : 'Fixed theme'}
      </Text>
    </View>
  )
}

​
Reacting to Adaptive Theme Changes

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

export const AdaptiveThemeMonitor = () => {
  const { theme, hasAdaptiveThemes } = useUniwind()

  useEffect(() => {
    if (hasAdaptiveThemes) {
      console.log('System theme changed to:', theme)
      // Handle system theme change
      // - Update status bar style
      // - Log analytics event
      // - Sync with backend preferences
    }
  }, [theme, hasAdaptiveThemes])

  return null
}

Theming Basics

Learn how to set up and configure themes in Uniwind

Custom Themes

Create and manage custom theme configurations