Theme

From Resco's Wiki
Jump to navigation Jump to search
Wikipedia logo
Wikipedia has an article on a similar subject:
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.

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.

Theme editor.png

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

Preview 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.

Theme-editor-brand-color-dark-mode.png

Advanced color settings and tokens

Preview 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.

Theme-color-picker-with-tokens.png





Was this information helpful? How can we improve?