如何为 Blazor 创建 Fluent UI 自定义主题

Question

所以我正在查看设计主题文档https://www. Fluentui-blazor.net/DesignTheme

看起来在我的 App.razor 中我应该像这样创建自定义主题：

<FluentDesignTheme CustomColor="#00FFFF" StorageName="customtheme" />

这意味着将记录添加到我的本地存储中，如下所示：

"customtheme" = {"primaryColor": "#00FFFF"}

但是这个主题没有出现在我的本地存储中。

如何创建自定义主题并按需将其应用到组件？我不想更改我的整个应用程序，但即使我这样做了，我也无法让记录的示例在我的 v4.3.1 项目中运行。任何帮助将不胜感激！也许有人有一个示例存储库我可以查看主题？阅读文档后，我不确定 Fluent UI 主题系统是否有效或是否能满足我的需求（创建主题然后将其应用到组件）

谢谢！

Answer 1

将此添加到您的

<body/>

标签的末尾。

    ...
    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
    <loading-theme storage-name="theme"></loading-theme>
</body>

Options.razor

页面设置主题。

@page "/options"
@rendermode InteractiveServer

<PageTitle>Options</PageTitle>

<FluentDesignTheme @bind-Mode="@Mode"
                   @bind-CustomColor="@CustomColor"
                   @bind-OfficeColor="@OfficeColor"
                   StorageName="theme" />
<FluentSwitch @bind-Value=UseCustomColor Label="@(UseCustomColor ? "Custom Colours": "Office Colours")" />
@if (UseCustomColor)
{
    <FluentGrid>
        <FluentGridItem>
            <FluentSelect Label="Theme"
                          Width="250px"
                          Items="@(Enum.GetValues<DesignThemeModes>())"
                          @bind-SelectedOption="@Mode" />
        </FluentGridItem>
        <FluentGridItem>
            <FluentStack Orientation="Orientation.Vertical" VerticalGap="4">
                <FluentLabel>Color</FluentLabel>
                <input type="color" @bind=@CustomColor @bind:event="oninput" style="height:32px;margin:0;padding:0;" />
            </FluentStack>
        </FluentGridItem>
    </FluentGrid>
}
else
{

    <FluentGrid>
        <FluentGridItem>
            <FluentSelect Label="Theme"
                          Width="250px"
                          Items="@(Enum.GetValues<DesignThemeModes>())"
                          @bind-SelectedOption="@Mode" />
        </FluentGridItem>

        <FluentGridItem>
            <FluentSelect Label="Color"
                          Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
                          Height="200px"
                          Width="250px"
                          @bind-SelectedOption="@OfficeColor">
                <OptionTemplate>
                    <FluentStack>
                        <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                    Color="Color.Custom"
                                    CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" />
                        <FluentLabel>@context</FluentLabel>
                    </FluentStack>
                </OptionTemplate>
            </FluentSelect>
        </FluentGridItem>
    </FluentGrid>
}
<FluentGrid Style="margin: 30px 0px; padding: 30px; border: 1px solid var(--accent-fill-rest);">
    <FluentGridItem>
        <FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" />
    </FluentGridItem>
    <FluentGridItem>
        <FluentLabel>Example of content</FluentLabel>
    </FluentGridItem>
    <FluentGridItem>
        <FluentButton Appearance="Appearance.Outline">Outline button</FluentButton>
    </FluentGridItem>
    <FluentGridItem>
        <FluentButton Appearance="Appearance.Accent">Accent button</FluentButton>
    </FluentGridItem>
</FluentGrid>

@code {
    private bool useCustomColor;
    private string? customColor = null;

    public DesignThemeModes Mode { get; set; }

    public OfficeColor? OfficeColor { get; set; }
    public string? CustomColor
    {
        get => customColor;
        set
        {
            customColor = value;
            UseCustomColor = (value is not null);
        }
    }
    public bool UseCustomColor
    {
        get => this.useCustomColor;
        set
        {
            if (value is true)
            {
                this.OfficeColor = null;
            }
            else
            {
                this.customColor = null;
            }

            this.useCustomColor = value;
        }
    }
}