|Branding and customization
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.
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.
|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:
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 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.
- Edit an app project in Woodford.
- Go to Design > Theme.
- Enable Advanced color settings.
- 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.