Dark Mode & Color Schemes

import { useColorScheme, StyleSheet, Text, View } from "react-native";
 
const colors = {
  light: { background: "#ffffff", text: "#0f172a", muted: "#64748b", border: "#e2e8f0" },
  dark: { background: "#0f172a", text: "#f8fafc", muted: "#94a3b8", border: "#334155" },
} as const;
 
export function ThemedCard({ title, body }: { title: string; body: string }) {
  const scheme = useColorScheme() ?? "light";
  const theme = colors[scheme];
 
  return (
    <View style={[styles.card, { backgroundColor: theme.background, borderColor: theme.border }]}>
      <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
      <Text style={[styles.body, { color: theme.muted }]}>{body}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  card: { borderRadius: 12, borderWidth: 1, padding: 16, gap: 6 },
  title: { fontSize: 17, fontWeight: "600" },
  body: { fontSize: 15, lineHeight: 22 },
});

import { useCallback, useMemo, useState } from "react";
import {
  Appearance,
  Pressable,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from "react-native";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView } from "react-native-safe-area-context";
 
type Scheme = "light" | "dark";
type Preference = "system" | Scheme;
 
const palette = {
  light: {
    background: "#f8fafc",
    surface: "#ffffff",
    text: "#0f172a",
    subtext: "#475569",
    accent: "#2563eb",
    border: "#cbd5e1",
  },
  dark: {
    background: "#020617",
    surface: "#0f172a",
    text: "#f8fafc",
    subtext: "#94a3b8",
    accent: "#60a5fa",
    border: "#334155",
  },
} as const;
 
function useAppColorScheme(): Scheme {
  const system = useColorScheme();
  return system === "dark" ? "dark" : "light";
}
 
export default function SettingsAppearanceScreen() {
  const scheme = useAppColorScheme();
  const theme = palette[scheme];
  const [preference, setPreference] = useState<Preference>("system");
 
  const applyPreference = useCallback((next: Preference) => {
    setPreference(next);
    if (next === "system") {
      Appearance.setColorScheme(null); // follow OS again
    } else {
      Appearance.setColorScheme(next);
    }
  }, []);
 
  const styles = useMemo(() => makeStyles(theme), [theme]);
 
  return (
    <SafeAreaView style={styles.safe} edges={["top", "left", "right"]}>
      <StatusBar style={scheme === "dark" ? "light" : "dark"} />
 
      <Text style={styles.heading}>Appearance</Text>
      <Text style={styles.subheading}>
        System is {scheme}. Preference: {preference}.
      </Text>
 
      <View style={styles.card}>
        {(["system", "light", "dark"] as const).map((option) => (
          <Pressable
            key={option}
            onPress={() => applyPreference(option)}
            style={[styles.row, preference === option && styles.rowActive]}
          >
            <Text style={styles.rowLabel}>{option}</Text>
            {preference === option && <Text style={styles.check}>✓</Text>}
          </Pressable>
        ))}
      </View>
 
      <View style={[styles.preview, { backgroundColor: theme.surface }]}>
        <Text style={styles.previewTitle}>Preview card</Text>
        <Text style={styles.previewBody}>Semantic tokens swap with the active scheme.</Text>
      </View>
    </SafeAreaView>
  );
}
 
function makeStyles(theme: (typeof palette)[Scheme]) {
  return StyleSheet.create({
    safe: { flex: 1, backgroundColor: theme.background, padding: 16, gap: 12 },
    heading: { fontSize: 28, fontWeight: "700", color: theme.text },
    subheading: { fontSize: 15, color: theme.subtext },
    card: {
      backgroundColor: theme.surface,
      borderRadius: 12,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: theme.border,
      overflow: "hidden",
    },
    row: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      paddingHorizontal: 16,
      paddingVertical: 14,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: theme.border,
    },
    rowActive: { backgroundColor: theme.background },
    rowLabel: { fontSize: 16, color: theme.text, textTransform: "capitalize" },
    check: { color: theme.accent, fontWeight: "700" },
    preview: {
      borderRadius: 12,
      padding: 16,
      gap: 6,
      borderWidth: StyleSheet.hairlineWidth,
      borderColor: theme.border,
    },
    previewTitle: { fontSize: 17, fontWeight: "600", color: theme.text },
    previewBody: { fontSize: 15, lineHeight: 22, color: theme.subtext },
  });
}

import { Appearance, useColorScheme } from "react-native";
 
// In a component - reactive
function Banner() {
  const scheme = useColorScheme() ?? "light";
  return <View style={{ backgroundColor: scheme === "dark" ? "#1e293b" : "#fff" }} />;
}
 
// Override for in-app toggle
Appearance.setColorScheme("dark");  // force dark
Appearance.setColorScheme(null);    // follow system again

const colors = {
  light: { bg: "#fff", text: "#111", accent: "#2563eb" },
  dark: { bg: "#111", text: "#f8fafc", accent: "#60a5fa" },
};

const tokens = {
  light: {
    backgroundPrimary: "#ffffff",
    textPrimary: "#0f172a",
    borderDefault: "#e2e8f0",
  },
  dark: {
    backgroundPrimary: "#0f172a",
    textPrimary: "#f8fafc",
    borderDefault: "#334155",
  },
};

import { createContext, useContext, useMemo } from "react";
import { useColorScheme } from "react-native";
 
type Theme = (typeof palette)["light"];
 
const ThemeContext = createContext<Theme>(palette.light);
 
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const scheme = useColorScheme() ?? "light";
  const theme = useMemo(() => palette[scheme], [scheme]);
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}
 
export function useTheme() {
  return useContext(ThemeContext);
}

{
  "expo": {
    "userInterfaceStyle": "automatic",
    "ios": { "userInterfaceStyle": "automatic" },
    "android": { "userInterfaceStyle": "automatic" }
  }
}

import { ColorSchemeName, useColorScheme } from "react-native";
 
type Scheme = "light" | "dark";
 
function resolveScheme(name: ColorSchemeName): Scheme {
  return name === "dark" ? "dark" : "light";
}
 
function useResolvedScheme(): Scheme {
  return resolveScheme(useColorScheme());
}
 
// Typed palette - exhaustiveness checked
const palette: Record<Scheme, { background: string; text: string }> = {
  light: { background: "#fff", text: "#111" },
  dark: { background: "#111", text: "#fff" },
};