Customizing Themes

BaseTheme object is where you define your application's color palette.

If you need to customize the default theme to match your design requirements you should implement BaseTheme from @flexnative/theme-context.

Example

Example of customizing theme color.

Javascript
Typescript

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",
  light: "#ebebeb",
  primary: '#26C6DA'
};

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

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

const myThemeColors: BaseTheme = {
  default: '#4A148C',
  background: "#C5CAE9",
  card: "#E8EAF6",
  text: '#ffffff',
  border: '#9FA8DA',
  info: "#00E5FF",
  success: "#00C853",
  warning: "#F9A825",
  error: "#B71C1C",
  dark: "#212121",
  secondary: "#F50057",
  light: "#ebebeb",
  primary: '#26C6DA'
};

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

Example​

Example