DevExpress Blazor components use the client-side Bootstrap framework to render their user interface. You can apply a Bootstrap-based theme to a Blazor application to change the appearance of all the components.
If you created an application with the Blazor App Microsoft template, the application uses the standard Bootstrap theme. This theme's stylesheet is in the wwwwroot/css/bootstrap folder and linked in the layout file's HEAD section:
In the Pages/_Host.cshtml file for Blazor Server.
In the wwwroot/index.html file for Blazor WebAssembly.
The Microsoft project template adds the NavMenu component and site.css file. This file contains CSS rules for NavMenu-related classes that have the same names as Bootstrap classes. When you place DevExpress Blazor components (like TreeView or Tabs) on a page, they can be rendered incorrectly due to rules defined in the site.css file. To resolve this issue, modify the site.css file and NavMenu component. Use the approaches described in How to inspect CSS rules and How to implement CSS-related solutions for DevExpress components to determine which CSS rules cause this issue.
Create the ThemeSwitcher folder and add a new ThemeSwitcher.razor component. Define the component's appearance, populate it with theme items, implement the visibility logic, and apply the selected theme on item click.
For Blazor Server, generate a link to the selected theme and pass this link to a separate service (LinkService that is implemented later).
For Blazor WebAssembly, link the selected theme directly in the component layout.