[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Collapse]Dashboard
 [Expand]Getting Started
 [Expand]Basic Concepts and Terminology
 [Expand]Common Features
 [Collapse]Creating the Designer and Viewer Applications
  [Expand]WinForms Designer
  [Expand]WinForms Viewer
  [Collapse]Web Dashboard
    Web Dashboard Technical Overview
    Supported Browsers
    Required Client Libraries
   [Expand]ASP.NET Web Forms Dashboard Control
   [Expand]ASP.NET MVC Dashboard Extension
   [Expand]ASP.NET Core Dashboard Control
   [Collapse]HTML JavaScript Dashboard Control
     Client-Side Configuration (Modular Approach)
     Client-Side Configuration (Global Namespaces)
     Server-Side Configuration (ASP.NET MVC)
     Server-Side Configuration (ASP.NET Core)
     Client-Side Customization
     Designer and Viewer Modes
     Appearance Customization
    [Expand]Extend Web Dashboard Functionality
    [Expand]Create a Custom Item
    Mobile Layout
   [Expand]Error Logging
    Security Considerations
    Microsoft Azure Specifics
   [Expand]UI Elements
  [Expand]WPF Viewer
  [Expand]Web Viewer
 [Expand]Creating Dashboards
 [Expand]Visual Studio Integration
  End-User Documentation
  Localization
 [Expand]Redistribution and Deployment
  Video Tutorials
 [Expand]Examples
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Appearance Customization

The HTML JavaScript Dashboard control supports the Light and Dark color schemes. If necessary, you can enable a compact theme designed to fit a large number of elements within a web page.

Light Dark

You need to attach a specific stylesheet to the HTML page to paint the JavaScript Dashboard control using a color scheme. You can find the available CSS files using the following path:

C:\Program Files (x86)\DevExpress 18.2\Components\Sources\DevExpress.Dashboard\DevExpress.Dashboard.Web\Scripts\Bundle

CSS File Description
dx.dashboard-control.bundle.light.css Enables the Light color scheme.
dx.dashboard-control.bundle.light.compact.css Enables the compact Light color scheme.
dx.dashboard-control.bundle.dark.css Enables the Dark color scheme.
dx.dashboard-control.bundle.dark.compact.css Enables the compact Dark color scheme.

Attach the corresponding stylesheet to the <head> section before the script files to enable a color scheme:

Expanded Compact Theme Specifics

Note that compact themes affect only specific dashboard items that include:

Is this topic helpful?​​​​​​​