useColorScheme

function useColorScheme(): 'light' | 'dark' | null | undefined

import { useColorScheme, View, Text, StyleSheet } from 'react-native';

function ThemedComponent() {
  const colorScheme = useColorScheme();

  return (
    <View
      style={[
        styles.container,
        colorScheme === 'dark' ? styles.darkContainer : styles.lightContainer,
      ]}
    >
      <Text style={colorScheme === 'dark' ? styles.darkText : styles.lightText}>
        Current theme: {colorScheme}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  lightContainer: {
    backgroundColor: '#ffffff',
  },
  darkContainer: {
    backgroundColor: '#000000',
  },
  lightText: {
    color: '#000000',
  },
  darkText: {
    color: '#ffffff',
  },
});

function DynamicThemedComponent() {
  const colorScheme = useColorScheme();

  const backgroundColor = colorScheme === 'dark' ? '#1a1a1a' : '#f5f5f5';
  const textColor = colorScheme === 'dark' ? '#ffffff' : '#000000';

  return (
    <View style={{ backgroundColor, padding: 20 }}>
      <Text style={{ color: textColor }}>Themed content</Text>
    </View>
  );
}

import { useColorScheme } from 'react-native';
import { createContext, useContext, ReactNode } from 'react';

type Theme = {
  dark: boolean;
  colors: {
    background: string;
    text: string;
    primary: string;
  };
};

const ThemeContext = createContext<Theme | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const colorScheme = useColorScheme();

  const theme: Theme = {
    dark: colorScheme === 'dark',
    colors: {
      background: colorScheme === 'dark' ? '#000000' : '#ffffff',
      text: colorScheme === 'dark' ? '#ffffff' : '#000000',
      primary: colorScheme === 'dark' ? '#bb86fc' : '#6200ee',
    },
  };

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const theme = useContext(ThemeContext);
  if (!theme) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return theme;
}

function SafeThemedComponent() {
  const colorScheme = useColorScheme();

  // Fallback to 'light' if colorScheme is null/undefined
  const isDark = colorScheme === 'dark';

  return (
    <View style={{ backgroundColor: isDark ? '#000' : '#fff' }}>
      <Text style={{ color: isDark ? '#fff' : '#000' }}>
        Theme active
      </Text>
    </View>
  );
}