Skip to content

Fluent Next Theme: Add New Topics & Old Topic Updates #9119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arman-boyakhchyan wants to merge 7 commits into
base: feature/26_2_new_fluent_theme_with_design_tokens
Choose a base branch
from
Open

Fluent Next Theme: Add New Topics & Old Topic Updates #9119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ded4219
Fluent Next Theme: Add New Topics & Old Topic Updates
arman-boyakhchyan Aug 19, 2026
6c46a34
Add Updates & Code Snippet Fixes
arman-boyakhchyan Aug 21, 2026
0114e71
Update Following Feedback
arman-boyakhchyan Aug 26, 2026
f13ac7e
Add Additional Updates
arman-boyakhchyan Aug 26, 2026
0b173e7
Add Color Variable DS Links
arman-boyakhchyan Aug 26, 2026
cd0a7fa
Add Final Touches
arman-boyakhchyan Aug 26, 2026
87e7854
Update Following Feedback
arman-boyakhchyan Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions concepts/60 Themes and Styles/00 Styling Overview/00 Styling Overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
The appearance of DevExtreme-powered applications depends on the app's theme and applied customizations. This topic describes all available options you can use to customize your DevExtreme-powered application.
14 changes: 14 additions & 0 deletions concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
DevExtreme ships with a set of built-in themes:

