Theme

• Default themes colors

Basic Usage

Using the default theme requires no extra configuration. By default, the library applies the light theme across your app.

Built-in Themes

The library includes dark and light themes out of the box. You can dynamically switch between these themes based on the user’s system preferences. For iOS 13+ and Android 10+, use the Appearance API to detect the user's preferred color scheme (dark or light).

Example:

import { useColorScheme } from 'react-native';
import { MaterialComponentsProvider, DarkTheme, LightTheme } from '@computools/react-native-material-components';

export default function App() {
  const scheme = useColorScheme();

  return (
    <MaterialComponentsProvider theme={scheme === 'dark' ? DarkTheme : LightTheme}>
      {/* Rest of your app code */}
    </MaterialComponentsProvider>
  );
}

Accessing the Current Theme in Custom Components

To use the current theme in your custom components, you can leverage the useTheme hook. This hook provides the active theme object, which includes all theme properties like colors.

Example:

import React from 'react';
import { TouchableOpacity, Text, TouchableOpacityProps } from 'react-native';
import { useTheme } from '@computools/react-native-material-components';

export const MySubmitButton: React.FC<TouchableOpacityProps> = ({ style, ...props }) => {
  const { primary } = useTheme();

  return (
    <TouchableOpacity style={[{ backgroundColor: primary.container }, style]} {...props}>
      <Text>Submit</Text>
    </TouchableOpacity>
  );
};

Custom Theme

To use a custom theme, wrap your entire app in the MaterialComponentsProvider component.

Automatically Generate Themes

This library includes a buildThemesFromColors function to generate both light and dark themes automatically from your specified color palette. The buildThemesFromColors function accepts colors in hex, rgb, or rgba formats.

Example:

import { buildThemesFromColors, type ThemeColors } from '@computools/react-native-material-components';

export const themeColors: ThemeColors = {
  primary: '#2E5242',
  secondary: '#E28f00',
  tertiary: '#CB7375',
  error: '#E4122B',
  neutral: '#D7A0A6',
  neutralVariant: '#ECECE8',
};

const themes = buildThemesFromColors(themeColors);

export default function App() {
  return (
    <MaterialComponentsProvider theme={themes.lightTheme}>
      {/* Rest of your app code */}
    </MaterialComponentsProvider>
  );
}

Manually Create a Custom Theme

You can also define a custom theme manually and pass it to the MaterialComponentsProvider. Refer to the Theme interface provided by the library for required structure and properties.