Easy theming with dark mode support for React Native (without styled-components)

themeProviderWithHook.js

import { registerThemes, useTheme } from 'react-native-themed-styles';
import { Dimensions, Platform } from 'react-native';
import { useThemeState } from '@saypr/kanvaz-hooks';
import { themeState } from '@saypr/kanvaz-utils';

const dimensions = {
  fullHeight: Dimensions.get('window').height,
  fullWidth: Dimensions.get('window').width,
};

const padding = {
  sm: 10,
  md: 20,
  lg: 30,
  xl: 40,
};

const fonts = {
  sm: 12,
  md: 18,
  lg: 28,
  fontFamily: 'System',
};

let themeData = {
  light: {
    emoji: '🔥',
    colors: {
      primaryColor: '#441996',
      backgroundColor: '#F4F8FF',
      secondaryColor: '#318757',
      textColor: '#374151',
    },
    dimensions,
    fonts,
    padding,
  },
  dark: {
    emoji: '🚀',
    colors: {
      primaryColor: '#00CBFF',
      secondaryColor: '#318757',
      backgroundColor: '#27293F',
      textColor: '#F4F8FF',
    },
    dimensions,
    fonts,
    padding,
  },
};

const styleSheetFactory = registerThemes(themeData, () => {
  const colorScheme = useThemeState();
  if (Platform.OS === 'web') {
    return themeState;
  } else {
    return ['light', 'dark'].includes(colorScheme) ? colorScheme : 'light';
  }
});

const styles = styleSheetFactory((theme) => ({
  container: {
    backgroundColor: theme.backgroundColor,
    flex: 1,
  },
  text: {
    color: theme.textColor,
  },
}));

const themeController = {
  updateData: (val) => {
    if (val)
      themeData = {
        light: { colors: { ...themeData.light.colors, ...val.light.colors } },
        dark: { colors: { ...themeData.dark.colors, ...val.dark.colors } },
      };
  },
};

export {
  styles,
  useTheme,
  themeData,
  themeController,
  styleSheetFactory,
  dimensions,
};