Themes

The ComUnity Platform offers the ability to customise the appearance of your app across different client platforms through themes. A theme is a collection of attributes that define the style and layout of your app for a specific client platform.

Themes in the Toolkit provide developers with a comprehensive set of customisation options to tailor the user experience. ComUnity developers have the flexibility to modify various components, including tabs, buttons, text size, and label appearance.

For example, developers can easily customise the colour scheme of tabs using themes, allowing them to define the background colour, font colour, and other visual properties associated with tab elements. This ensures that tabs align with the desired design language and branding of the application.

Similarly, themes enable developers to customise the appearance of buttons by adjusting the background colour, font colour, and other visual attributes. This flexibility allows for the creation of buttons that seamlessly integrate with the overall aesthetic of the application and provide intuitive visual feedback to users.

Text size customisation is another crucial aspect offered by themes. Developers can modify the font size of text elements to ensure optimal readability and accommodate different user preferences or accessibility needs. By adjusting the text size, developers can optimise the user experience for various devices and screen sizes.

It's important to note that the availability of customisation options may vary depending on the platform. For example, in mobile app development, developers may have the option to modify the accent colour, which is a platform-specific customisation feature.

In summary, themes in the Toolkit empower developers to customise the appearance of components such as tabs, buttons, text size, and label appearance across various client platforms. By leveraging these customisation options, developers can create visually appealing interfaces that align with branding, enhance usability, and cater to different user preferences.

Supported clients include:

1. Android

2. IOS

3. Web

4. Windows

Accessing and Customising Themes in the ComUnity Developer Toolkit

To customise the appearance of your app across different client platforms, the Themes feature in the Toolkit provides developers with a convenient interface. Themes allow you to modify attributes and properties of various components, such as tabs, buttons, text size, and label appearance. This guide will walk you through accessing the Themes interface and provide an overview of its layout and functionality.

Accessing Themes in the Toolkit

To access Themes in the Toolkit and begin customising your app's appearance, follow these simple steps:

1. Open your project Settings: Navigate to your project settings to access the customisation options. This can typically be done through a settings menu or toolbar.

2. Click Project Setting in the navigation bar: Locate and click on the Project Setting option in the navigation bar of the settings interface. This will take you to a view displaying your project settings.

3. Select Themes in the sidebar: Within the project settings view, you will find a sidebar that includes various configuration options. Look for the Themes option in the sidebar and select it.

4. Tab View of Supported Clients: Upon selecting the Themes option, you will be presented with a tab view layout. Each tab represents a supported client platform, such as Android, iOS, Web, and Windows. The tab view allows you to navigate between different clients to customise their specific appearance.

Layout and Customisation Options

Once you've accessed the Themes interface, you will find a user-friendly layout that simplifies the customisation process. Here are some key aspects of the interface:

• Tab View Menu: The tab view menu presents each supported client as a separate tab. This enables you to focus on customising the appearance of the app for a specific platform. Simply click on the desired tab to access the corresponding customisation options.

• Attributes and Properties: Within each client tab, you will find relevant attributes and properties that can be modified. These options may include colour schemes, font styles, sizes, and other visual settings. All colour attributes are equipped with a built-in colour picker, which supports both selection from a colour palette and manual input of hexadecimal colours.

• View More Attributes: In some cases, you may find that the initial view of attributes is condensed to provide a streamlined interface. If you require additional customisation options, you can click on a More Attributes option to expand the tab view. This allows you to access and modify a wider range of settings to refine the app's appearance.

• Save: Once you have made the desired changes to the attributes and properties, clicking on the Save button will save the modifications. This ensures that your customised settings are applied to the app, reflecting the desired appearance for the selected client platform.

By utilising the intuitive interface of the Themes feature, developers can easily navigate through the supported client tabs, modify the relevant attributes, and create visually appealing and consistent user interfaces for their apps.

In conclusion, accessing and customising Themes in the Toolkit involves navigating to the project settings, selecting the Themes option, and exploring the tab view layout for each supported client platform. With the ability to modify various attributes and properties, including the use of a built-in colour picker, developers can easily customise the appearance of their apps to match branding, enhance usability, and create a personalised user experience.

Supported Attributes in Each Client Platform

In this section, we will provide an overview of the supported settings in the ComUnity Platform that can be customised for each client platform. These settings allow you to modify various aspects of your app's appearance and behaviour to create a unique and engaging user experience that aligns with your brand and audience.

During initial project set up, the ComUnity Toolkit provides you with an interface to select primary and accent colours for the colour scheme of your project, which will in turn affect the colours in your theme. However, the document assumes you used the default colour scheme, which consists of primary colour #004080 and accent colour #008000.

Google Android

Basic Settings

When creating a new project, the primary and accent colours can be selected from the dialog. These colours will be used as shown below, with suitable values set for the additional values. These values can be changed as required.

Name	Default Value	Description
Primary	Set on project creation	The default colour for the app bar and other primary UI elements
PrimaryDark	Primary	A darker variant of the primary colour, used for the status bar (on Android 5.0+) and contextual app bars
Accent	Set on project creation	A secondary colour for controls like checkboxes and text fields
Background	#f6f7f8	The app background colour
Text	#908f9b	The app text colour
Deselected	#d8d9db	The colour used for disabled controls
CardBackground	#ffffff	The background colour for cards (used in grid lists)
LinkText	Primary	The text colour for links that can be clicked
ErrorText	#e96b47	The text colour for error messages
InverseText	#ffffff	The text colour for dark backgrounds (i.e. text on the App bar)

