Theming code sample on website is incorrect

[kephax]

While trying to implement themes as described here:

https://www.fluentui-blazor.net/DesignTheme

There have been many issues because the examples are incomplete.

The following line of code was essential for getting the theme to work at all
@rendermode InteractiveServer

Here the code sample that works in setting the theme (but not retaining it):

`@page "/settings"
@rendermode InteractiveServer

<PageTitle>Settings</PageTitle>

<FluentDesignTheme Mode="@Mode" OfficeColor="@OfficeColor" />

<FluentDesignTheme @bind-Mode="@Mode"
                   @bind-OfficeColor="@OfficeColor"
                   OnLoaded="@OnLoaded"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="theme" />


    <FluentGrid>

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

         <FluentGridItem>
            <FluentSelect Label="Color"
                          Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
                              
                          @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> 
        <FluentButton Appearance="Appearance.Accent" OnClick="PickRandomColor">Feeling lucky?</FluentButton>
    </FluentGrid>



<h2>User settings</h2>
<p><FluentTextField Label="E-mail" Placeholder="Your e-mail" /></p>
<p><FluentTextField Label="Password" Placeholder="Your password" /></p>


<h2>Delete account</h2>
<p><FluentButton BackgroundColor="#c00">Request account to be deleted</FluentButton></p>

@code
{
    public DesignThemeModes Mode { get; set; }
    public OfficeColor? OfficeColor { get; set; }

    // public string DemoLogger = new();

    void OnLoaded(LoadedEventArgs e)
    {
        Mode = DesignThemeModes.System;
    }


    void OnLuminanceChanged(LuminanceChangedEventArgs e)
    {
        this.Mode = Mode;
        this.OfficeColor = OfficeColor;
    }

    void PickRandomColor()
    {
        this.OfficeColor = OfficeColorUtilities.GetRandom();
    }


}`

The localstorage values are not set properly and not retained

[vnbaaij]

Having the rendermode needed or not is part of the choices you make when starting your project.

With regards to the .NET 8 templates, the library and interactivity, we are adding the following to the homepage:

On you sample code. Why do you have toe FluentDesignSytem components on your page?