How to Apply a Theme in Smart.Blazor

How to Apply a Theme in Smart.Blazor

Smart.Blazor provides multiple built-in themes that can be applied to your application with minimal setup. Themes control the look and feel of all Smart UI components and can be easily switched.

1. Always Include the Default Stylesheet

The smart.default.css file must always be included, regardless of which theme you want to use. It contains the base styles required for all components.

<link rel="stylesheet" href="_content/Smart.Blazor/styles/smart.default.css">

2. Include a Theme Stylesheet

Choose one of the theme files (e.g., smart.dark-purple.css, smart.fluent.css, smart.green.css, etc.) and include it after smart.default.css.

<link rel="stylesheet" href="_content/Smart.Blazor/styles/smart.default.css">
<link rel="stylesheet" href="_content/Smart.Blazor/styles/smart.dark-purple.css">

3. Apply the Theme in the <body> Tag

To activate a theme, set the theme attribute of the <body> tag to the theme’s name (without the .css extension).

<body theme="dark-purple">
    <app>Loading...</app>
</body>

4. Available Themes

The following themes are included by default:

  • fluent
  • bootstrap
  • dark-red
  • dark-teal
  • dark-turquoise
  • dark-cyan
  • dark-green
  • dark-indigo
  • dark-pink
  • dark-purple
  • green
  • indigo
  • orange
  • pink
  • purple
  • red
  • teal
  • turquoise
  • cyan

5. Dynamic Theme Switching

You can switch themes dynamically in Blazor using C# by modifying the theme attribute of the <body> element:

@code {
    void ChangeTheme(string themeName)
    {
        var body = document.Body;
        body.SetAttribute("theme", themeName);
    }
}

Call ChangeTheme("fluent") or any other theme to instantly switch the look of your app.

6. Customizing Themes

If you want to customize a theme, create a new CSS file that overrides the default variables. For example:

:root {
    --smart-primary-color: #6610F2;
    --smart-secondary-color: #E7D9F8;
}

Include your custom CSS after the theme stylesheet to apply your changes.

7. Best Practices

  • Always include smart.default.css first.
  • Include only one theme stylesheet at a time.
  • Use CSS variables to make theme customization easier.
  • Test your app with different themes to ensure consistent styling.

8. Example Full Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="_content/Smart.Blazor/styles/smart.default.css">
    <link rel="stylesheet" href="_content/Smart.Blazor/styles/smart.dark-purple.css">
    <link rel="stylesheet" href="custom-theme.css">
</head>
<body theme="dark-purple">
    <app>Loading...</app>
</body>
</html>

With this setup, you can use any built-in theme, switch themes dynamically, and customize colors to match your brand.