More attributes

The following settings will use the specified default value if not value is set. The values can be overridden if required.

Name	Default Value	Description
TitleTextSize	20	The text size of title text items
BodyTextSize	14	The text size of body text items
SelectedTextSize	BodyTextSize	The text size of selected text items
DetailedTextSize	12	The text size of detailed text items
LabelTextSize	10	The text size of label text items
TabIndicator	InverseText	The colour for the Tab indicator
TabIndicatorHeight	4	The height of the Tab indicator
TabTextNormal	InverseText	The colour for the Tab item text
TabTextSelected	InverseText	The colour for the selected Tab item text
TabTextNormalAlpha	180	The alpha value for Tab item text
AppBar	Primary	The colour for the App Bar
AppBarText	InverseText	The colour for the App Bar text
UseNavigatorDrawer	True	Enables the menu selection (hamburger icon) in the App bar
UseNavigatorButtons	True	Enables the menu bar at the bottom of the screen
NavigationButtonBackground	#000000	Background colour for the bottom menu buttons
NumNavigationButtons	5	The number of menu button to display in the bottom menu bar
ShowNavigationButtonText	False	Show text descriptions on the bottom menu bar buttons
NavigationButtonNormal	InverseText	The colour for the bottom menu bar button icon and text
NavigationButtonSelect	Accent	The colour for the bottom menu bar button icon and text for the selected button
NavigationButtonTextSize	DetailedTextSize	The text size of the descriptions on the bottom menu buttons
DrawerHeaderBackground	Primary	The colour for the drawer header background
DrawerHeaderText	InverseText	The colour for the drawer header text
DrawerHeaderTextSize	34	The size of the drawer header text
DrawerHeaderHeight	160	The height of the drawer header
DrawerBackground	Background	The colour for the drawer background
DrawerText	Text	The colour of the drawer text
DrawerTextSize	BodyTextSize	The text size of the drawer text items
IconSize	24	Sets the app icon size
CardIconSize	36	Sets the icon sizes for lists
GridIconSize	48	Sets the icon sizes for grids
GridSize	128	Sets the size of grid items for a list
GridElevation	4	Sets the elevation of the grid items
SearchTextSize	BodyTextSize	The text size of the search text
SearchText	Text	The colour of the search text
SearchHintText	Text	The colour of the search hint text
Button	Primary	The colour for buttons
ButtonDisabled	Text	The colour for disabled buttons
ButtonText	InverseText	The colour for button text
ButtonTextSize	BodyTextSize	The text size for button text
LinkButton	Accent	The colour for link buttons

Additional Resources

• Android Developer Guide - Themes and Styles

iOS

Name	Default Value	Description
Background	#f6f7f8	The app background colour
FormBackground	#ffffff	The background colour of forms
Text	#9008f9b	The colour of the text
Accent	#008000	The colour of button labels
Navbar	#004080	The background colour of the navigation bar
NavbarAction	#ffffff	The colour of the action buttons in the navigation bar
TabSelected	#008000	The colour of an active tab's text and icons
Tab	#333333	The the colour of tab text and icons
Label	#004080	The text colour of form labels
Error	#ff0000	The text colour of error messages
Link	#004080	Colour of links in markdown documents
SegmentedMenu	#004080	Colour of text and icons in segmented menus
StatusbarWhite	checked	Allows you to toggle the colour of the Status bar at the top of the screen which can be light or dark
LabelAllCaps	checked	Allows you to capitalise all labels
LabelFont	5	Allows you to set the font size of labels
ContentFont	8	The font size of content

WEB

Name	Default Value	Description
ToolbarBackground	#004080	Toolbar background
ToolbarTitle	#ffffff	Toolbar text colour
ToolbarIcon	#008000	>>>>>>>Developer Input Requested
InputHighlight	#004080	Changes the input (field) lower line to this colour and slightly increases the line width.
InputLabel	#004080	Label text colour
TabsBackground	#efefef	Background of the colour
TabsText	#004080	Text colour within tabs
Asside	#004080	The text colour of the list items in the list adjacent to the Asside
Avatar	#004080	No longer in use
BaseText	#303030	Base text colour
BaseBackground	#ffffff	Base page background colour

Windows

Name	Default Value	Description
TitleForeground	#fffffff	The colour of the title
Title Background	#004080	The background colour of the title
ListForeground	#494751	The colour of list items
ListBackground	#ffffff	The background colour of the list
FormLabel	#008000	The colour of form labels
FormError	#e96b47	The colour of form error messages
FormForeground	#494751	The colour of the input text of form fields
FormBackground	#ffffff	The background colour of a form element
MenuForeground	#495741	The text colour of the menu items
MenuBackground	#ffffff	The background colour of the menu element
PivotSelected	#ffffff	The colour of the pivot when selected
PivotUnselected	#004080	The colour of the pivot when unselected
PivotBackground	#004080	The background colour of the pivot
TileForeground	#494751	The text colour of tiles
TileBackground	#d8d9db	The background colour of tiles
TabForeground	#004080	The text colour of the tab text
TabBackground	#ffffff	The background colour of tab
FormMargin	8px	The margin of the form element
TileMargin	4px	The margin of the tile
MenuItems	5	Menu items count
ButtonSize	35	The size of button in width