React Native light/dark theme styles

Button.styles.ts

export const styles = {
  base: StyleSheet.create({
    button: { padding: 20 },
  }),

  light: StyleSheet.create({
    button: { background: 'blue', color: 'white' },
  }),

  dark: StyleSheet.create({
    button: { background: 'white', color: 'blue' },
  }),
};

Button.tsx

import { useThemeStyles } from './use-theme-styles'

export const Button = () => {
  const s = useThemeStyles(styles);

  return (
    <TouchableOpacity style={s.button}>
      <Text>Submit</Text>
    </TouchableOpacity>
  );
};

use-theme-styles.ts

import React, { useMemo } from 'react';
import { StyleProp, StyleSheet, useColorScheme } from 'react-native';

type ThemeKeys = 'base' | 'light' | 'dark';
type ComposedStyles = StyleProp<object>;
type StylesRecord = Record<ThemeKeys, ComposedStyles>;

export function useThemeStyles<T extends StylesRecord>(styles: T): T['base'] {
  const theme = useColorScheme() ?? 'light';

  return useMemo(() => {
    return StyleSheet.compose(styles.base, styles[theme]);
  }, [theme]);
}