[dev-v5] Initial work to add a Theme API (and a Theme Designer to the demo)#4602
Open
[dev-v5] Initial work to add a Theme API (and a Theme Designer to the demo)#4602
Conversation
- Add color ramp calculation code (copied from React theme designer) - Add initial ThemeDesigner - Add Theme docs
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.1%
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds an initial Theme API for Fluent UI Blazor (v5 dev branch), including a ThemeService with JS interop, brand color ramp generation ported from the React Fluent UI Theme Designer, declarative theme attributes, localStorage persistence, and a demo Theme Designer page.
Changes:
- Add
IThemeService/ThemeServicewith JS interop for theme management, registered via DI, plusThemeTypeandThemeModeenums - Add brand color ramp calculation TypeScript code (ported from React theme designer) and comprehensive
Theme.tsrewrite with localStorage persistence, system theme change listener, and declarative attribute support - Add Theme Designer demo page, theme documentation, and fix layout header CSS token usage
Reviewed changes
Copilot reviewed 18 out of 19 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
src/Core/Utilities/Theme/IThemeService.cs |
New public interface defining theme API methods |
src/Core/Utilities/Theme/ThemeService.cs |
Implementation of IThemeService using JS interop |
src/Core/Enums/ThemeType.cs |
New enum: Default, Teams |
src/Core/Enums/ThemeMode.cs |
New enum: Light, Dark, System |
src/Core/Extensions/ServiceCollectionExtensions.cs |
Register IThemeService in DI + trailing comma fixes |
src/Core.Scripts/src/Utilities/Theme.ts |
Major rewrite with brand theme support, localStorage, system listener |
src/Core.Scripts/src/d-ts/Blazor.d.ts |
Updated type declarations for new theme API |
src/Core.Scripts/src/Startup.ts |
Call initializeThemeSettings early, remove setDefaultTheme |
src/Core.Scripts/src/Utilities/BrandRamp/* |
Ported color ramp generation from React theme designer |
src/Core/Components/Layout/FluentLayoutItem.razor.css |
Fix header background token (was using hover for normal state) |
examples/Demo/.../Themes.md |
Theme documentation |
examples/Demo/.../ThemeDesigner.razor |
Interactive theme designer demo |
examples/Demo/.../ThemeDesigner.razor.css |
Styling for theme designer |
examples/Demo/.../SystemColorsTable.razor |
Use brand foreground token |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Outdated
Show resolved
Hide resolved
dvoituron
requested changes
Mar 7, 2026
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Themes.md
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/ThemeDesigner.razor
Outdated
Show resolved
Hide resolved
- Rework ThemeDesigner to use Fluent components - Refactor TS API - Add TS API doc
- Use C# Theme class in API calls - Update Theme readme
- Tweak Designer behavior
- Add option to apply theme to an element - Update docs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ToDo:
Theme Designer:
We offer two ways to set a custom brand color in your Blazor application:
Set the Brand color declaratively
You can add a
data-themeattribute to the<body>tag in your HTML and set its value to 'light', 'dark', or 'system' to specify the theme mode. This allowsyou to configure the theme mode.
You can add a
data-theme-colorattribute to the<body>tag in your HTML and set its value to a valid hex color code (e.g., #FF0000). The library willautomatically detect this attribute, generate a color ramp based on the provided color, and apply it to the application.
The declarative
data-theme-*attributes are treated as developer-provided overrides and are not persisted tolocalStorage.To have acces to all variables that are available to customize a theme, you can use the methods described below.
Set the Brand color with code
A full API is available for configuring the theme programmatically in your Blazor application. This allows you to dynamically change the theme based on user
interactions or other conditions in your application.
The following methods are available for setting the brand color programmatically:
CreateCustomThemeAsync(ThemeSettings settings)Themebased on the specified settings. The returned theme can be modified by the caller before it is applied.SetThemeAsync(Theme theme)Theme(for example created withCreateCustomThemeAsync). This applies the theme without generating it from brand settings.SetThemeAsync(ThemeType type)DefaultorTeams) using the current effective mode (light or dark).SetThemeAsync(ThemeType type, ThemeMode mode)DefaultorTeams) and a specific mode (Light,Dark, orSystem).SetThemeAsync(string color, bool isExact = false)#FF0000).isExactcontrols whether the exact provided color is used for the brand background. UsesThemeMode.System.SetThemeAsync(ThemeSettings settings)-0.5to0.5), vibrancy (-0.5to0.5), mode, and exact color behavior.SetLightThemeAsync()Defaulttheme toLightmode.SetDarkThemeAsync()Defaulttheme toDarkmode.SetSystemThemeAsync()Defaulttheme toSystemmode.SetTeamsLightThemeAsync()Teamstheme toLightmode.SetTeamsDarkThemeAsync()Teamstheme toDarkmode.SetTeamsSystemThemeAsync()Teamstheme toSystemmode.ClearThemeSettingsAsync()localStorageand resets the theme to the default settings.IsSystemDarkAsync()IsDarkModeAsync()GetColorRampAsync()nullif no custom ramp has been generated yet.GetColorRampFromSettingsAsync(ThemeSettings settings)nullfor invalid inputs.SwitchDirectionAsync()SwitchThemeAsync()trueif the new effective theme is dark.SetThemeToElementAsync(ElementReference element, ThemeSettings settings)The SetThemeAsync result is cached in
localStorageso that the theme configuration can be persisted across sessions and restored on subsequent visitsto the application. The only exception to this is when using the
SetThemeAsync(Theme theme)overload, which applies afully custom theme without caching it.