• User Interface Style: React Native apps can detect the device's system-wide theme (Light or Dark) → Testing/Development: You can override the theme for testing purposes by changing the userInterfaceStyle property in your app.json file.

• useColorScheme Hook: A built-in hook from React Native that returns the current color scheme (light, dark, or sometimes null).

import { useColorScheme} from "react-native";

const colorScheme = useColorScheme();
console.log(colorScheme) // Will Print out the Light/Dark Mode ↑↑↑

Terminal

2. Structuring Theme Colors

Instead of hardcoding colors, it is best practice to create a centralized constants file:

• Folder: /constants
• File: colors.js

Structure: Create an object with light and dark properties. Each should contain identical keys (e.g., background, text, navBackground) but different color values.

Global Colors: Colors like primary (for buttons) or warning (for errors) that remain the same across both themes should be placed outside the theme-specific objects.

// ./constants/Colors.js 

export const Colors = {
  primary: "#6849a7",
  warning: "#cc475a",

  dark: {
    text: "#d4d4d4",
    title: "#fff",
    background: "#252231",
    navBackground: "#201e2b",
    iconColour: "#9591a5",
    iconColourFocused: "#fff",
    uiBackground: "#2f2b3d",
  },
  light: {
    text: "#625f72",
    title: "#201e2b",
    background: "#e0dfe8",
    navBackground: "#e8e7ef",
    iconColour: "#686477",
    iconColourFocused: "#201e2b",
    uiBackground: "#d6d5e1",
  },
};

3. Implementing the Theme in Layouts

To apply themes globally to headers and navigation:

1. Import the Hook and Colors: Import useColorScheme from react-native and your colors object.
2. Determine Current Theme:

*import { StyleSheet, Text,* ***useColorScheme***, *View } from "react-native";*
*import { Stack, Slot } from "expo-router";*
*import { Colors } from "../constants/Colors";*

*const _layout = () => {*
  ***const colorScheme = useColorScheme();
  const theme = Colors[colorScheme] ?? Colors.light; // Fallback to light if null***
  *return ( /*  ...   */);
};

export default _layout;*