The Color Theme Type

How to use this Document
Color Locations in Onboarding
- Landing Screen
- Sign In
  - SMS Code Screen
  - App Passcode Screen
- Sign Up
  - SMS Code Screen
  - Email Verification Screen
  - Personal Details Screen
  - Shipping Info Screen
  - App Passcode Screen
  - Face ID Verification Screen (N/A)
Example Object

How to use this Document

At the bottom of this article you'll also find a fully working color scheme object to see what values the Memento React Native SDK expects.

This document contains text descriptions of how the properties from this kind of object affect the visual elements of each screen.

To find out what colors you want to change navigate to the section of this article representing the screen you want to work on and follow the property descriptions for that specific screen.

Note: This article is WIP. Currently it only documents the onboarding flow

Color Locations in Onboarding

Landing Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color, the phone number input text color (except the dial prefix color) as well as the color of the num pad's text
`ONBOARDING.BACKGROUND`	The Background color of the screen
`ONBOARDING.LABEL`	Determines the color of the secondary text below the screen title.
`ONBOARDING.DIALING_PREFIX`	Determines the color of the dialing prefix of the phone number input.
`TEXT_INPUT.*`	Determines the color scheme of the phone number field field.

Sign In

SMS Code Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color, as well as the color of any attributed text within the secondary text below
the screen's title.
`ONBOARDING.BACKGROUND`	The background color of the screen.
`ONBOARDING.ACTION_TEXT`	The color of the resend button.
`TEXT_INPUT.*`	Determines the color scheme of the pin input field.

App Passcode Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color, as well as the border color of the PIN input field and the numpad's text color.
`ONBOARDING.BACKGROUND`	The background color of the screen.

Sign Up

SMS Code Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color, as well as the color of any attributed text within the secondary text below the screen's title.
`ONBOARDING.BACKGROUND`	The background color of the screen.
`ONBOARDING.ACTION_TEXT`	The color of the resend button.
`TEXT_INPUT.*`	Determines the color scheme of the pin input field.

Email Verification Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color, as well as the color of any attributed text in the checkmark field.
`ONBOARDING.BACKGROUND`	The background color of the screen.
`ONBOARDING.PRIMARY`	Determines the fill color of the check action as well as the color of the continue button when enabled.
`ONBOARDING.LABEL`	Determines the color of the check action text.
`TEXT_INPUT.*`	Determines the color scheme of the email input field.

Personal Details Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color.
`ONBOARDING.BACKGROUND`	The background color of the screen.
`ONBOARDING.PRIMARY`	Determines the color of the continue button when enabled.
`TEXT_INPUT.*`	Determines the color scheme of all input fields.

Shipping Info Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color.
`ONBOARDING.BACKGROUND`	The background color of the screen.
`ONBOARDING.PRIMARY`	Determines the color of the continue button when enabled.
`TEXT_INPUT.*`	Determines the color scheme of all input fields.

App Passcode Screen

Color Theme Property	Description
`ONBOARDING.FOREGROUND`	Determines the screen's title color, as well as the border color of the PIN input field and the numpad's text color.
`ONBOARDING.BACKGROUND`	The background color of the screen.
`ONBOARDING.LABEL`	Determines the color of the secondary text below the screen title.

Example Object

{
  COLOR_SCHEME_NAME: 'light',
  PRIMARY: '#5F56E7',
  PROGRESS_BAR: '#262626',
  FOREGROUND: 'black',
  FOREGROUND_TRANSPARENT: 'rgba(0, 0, 0, 0.15)',
  BACKGROUND: 'white',
  ONBOARDING: {
    BACKGROUND: 'white',
    FOREGROUND: 'black',
    DIALING_PREFIX: '#929292',
    LABEL: '#757575',
    ACTION_TEXT: '#0F60D4',
  },
  ROUND_ACTION: {
     BACKGROUND: '#E3E3E4',
     FOREGROUND: '#5F56E7',
     BACKGROUND_SELECTED: '#5F56E7',
     FOREGROUND_SELECTED: 'white',
  },
  TRANSACTION: {
    AUTHORIZATION: {
      ICON_BORDER: '#5F56E7';
      ICON_FILL: 'white';
      ICON_STROKE: 'black';
      LABEL: 'red';
    };
    OUTGOING: {
      ICON_BORDER: '#5F56E7';
      ICON_FILL: 'white';
      ICON_STROKE: 'black';
      LABEL: 'red';
    };
    INCOMING: {
      ICON_BORDER: '#5F56E7';
      ICON_FILL: 'white';
      ICON_STROKE: 'black';
      LABEL: 'green';
    };
  };
  TRANSACTION_DETAIL: {
    PRIMARY: '#5F56E7',
    BACKGROUND: 'white',
    FOREGROUND: 'black',
    LABEL: '#757575',
    BADGE: '#E3E3E4',
    THEME: '#F5F6F8',
    CARD: 'white',
  },
  TEXT_INPUT: {
    PRIMARY: 'black',
    INACTIVE_BACKGROUND: '#EFEFF0',
    ACTIVE_BACKGROUND: '#E3E3E4',
    SEARCH_BAR: '#7676801F',
    ERROR_BACKGROUND: '#FAD9DA',
    ERROR_MSG: '#E84F50',
  },
  CARDS: {
    BACKGROUND: '#F5F6F8',
    CONTENT: '#FFFFFF',
    SECTION_HEADER: 'rgba(146, 146, 146, 1)',
    CARD_COLOR: '#D6BFA7',
    SHADOW_COLOR: '#AB9986',
    NAVIGATION_BACKGROUND: '#F5F6F8',
    PLACEHOLDER: 'white',
  },
  SWITCH: {
    INACTIVE: 'rgba(120, 120, 128, 0.16);',
    BACKGROUND: 'blue',
    FILL: 'magenta',
  },
  LABEL: '#757575',
  PLACEHOLDER: '#929292',
  CHECKBOX: {
    INACTIVE: '#DCDDDF',
  },
  BUTTON_DISABLED_BACKGROUND: '#D8D7DD',
  ACTION_TEXT: '#0F60D4',
  TRANSPARENT: 'rgba(0, 0, 0, 0.0)',
  BLACK: 'black',
  WHITE: 'white',
  ON_PRESS_BUTTON: '#F5F6F8',
  DELETE_ICON: '#BDBDBD',
  DIALING_PREFIX: '#929292',
  MODAL: '#F5F6F8',
  SETTINGS_INFO: 'white',
  BORDER_SETTINGS_INFO: 'rgba(0, 0, 0, 0.15)',
  BANNER: '#333333',
  LOADING_SPACE: 'rgba(245, 246, 248, 0.8)',
  PUSH_NOTIFICATION_SCREEN: '#E5E5E5',
  PUSH_NOTIFICATION_SCREEN_INFO: '#757575',
  PUSH_NOTIFICATION_SCREEN_BUTTON: '#757575',
  CARD_SETTINGS: '#E3E3E4',
  IMAGE_PLACEHOLDER: '#757575',
  SETUP_ACCOUNT: {
    COLOR_ONE: '#C4C4C4',
    COLOR_TWO: '#03BD85',
    COLOR_THREE: '#EBAD51',
    COLOR_FOUR: '#5F56E7',
    COLOR_FIVE: '#AFAAF3',
  },
}