react-native-demo / app / components / shared / theme-toggle.tsx

import { StyleSheet, Appearance, useColorScheme } from "react-native";
import { ThemedText, ThemedView, ThemedButton } from "@/components/theme";

export const ThemeToggle = () => {
  const colorScheme = useColorScheme();

  return (
    <ThemedView style={styles.settingsContainer}>
      <ThemedText>colorscheme set to {colorScheme}</ThemedText>
      <ThemedButton
        onPress={() =>
          Appearance.setColorScheme(colorScheme === "dark" ? "light" : "dark")
        }
      >
        toggle
      </ThemedButton>
    </ThemedView>
  );
};

const styles = StyleSheet.create({
  settingsContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 8,
  },
});