Dashboard Server Themes

For changing the default theme of the Dashboard Server you can update the color codes in the following LESS file.

C:\Syncfusion\Dashboard Server\DashboardServer.Web\Content\Styles\LESS\Themes\Default.less

Please find the color code variables and its purpose below.

Common Variables

Variable Name	Purpose
@primary-color	This color is used for primary action buttons, link, check boxes, radio buttons and selected items
@primary-text-color	Primary text color of the application
@sub-text-color	Sub text color of the application
@validation-text-color	This color is used for error message
@success-text-color	This color is used for success message

Header

Varibale Name	Purpose
@header-bg-color	Application header background color
@header-text-color	Text color in header
@unread-notification-color	Unread notification icon color

Menu

Variable Name	Purpose
@menu-bg	Background color of the menu
@menu-active-bg	Selected menu item background color
@menu-icon-color	Icon color in the menu
@menu-hover-color	Menu hover background color
@menu-active-icon-color	Icon color when hovering the menu

Buttons

Variable Name	Purpose
@primary-btn-bg	Background color of primary button like Save button.
@primary-button-disabled	Text color of primary button when disabled
@primary-btn-hover	Background color of primary button when hover
@primary-btn-text-color	Text color of primary button
@primary-btn-disabled-bg	Background color of primary button when disabled
@secondary-btn-bg	Background color of secondary button like Close, Cancel buttons
@secondary-btn-text-color	Text color of secondary button
@secondary-btn-border	Border color for the secondary button
@secondary-btn-hover	Background color of secondary button when hover
@danger-btn-bg	Background color for critical action buttons like delete etc.
@link-btn-hover	Background color of the button that are links

Dashboards and Widgets page

Variable Name	Purpose
@item-panel-bg	Dashboards, idgets listing panel background color
@item-panel-border-color	Border color of the listing panel
@AuthorColor	Author Name, Sub Header text color
@item-select-bg	Selected item background color
@item-hover-bg	Hover color of the item listing panel
@item-count-bg	Background color of the number of dashboards in category

Grid

Variable Name	Purpose
@grid-header-bg	Grid header background color
@grid-content-bg	Grid content background color
@grid-footer-bg	Grid footer background color
@grid-border-color	Border color in the grid
@grid-hover-color	Row hover color in the grid
@grid-active-color	Row selection color in the grid
@grid-header-color	Color used for the header text in the grid
@grid-text-color	Color used for the contents in the grid
@grid-link-color	Color used for the links in grid

Admin Pages

Variable Name	Purpose
@admin-container-bg	Admin page container background
@admin-page-bg	Admin page background
@admin-body-border-color	Border color of the admin page container
@admin-pages-border-color	Border color below the admin page headers
@description-text-color	Description text color