Theme Components

<ace-activity-history>

Following variables are available for customization:

Variable	Default value	Description
$ace-activity-history-date-color	#6200ee	Sets the color property of date in activity history.
$ace-activity-history-timeline-divider-color	#6200ee	Sets the divider color in activity history.
$ace-activity-history-icon-border-radius	50%	Sets the icon button border radius property in activity history.
$ace-activity-history-time-line-color	#6200ee	Sets the color property of timeline in activity history.
$ace-activity-history-image-border-color	#6200ee	Sets the border color property of image in activity history.
$ace-activity-history-image-box-shadow-color	#6200ee	Sets the box shadow color property of an image in activity history.

You can assign different values to each of the above variables as follows:

html
$ace-activity-history-date-color : #00ff00;

$ace-activity-history-icon-border-radius: 20%;

<ace-app-nav-list>

Following variables are available for customization:

Variable	Default value	Description
$ace-app-nav-list-background-color	#f8f9fa	Sets the background color property.
$ace-app-nav-list-background-color-focus	#f8f9fa	Sets the background color property in focus mode.
$ace-app-nav-list-border-focus	1px solid #6200ee	Sets the color in focus mode.
$ace-app-nav-list-active-item-background-color	#6200ee	Sets the background color in active mode of the item.

You can assign different values to each of the above variables as follows:

html
$ace-app-nav-list-border-focus : 1px solid #00ff00;

$ace-app-nav-list-active-item-background-color: #fff;

Bookmark

Following variable is available for customization:

Variable	Default value	Description
$ace-lib-bookmark-max-height	100%	This reflects the inner height of the bookmark list. If the list increases beyond the mentioned height value, the scroll-bar appears for that list.

<ace-object-views-list>

Following variables are available for customization:

Variable	Default value	Description
$ace-object-views-list-background-color	#f8f9fa	Sets the view list background color.
$ace-object-views-list-border-focus	1px solid #6200ee	Sets the border property in focus mode.
$ace-object-views-list-background-color-focus	#f8f9fa	Sets the view list background color in focus mode.

You can assign different values to each of the above variables as follows:

html
$ace-object-views-list-border-focus : 1px solid #00ff00;

$ace-object-views-list-background-color-focus: #fff;

<ace-record-actions>

Following variables are available for customization:

Variable	Default value	Description
$ace-record-action-list-background-color	#f8f9fa	Sets the record actions background color.
$ace-record-action-list-border-focus	1px solid #6200ee	Sets the border property in focus mode.
$ace-record-action-list-background-color-focus	#f8f9fa	Sets the record actions background color in focus mode.

You can assign different values to each of the above variables as follows:

html
$ace-record-action-list-border-focus : 1px solid #00ff00;

$ace-record-action-list-background-color-focus: #fff;

<ace-record-attachment>

Following variables are available for customization:

Variable	Default value	Description
$ace-record-attachment-header-font-size	2rem	Sets the header font size property.
$ace-record-attachment-item-background-color	transparent	Sets the background color of attachment item.
$ace-record-attachment-item-hover-color	#6200ee	Sets the color property of attachment item in hover.
$ace-record-attachment-item-hover-background-color	#6200ee	Sets the background color of attachment item in hover mode.

You can assign different values to each of the above variables as follows:

html
$ace-record-attachment-header-font-size : 18px;

$ace-record-attachment-item-background-color: #fff;

<ace-record-process>

Following variable is available for customization:

Variable	Default value	Description
$ace-record-process-header-font-size	2rem	Sets the font size property for the header.

You can assign different values to the above variable as follows:

html
$ace-record-process-header-font-size: 20px;

<ace-record-table-view>

Following variables are available for customization:

Variable	Default value	Description
$ace-record-table-view-profilePic-border-radius	50%	Sets the border radius of profile picture.
$ace-record-table-view-actionMenu-btn-border-radius	50%	Sets the border radius of action menu button.
$ace-record-table-view-loadmore-background-color	#fff	Sets the background color of loadmore button.

You can assign different values to each of the above variables as follows:

html
$ace-record-table-view-profilePic-border-radius : 20%;

$ace-record-table-view-loadmore-background-color: #00ff00;

<ace-record-task-view>

Following variables are available for customization:

Variable	Default value	Description
$ace-record-task-view-header-btn-border-radius	50%	Sets the border radius of task header button.
$ace-record-task-view-header-font-size	2rem	Sets the font size of task header.
$ace-record-task-view-subheader-font-size	1.75rem	Sets the font size of task subheader.

You can assign different values to each of the above variables as follows:

html
$ace-record-task-view-header-btn-border-radius : 20%;

$ace-record-task-view-subheader-font-size: 1rem;

<ace-related-info>

Following variables are available for customization:

Variable	Default value	Description
$ace-related-info-header-background	transparent	Sets the header background of related info.
$ace-related-info-header-text-color	inherit	Sets the header color of related info.

You can assign different values to each of the above variables as follows:

html
$ace-related-info-header-background : #fff;

$ace-related-info-header-text-color: #00ffdd;

<ace-role-switcher>

Following variables are available for customization:

Variable	Default value	Description
$ace-role-switcher-list-background-color	#f8f9fa	Sets the background color.
$ace-role-switcher-list-background-color-focus	#f8f9fa	Sets the background color in focused state.
$ace-role-switcher-list-border-focus	1px solid #6200ee	Sets the border property in focus mode.
$ace-role-switcher-list-active-item-background-color	#6200ee	Sets the background color of active item.

You can assign different values to each of the above variables as follows:

html
$ace-role-switcher-list-background-color-focus : #fff;

$ace-role-switcher-list-active-item-background-color: #00ffdd;

<ace-user-profile>

Following variables are available for customization:

Variable	Default value	Description
$ace-user-profile-font-size	1rem	Sets the font size property.
$ace-user-profile-font-weight	lighter	Sets the font weight property.
$user-profile-text-transform	uppercase	Sets the text-transform property. (For example, capitalize, lowercase, uppercase, and so on.)

You can assign different values to each of the above variables as follows:

html
$ace-user-profile-font-size : 18px;

$ace-user-profile-font-weight: bold;

$user-profile-text-transform: capitalize;

<ace-view-config>

Following variables are available for customization:

Variable	Default value	Description
$ace-view-config-filter-section-background	#f8f9fa	Sets the filter section background color property.
$ace-view-config-add-new-filter-button-color	#6200ee	Sets the color of add new filter button.
$ace-view-config-remove-filter-button-color	#6200ee	Sets the color of remove filter button.
$ace-view-config-filter-toggle-button-background	#6200ee	Sets the toggle button color of view-config.

You can assign different values to each of the above variables as follows:

html
$ace-view-config-filter-section-background : #fff;

$ace-view-config-view-config-filter-line-color: skyblue;