Theme

The default colors in the Resco Mobile CRM app can be modified by tweaking the theme. This allows you to apply your corporate colors to the app.

Edit an app project and select Theme from the Project menu of Woodford to alter the theme.

View styles set for specific field(s) on a view have higher priority and override the theme color settings. To learn more about view styles, see View styles. You can also check Row scripts.

Changing the theme

Setup is WYSIWYG. You can click on any sections on the preview to change its color. The changes are displayed immediately in the preview. You can also switch between phone view and tablet view.

The Colors List pane on the right displays a list of unique color styles used in the app. You can click each item to select a replacement color.

Hint	Colors set for ListForeground and ListSelForeground for Views and TabForeground and TabSelForeground for tab are also used for icons, that were colorized, when importing via Images section.

Click Load Preset to revert all changes and return to a pre-configured theme:

• Default
• Inspections

You can export the current theme setup and download it using the Export button (for example, to use it in another project). Click Import to upload a theme file and apply it.

Brand color, dark mode

Since release 16.1, a simpler way of selecting colors is available. Only select a single Brand color. Woodford uses an algorithm by Material Design to automatically generate a color palette for light and dark themes built around the brand color. The algorithm ensures that the generated colors offer sufficient contrast and meet accessibility requirements.

Users can switch between light and dark using Setup/Settings.

Advanced color settings and tokens

If you need to fine-tune the colors, enable Advanced color settings.

When picking a color for a UI element, you have two options:

• Directly select a custom color.
• Select a token (which also has a color).

Tokens are named colors that can be defined once and reused at various locations in the app, similar to Material Design's design tokens.

Cards

Cards are flexible-size containers that group related information. Resco mobile apps use card design in two places:

• In flexible forms, each form tab is a card
• In questionnaires, each question group is a card

You can use the theme editor to set card colors to make your cards stand out. Colors allow users to distinguish quickly where cards start and end.

1. Edit an app project in Woodford.
2. Go to Design > Theme.
3. Enable Advanced color settings.
4. Scroll down to Card section and set up the colors, then save all changes.
   
   "Background" refers to the header background, "Foreground" to primary text and icon in the header, "Interactive items" to header elements that users can interact with such as expand/collapse, view selector, etc.

In the app, cards can add to clarity for complex forms or questionnaires.

Views and home screen

Views and home screen of the app may share the same color scheme.

• Disable Custom Home to reuse view colors also for home.
• Eanble Custom Home if you want to set up separate colors for the home screen. See Custom colors and design for more information about tweaking your home screen.

Was this information helpful? How can we improve?