Extra Theme Colors

If you need to customize the default theme by adding custom colors to match your design requirements, you can extend the BaseTheme object from @flexnative/theme-context.

Extend custom theme

Example of extending default theme colors.

import { ColorValue } from 'react-native';

import ThemeContext, { BaseTheme, light } from '@flexnative/theme-context';

type MyExtraColorsProps = {
  color1: ColorValue;
  color2: ColorValue,
}

const myExtraColors: BaseTheme<MyExtraColorsProps> = {
  ...light,
  color1: '#C51162', //New color
  color2: '#7B1FA2', //New color
  primary: '#4A148C' /* This line changes primary color.
                        In the same way you can change any default color */
};

function App() {
  return (
    <ThemeContext.Provider value={{colors: myExtraColors}}>
      <YourAPP />
    </ThemeContext.Provider>
  );
}

Extend custom theme

Example of extending custom theme colors.

import ThemeContext from '@flexnative/theme-context';

const myThemeColors = {
  default: '#4A148C',
  background: "#C5CAE9",
  card: "#E8EAF6",
  text: '#ffffff',
  border: '#9FA8DA',
  info: "#00E5FF",
  success: "#00C853",
  warning: "#F9A825",
  error: "#B71C1C",
  dark: "#212121",
  secondary: "#F50057",
  primary: '#4A148C',
  light: "#ebebeb",
  color1: '#C51162', //New color
  color2: '#7B1FA2', //New color
};

function App() {
  return (
    <ThemeContext.Provider value={{colors: myExtraColors}}>
      <YourAPP />
    </ThemeContext.Provider>
  );
}