- **Fluent Next**
[Design System](https://docs.devexpress.com/DesignSystem/405636/foundation)-based themes that use CSS variables to declare color, typography, spacing, border, opacity, and shadow styles. Key features include:

@EugeniyKiyashko EugeniyKiyashko Aug 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
[Design System](https://docs.devexpress.com/DesignSystem/405636/foundation)-based themes that use CSS variables to declare color, typography, spacing, border, opacity, and shadow styles. Key features include:
[Design System](https://docs.devexpress.com/DesignSystem/405636/foundation) - based themes that use CSS variables to declare color, typography, spacing, border, opacity, and shadow styles. Key features include:

@arman-boyakhchyan arman-boyakhchyan Aug 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a typо, this text will be displayed as "Design Sytem-based themes" on the site, worded identically to our Blazor Fluent's description on https://docs.devexpress.com/Blazor/404821/styling-and-themes/styling-and-themes#themes


- Predefined accent colors
- Custom accent color support
- Light and dark modes
- Compact mode
- Theme customization using public `--dxds-*` CSS variables

- **Fluent, Material, and Generic**
Themes that use SCSS to implement styles. For more information, refer to the following help topic: [Predefined Themes](/Documentation/Guide/Themes_and_Styles/Predefined_Themes/).

3 changes: 3 additions & 0 deletions concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
You can apply custom CSS styles to specific classes to customize DevExtreme component appearance. You can also use these CSS classes in custom elements to ensure a consistent look and feel across your app.

For a list of common DevExtreme classes, refer to the following help topic: [CSS Classes](/Documentation/ApiReference/UI_Components/CSS_Classes/).
1 change: 1 addition & 0 deletions .../60 Themes and Styles/00 Styling Overview/15 Fluent Next Theme Customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
To customize Fluent Next themes, refer to the following help topic: [Fluent Next Theme Customization](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/).
0 ...0 Themes and Styles/00 Styling Methods.md → ...0 Themes and Styles/02 Styling Methods.md
View file
Open in desktop
File renamed without changes.
241 changes: 142 additions & 99 deletions concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,69 @@
DevExtreme provides Generic, Generic Compact, Material Design, and Fluent (all trademarks or registered trademarks are property of their respective owners) themes. These themes are available in the following colors:
DevExtreme ships with the following themes (all trademarks or registered trademarks are property of their respective owners):

@EugeniyKiyashko EugeniyKiyashko Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

05 Predefined Themes/00 Predefined Themes.md:306 (+ the rename of 00 Styling Methods.md → 02 Styling Methods.md)

The rename leaves 9 topics pointing at the old file path /concepts/60%20Themes%20and%20Styles/00%20Styling%20Methods.md. Verified against the base branch - line 306 of this file plus:

concepts/60 Themes and Styles/10 HTML-Based Components Customization/HTML-Based Components Customization.md
concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/03 Configure Stylesheets.md
concepts/40 Angular Components/10 Getting Started/30 Other Approaches/{04 Using Webpack/04,05 Using Ionic/05,06 Using Rollup/04} Import Stylesheets.md
concepts/50 React Components/05 Add DevExtreme to a React Application/40 Import Stylesheets.md
concepts/55 Vue Components/05 Add DevExtreme to a Vue Application/40 Import Stylesheets.md
concepts/Common/Security Considerations/20 HTML Encoding/30 Potentially Vulnerable API/customizeTooltip.md

Please update all of them (or keep the original file name).

@arman-boyakhchyan arman-boyakhchyan Aug 26, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have renamed Styling Methods to add the new Styling Overview topic at the top of this section within the site's left-hand menu. Renamings like these, where only the number at the front of the file name is changed, do not break links. Our docgen mechanism will update 00 > 02 automatically, we do not add such updates by hand. Link updates are only necessary when text changes.


## Generic Themes
- **Fluent Next**
- **Fluent**
- **Material Design**
- **Generic**

<div id="generic-themes" class="theme-images">
<div>
<p>Light</p>
<img src="/images/themes/generic-light.png" />
</div>
<div>
<p>Light Compact</p>
<img src="/images/themes/generic-light-compact.png" />
</div>
<div>
<p>Dark</p>
<img src="/images/themes/generic-dark.png" />
</div>
<div>
<p>Dark Compact</p>
<img src="/images/themes/generic-dark-compact.png" />
</div>
The following colors are available out of the box:

## Fluent Next Themes

<div id="fluent-next-themes" class="theme-images">

@EugeniyKiyashko EugeniyKiyashko Aug 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Fluent Next block reuses the Fluent screenshots (fluent-default.png, fluent-compact.png, fluent-dark-default.png, fluent-dark-compact.png) - the same four images as the Fluent section below, so both themes look identical on this page. Are the Fluent Next captures still pending?

<div>
<p>Carmine</p>
<img src="/images/themes/generic-carmine.png" />
<p>Blue Light</p>
<img src="/images/themes/fluent-default.png" />
</div>
<div>
<p>Carmine Compact</p>
<img src="/images/themes/generic-carmine-compact.png" />
<p>Blue Light Compact</p>
<img src="/images/themes/fluent-compact.png" />
</div>
<div>
<p>Soft Blue</p>
<img src="/images/themes/generic-softblue.png" />
<p>Blue Dark</p>
<img src="/images/themes/fluent-dark-default.png" />
</div>
<div>
<p>Soft Blue Compact</p>
<img src="/images/themes/generic-softblue-compact.png" />
<p>Blue Dark Compact</p>
<img src="/images/themes/fluent-dark-compact.png" />
</div>
</div>

[note] Fluent Next themes ship with 11 predefined accent colors and support custom accent colors. Refer to the following help topic for more information: [Fluent Next Theme Customization - Accent Colors](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/#Accent_Colors).

## Fluent Themes

<div id="fluent-themes" class="theme-images">
<div>
<p>Dark Moon</p>
<img src="/images/themes/generic-darkmoon.png" />
<p>Blue Light</p>
<img src="/images/themes/fluent-default.png" />
</div>
<div>
<p>Dark Moon Compact</p>
<img src="/images/themes/generic-darkmoon-compact.png" />
<p>Blue Light Compact</p>
<img src="/images/themes/fluent-compact.png" />
</div>
<div>
<p>Dark Violet</p>
<img src="/images/themes/generic-darkviolet.png" />
<p>Blue Dark</p>
<img src="/images/themes/fluent-dark-default.png" />
</div>
<div>
<p>Dark Violet Compact</p>
<img src="/images/themes/generic-darkviolet-compact.png" />
<p>Blue Dark Compact</p>
<img src="/images/themes/fluent-dark-compact.png" />
</div>
<div>
<p>Green Mist</p>
<img src="/images/themes/generic-greenmist.png" />
<p>SaaS Light</p>
<img src="/images/themes/saas-default-light.png" />
</div>
<div>
<p>Green Mist Compact</p>
<img src="/images/themes/generic-greenmist-compact.png" />
<div>
<p>SaaS Light Compact</p>
<img src="/images/themes/saas-compact-light.png" />
</div>
<div>
<p>Contrast</p>
<img src="/images/themes/generic-contrast.png" />
<div>
<p>SaaS Dark</p>
<img src="/images/themes/saas-default.png" />
</div>
<div>
<p>Contrast Compact</p>
<img src="/images/themes/generic-contrast-compact.png" />
<div>
<p>SaaS Dark Compact</p>
<img src="/images/themes/saas-compact.png" />
</div>
</div>

Expand Down Expand Up @@ -154,40 +152,72 @@ DevExtreme provides Generic, Generic Compact, Material Design, and Fluent (all t
</div>
</div>

## Fluent Themes
## Generic Themes

<div id="fluent-themes" class="theme-images">
<div id="generic-themes" class="theme-images">
<div>
<p>Blue Light</p>
<img src="/images/themes/fluent-default.png" />
<p>Light</p>
<img src="/images/themes/generic-light.png" />
</div>
<div>
<p>Blue Light Compact</p>
<img src="/images/themes/fluent-compact.png" />
<p>Light Compact</p>
<img src="/images/themes/generic-light-compact.png" />
</div>
<div>
<p>Blue Dark</p>
<img src="/images/themes/fluent-dark-default.png" />
<p>Dark</p>
<img src="/images/themes/generic-dark.png" />
</div>
<div>
<p>Blue Dark Compact</p>
<img src="/images/themes/fluent-dark-compact.png" />
<p>Dark Compact</p>
<img src="/images/themes/generic-dark-compact.png" />
</div>
<div>
<p>SaaS Light</p>
<img src="/images/themes/saas-default-light.png" />
<p>Carmine</p>
<img src="/images/themes/generic-carmine.png" />
</div>
<div>
<p>SaaS Light Compact</p>
<img src="/images/themes/saas-compact-light.png" />
<div>
<p>Carmine Compact</p>
<img src="/images/themes/generic-carmine-compact.png" />
</div>
<div>
<p>SaaS Dark</p>
<img src="/images/themes/saas-default.png" />
<div>
<p>Soft Blue</p>
<img src="/images/themes/generic-softblue.png" />
</div>
<div>
<p>SaaS Dark Compact</p>
<img src="/images/themes/saas-compact.png" />
<div>
<p>Soft Blue Compact</p>
<img src="/images/themes/generic-softblue-compact.png" />
</div>
<div>
<p>Dark Moon</p>
<img src="/images/themes/generic-darkmoon.png" />
</div>
<div>
<p>Dark Moon Compact</p>
<img src="/images/themes/generic-darkmoon-compact.png" />
</div>
<div>
<p>Dark Violet</p>
<img src="/images/themes/generic-darkviolet.png" />
</div>
<div>
<p>Dark Violet Compact</p>
<img src="/images/themes/generic-darkviolet-compact.png" />
</div>
<div>
<p>Green Mist</p>
<img src="/images/themes/generic-greenmist.png" />
</div>
<div>
<p>Green Mist Compact</p>
<img src="/images/themes/generic-greenmist-compact.png" />
</div>
<div>
<p>Contrast</p>
<img src="/images/themes/generic-contrast.png" />
</div>
<div>
<p>Contrast Compact</p>
<img src="/images/themes/generic-contrast-compact.png" />
</div>
</div>

Expand All @@ -196,29 +226,37 @@ Each theme is a stylesheet that contains a collection of CSS classes. The follow
<div id="theme-files">
<div class="first-level">
<div class="second-level">
<div class="header">Generic</div>
<div class="header">Fluent Next</div>
<ul>
<li><code>dx.light.css</code></li>
<li><code>dx.dark.css</code></li>
<li><code>dx.carmine.css</code></li>
<li><code>dx.softblue.css</code></li>
<li><code>dx.darkmoon.css</code></li>
<li><code>dx.darkviolet.css</code></li>
<li><code>dx.greenmist.css</code></li>
<li><code>dx.contrast.css</code></li>
<li><code>dx.fluent-next.blue.light.css</code></li>
<li><code>dx.fluent-next.blue.dark.css</code></li>
</ul>
</div>
<div class="second-level">
<div class="header">Generic Compact</div>
<div class="header">Fluent Next Compact</div>
<ul>
<li><code>dx.light.compact.css</code></li>
<li><code>dx.dark.compact.css</code></li>
<li><code>dx.carmine.compact.css</code></li>
<li><code>dx.softblue.compact.css</code></li>
<li><code>dx.darkmoon.compact.css</code></li>
<li><code>dx.darkviolet.compact.css</code></li>
<li><code>dx.greenmist.compact.css</code></li>
<li><code>dx.contrast.compact.css</code></li>
<li><code>dx.fluent-next.blue.light.compact.css</code></li>
<li><code>dx.fluent-next.blue.dark.compact.css</code></li>
</ul>
</div>
</div>
<div class="first-level">
<div class="second-level">
<div class="header">Fluent</div>
<ul>
<li><code>dx.fluent.blue.light.css</code></li>
<li><code>dx.fluent.blue.dark.css</code></li>
<li><code>dx.fluent.saas.light.css</code></li>
<li><code>dx.fluent.saas.dark.css</code></li>
</ul>
</div>
<div class="second-level">
<div class="header">Fluent Compact</div>
<ul>
<li><code>dx.fluent.blue.light.compact.css</code></li>
<li><code>dx.fluent.blue.dark.compact.css</code></li>
<li><code>dx.fluent.saas.light.compact.css</code></li>
<li><code>dx.fluent.saas.dark.compact.css</code></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -256,24 +294,32 @@ Each theme is a stylesheet that contains a collection of CSS classes. The follow
</div>
<div class="first-level">
<div class="second-level">
<div class="header">Fluent</div>
<div class="header">Generic</div>
<ul>
<li><code>dx.fluent.blue.light.css</code></li>
<li><code>dx.fluent.blue.dark.css</code></li>
<li><code>dx.fluent.saas.light.css</code></li>
<li><code>dx.fluent.saas.dark.css</code></li>
<li><code>dx.light.css</code></li>
<li><code>dx.dark.css</code></li>
<li><code>dx.carmine.css</code></li>
<li><code>dx.softblue.css</code></li>
<li><code>dx.darkmoon.css</code></li>
<li><code>dx.darkviolet.css</code></li>
<li><code>dx.greenmist.css</code></li>
<li><code>dx.contrast.css</code></li>
</ul>
</div>
<div class="second-level">
<div class="header">Fluent Compact</div>
<div class="header">Generic Compact</div>
<ul>
<li><code>dx.fluent.blue.light.compact.css</code></li>
<li><code>dx.fluent.blue.dark.compact.css</code></li>
<li><code>dx.fluent.saas.light.compact.css</code></li>
<li><code>dx.fluent.saas.dark.compact.css</code></li>
<li><code>dx.light.compact.css</code></li>
<li><code>dx.dark.compact.css</code></li>
<li><code>dx.carmine.compact.css</code></li>
<li><code>dx.softblue.compact.css</code></li>
<li><code>dx.darkmoon.compact.css</code></li>
<li><code>dx.darkviolet.compact.css</code></li>
<li><code>dx.greenmist.compact.css</code></li>
<li><code>dx.contrast.compact.css</code></li>
</ul>
</div>
</div>
</div>
</div>

CSS themes are designed to customize HTML-based UI components. However, [SVG-based UI components](/concepts/60%20Themes%20and%20Styles/00%20Styling%20Methods.md '/Documentation/Guide/Themes_and_Styles/Styling_Methods/') use their own themes to assume an appearance that matches a particular CSS theme. Refer to the [Themes](/concepts/60%20Themes%20and%20Styles/20%20SVG-Based%20Components%20Customization/15%20Themes/00%20Themes.md '/Documentation/Guide/Themes_and_Styles/SVG-Based_Components_Customization/#Themes') article for more information on themes in SVG-based UI components.
Expand Down Expand Up @@ -324,7 +370,4 @@ CSS themes are designed to customize HTML-based UI components. However, [SVG-bas
margin-right: 15px;
vertical-align: middle;
}
.second-level:last-child {
border-left: 1px solid #e6e6e6;
}
</style>
6 changes: 6 additions & 0 deletions ...pts/60 Themes and Styles/05 Predefined Themes/50 Apply a Theme/05 Using SCSS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
[note]

This section does not apply to Fluent Next themes.

[/note]

You can import a theme bundle from the `bundles` folder of the `devextreme` package into the root `.scss` file:

/* @use 'devextreme/scss/bundles/dx.theme_name.scss'; */
Expand Down
6 changes: 6 additions & 0 deletions concepts/60 Themes and Styles/05 Predefined Themes/55 Color Swatches.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
[note]

This section does not apply to Fluent Next themes. To customize these themes, refer to the following help topic: [Fluent Next Theme Customization](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/).

[/note]

Color swatches are secondary color schemes used alongside a primary color scheme. You can use them to stylize parts of your application differently, for instance, when the navigation sidebar should be dark and the content area light.

A color swatch is defined by scoped CSS rules that are prefixed with a specific selector: `dx-swatch-xxx` (for instance, `dx-swatch-green`). To apply a color swatch to a part of an HTML document, wrap this part as follows:
Expand Down
15 changes: 15 additions & 0 deletions ... Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,21 @@ You can use this approach only if the themes belong to the same group. For insta

The method accepts the `data-theme` attribute value. For example, if you want to switch to `dx.generic.dark`, pass `generic.dark` (without the 'dx' prefix) as an argument in the method. For a custom theme, specify the theme you used as a base. If both of your themes are derived from the same base, get the `data-theme` value from the `font-family` value of the `dx-theme-marker` CSS class, which is located in each theme's CSS file.

[note]

If you use an accent color stylesheet with Fluent Next themes, note the following specifics:

- You do not need to switch the accent stylesheet when switching themes. These stylesheets apply to all variations of Fluent Next (light and dark modes, standard and compact sizes).
- Ensure you load the accent stylesheet after all Fluent Next stylesheets. We recommend that you order theme and accent stylesheets as follows:

<link rel="dx-theme" data-theme="fluent-next.blue.dark" href="css/dx.fluent-next.blue.dark.css" data-active="false">
<link rel="dx-theme" data-theme="fluent-next.blue.light" href="css/dx.fluent-next.blue.light.css" data-active="false">
<link rel="stylesheet" href="node_modules/devextreme/dist/css/accents/rose.css">

Refer to the following help topic for more information about accent colors in Fluent Next themes: [Fluent Next Theme Customization - Accent Colors](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/#Accent_Colors).

[/note]

If you use SVG components, you should also call the [refreshTheme()](/api-reference/50%20Common/utils/viz/refreshTheme().md '/Documentation/ApiReference/Common/Utils/viz/#refreshTheme') method to update their theme. The following example shows how to apply the Generic Contrast theme:

---
Expand Down
6 changes: 6 additions & 0 deletions ...d Themes/60 Switch Between Themes at Runtime/7 Switch Between Color Swatches.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
[note]

This section does not apply to Fluent Next themes. To customize these themes, refer to the following help topic: [Fluent Next Theme Customization](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/).

[/note]

You can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet" target="_blank">StyleSheet API</a> to switch between color swatches. In the following code, theme swatches are called `theme.custom-scheme.light.css` and `theme.custom-scheme.dark.css` and are placed in the same folder as `index.html`. The code uses SelectBox to implement the swatch selector. To switch between themes too, call [DevExpress.ui.themes.current(themeName)](/api-reference/50%20Common/utils/ui/themes/current(themeName).md '/Documentation/ApiReference/Common/utils/ui/themes/#currentthemeName') method in the `onValueChanged` callback.

---
Expand Down
1 change: 1 addition & 0 deletions ...Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fluent Next themes are based on the DevExpress Design System and support multiple customization options.

@alexfi1in alexfi1in Aug 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we specify that Fluent Next themes are based on the Design System Foundation and add a link to the corresponding documentation?

Suggested wording:

Fluent Next themes are based on the Design System Foundation and support multiple customization options.

Loading