ASP.NET Web Forms and MVC — New Office 365 Dark Theme (v22.1)

ASP.NET Team Blog
29 July 2022

As you may already know, our most recent major update (v22.1) includes a new Office 365 Dark Theme for DevExpress ASP.NET Controls.

aspnet-office365-dark-theme

Many companies like Google, YouTube, Facebook, Twitter, and Reddit have recognized the benefits of dark themes, and have introduced a dark mode feature within their apps. Emma Lunn from Forbes believes that dark themes can:

  • Potentially reduce eye strain and dry eyes in low-light conditions
  • Use less energy so your phone battery will last longer
  • Some experts say dark mode can help people with light sensitivity or visual impairment
  • There will be less 'blue light' emitted from your phone - which can keep you awake if you use your device before you go to bed

How To Use New Theme

At design time, you can set the Theme Name attribute to the theme name in the Web.config file’s themes configuration section:

<devExpress>
     <themes enableThemesAssembly="true" styleSheetTheme="" theme="Office365Dark"/>
     ...
</devExpress>

At runtime, set the ASPxWebControl.GlobalTheme property to the theme name:

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
     DevExpress.Web.ASPxWebControl.GlobalTheme = "Office365Dark";
}

Unlike other themes, Office365Dark can automatically change a page's background color. This theme affects the background color of a web page when you apply the theme to:

  • A specific page (the DevExpress or ASP.NET mechanism).

  • The entire website (the DevExpress or ASP.NET mechanism). Note that the theme does not affect pages without DevExpress controls.

You can define a page's background color for the Office365Dark theme. To do this, use the following example of a CSS selector combination:

.dxTheme-Office365Dark > body {
    background-color: white;
}

Demo

Test out the new Dark theme by visiting any of our ASP.NET Control demos, click the settings icon at the top right, and select the "Office 365 Dark" option:

aspnet-office365-dark-theme-change-theme-demos

Try it now on this demo DevExpress ASP GridView — Large Database (Server Mode).

Your Feedback Matters

We'd love to know what you think of our new Office 365 Dark theme.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.