useUniwind

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>
  )
}

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>
  )
}

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
}

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>
  )
}

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
}