Appearance Customization

• May 29, 2019
• 2 minutes to read

This topic describes how to change the color scheme used to paint a Web Dashboard. If necessary, you can enable a compact theme designed to fit a large number of elements within a web page.

The ASP.NET MVC Dashboard extension allows you to apply two color schemes used to paint the dashboard - Light and Dark.

Light	Dark

To apply a required color scheme, pass its name as the optional clientUIControlColorScheme parameter to the ExtensionsFactory.GetStyleSheets method.

View code:

C#

@Html.DevExpress().GetStyleSheets("dark",
    // ...
    new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
) 
// ...

VB.NET

@Html.DevExpress().GetStyleSheets("dark",
    ' ...
    New StyleSheet With {.ExtensionSuite = ExtensionSuite.Dashboard }
)
' ...

As an alternative, use the ASPxWebClientUIControl.GlobalColorScheme property to specify the color scheme.

C#

using DevExpress.Web;
//...

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ASPxWebClientUIControl.GlobalColorScheme = "dark";
            return View();
        }
    //...
    }

VB.NET

Imports DevExpress.Web
' ...

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index() As ActionResult
        ASPxWebClientUIControl.GlobalColorScheme = "dark"
        Return View()
        ' ...
    End Function
End Class

The following color schemes are supported.

Color scheme	Description
ASPxDashboard.ColorSchemeLight	Identifies the Light color scheme.
ASPxDashboard.ColorSchemeLightCompact	Identifies the Light compact color scheme.
ASPxDashboard.ColorSchemeDark	Identifies the Dark color scheme.
ASPxDashboard.ColorSchemeDarkCompact	Identifies the Dark compact color scheme.

Compact Theme Specifics

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

• Grid
• Pivot
• Filter Elements