Implementing Theming and Dark Mode

// themeContext.js
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

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

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

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

import { Appearance } from 'react-native';\n\nconst colorScheme = Appearance.getColorScheme();\nconsole.log(colorScheme); // "light" or "dark"

import { Appearance } from 'react-native';\n\nconst handleChange = (newColorScheme) => {\n  console.log('Color scheme changed to:', newColorScheme);\n};\n\nconst subscription = Appearance.addChangeListener(handleChange);\n\n// Don't forget to remove the listener when component unmounts\nsubscription.remove();

import { useColorScheme } from 'expo-system-ui';\n\nconst MyComponent = () => {\n  const colorScheme = useColorScheme();\n  \n  return (\n    <View style={{\n      backgroundColor: colorScheme === 'dark' ? '#000' : '#fff'\n    }}>\n      <Text>Current scheme: {colorScheme}</Text>\n    </View>\n  );\n};

import { useColorScheme } from 'react-native';\nimport { ThemeProvider, useTheme } from '@react-navigation/native';\n\nconst App = () => {\n  const colorScheme = useColorScheme();\n  const theme = {\n    dark: colorScheme === 'dark',\n    colors: {\n      primary: '#000',\n      background: colorScheme === 'dark' ? '#111' : '#fff',\n    }\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <MainApp />\n    </ThemeProvider>\n  );\n};

import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar
        barStyle="dark-content"
        backgroundColor="#ffffff"
      />
      <Text>Hello, Expo!</Text>
    </View>
  );
}

import { dynamicColor } from 'expo-theme';

const theme = {
  backgroundColor: dynamicColor({
    light: '#ffffff',
    dark: '#000000'
  }),
  textColor: dynamicColor({
    light: '#000000',
    dark: '#ffffff'
  })
};

export default theme;

import AsyncStorage from '@react-native-async-storage/async-storage';

const THEME_KEY = 'user-theme';

export const saveThemePreference = async (theme) => {
  try {
    await AsyncStorage.setItem(THEME_KEY, theme);
  } catch (error) {
    console.error('Failed to save theme preference', error);
  }
};

export const loadThemePreference = async () => {
  try {
    const theme = await AsyncStorage.getItem(THEME_KEY);
    return theme || 'light';
  } catch (error) {
    console.error('Failed to load theme preference', error);
    return 'light';
  }
};

// App.js
import React, { createContext, useContext, useState } from 'react';
import { View, Text, TouchableOpacity } from 'expo-views';

const ThemeContext = createContext();

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

export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode);
  };

  const theme = isDarkMode ? darkTheme : lightTheme;

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

const lightTheme = {
  background: '#ffffff',
  text: '#000000',
  buttonBg: '#e0e0e0',
  buttonText: '#000000',
};

const darkTheme = {
  background: '#1a1a1a',
  text: '#ffffff',
  buttonBg: '#333333',
  buttonText: '#ffffff',
};

const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#34C759',
    background: '#FFFFFF',
    text: '#000000',
    border: '#E0E0E0'
  }
};

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: theme.colors.background,
    padding: 20
  },
  text: {
    color: theme.colors.text,
    fontSize: 16
  }
});

{ "theme": "light", "colors": { "primary": "#007AFF", "background": "#FFFFFF" } }

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

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

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

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

import { useTheme } from './ThemeProvider';

const ThemedButton = () => {
  const { theme } = useTheme();
  const backgroundColor = theme === 'dark' ? '#1C1C1E' : '#FFFFFF';

  return (
    <button style={{ backgroundColor }}>
      Click me
    </button>
  );
};

import { useColorScheme } from 'expo-system-ui';\n\nconst theme = useColorScheme();\nconsole.log(theme); // 'light' or 'dark'

import { ThemedText } from 'expo/themes';\n\n<ThemedText variant="body">This text adapts to theme</ThemedText>

import { ThemedView } from 'expo/themes';\n\n<ThemedView style={{ padding: 20 }}>\n  <ThemedText>Content inside themed view</ThemedText>\n</ThemedView>