React Native Dark Mode

Component.tsx

import useThemedStyles, { createThemedStyleSheet } from "./useThemedStyles"

export default function Component() {
  const [styles, colorScheme] = useThemedStyles(stylesheet)
  // ...
}

const stylesheet = createThemedStyleSheet((theme) => ({
  container: {
    backgroundColor: theme.colors.background
  }
})

themes.ts

export const lightMode = {
  colors: lightModeColors,
  spacing,
  borderRadius,
  typography,
}

export const darkMode = {
  colors: darkModeColors,
  spacing,
  borderRadius,
  typography,
}

export type Theme = typeof lightMode

useThemedStyles.ts

import { useMemo } from "react"
import { ColorSchemeName, ImageStyle, StyleSheet, TextStyle, ViewStyle, useColorScheme } from "react-native"
import { Theme, darkMode, lightMode } from "./themes"

type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle }

export default function useThemedStyles<T extends NamedStyles<T> | NamedStyles<any>>(
  sheetBuilder: (theme: Theme, colorScheme: ColorSchemeName) => T
): [T, Theme] {
  const colorScheme = useColorScheme()
  const theme: Theme = colorScheme === "dark" ? darkMode : lightMode
  const sheet = useMemo(() => sheetBuilder(theme, colorScheme), [theme])
  return [sheet, theme]
}

export function createThemedStyleSheet<T extends NamedStyles<T> | NamedStyles<any>>(
  builder: (theme: Theme, colorScheme: ColorSchemeName) => T
): (theme: Theme, colorScheme: ColorSchemeName) => T {
  return (theme: Theme, colorScheme: ColorSchemeName) => {
    return StyleSheet.create(builder(theme, colorScheme))
  }
}