We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load the dashboard in dark color (custom theme)

Platform: Dashboard Platform |
Control: Dashboard SDK |
Published Date: January 25, 2018 |
Last Revised Date: November 22, 2018

To load the Dashboard in the dark theme, follow the given steps:

  1. Customize the theme of the Dashboard by using the ‘customThemeSettings’ of the JavaScript API. To know more about the custom theme API, please refer the following link:

https://help.syncfusion.com/dashboard-platform/dashboard-sdk/styling-and-customization

 

  1. Use the following code snippet to enable the custom theme, and render the Dashboard in the dark theme.

$("#dashboard").ejDashboardViewer({

            serviceUrl: ‘Dashboard Service URL’,

            dashboardPath: ‘Path of the dashboard’,

   enableCustomTheming: true,

               customThemeSettings:{

                 "dashboard": {     

               "background-color": "#0c0d0f",    // dark color theme   

               "menu-hover-color": "#262A33",     

               "icon-hover-color": "#F2F2F2"               

                      },

                 ….

                 ….. //Refer the below JSON input is attached, download and copy the content and set to customThemeSettings.

          }

     });

 

  1. Find the JSON input for the dark color theme in the following link:

http://www.syncfusion.com/downloads/support/directtrac/196230/ze/DarkTheme_JSON-507902844

 

  1. Find the sample in the following link to load the Dashboard in the dark theme:

http://www.syncfusion.com/downloads/support/directtrac/196230/ze/Custom_theme-787958208

 

The following screenshot illustrates the above sample:

 
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon