Theme & Site Settings

Every PowerPortalsPro portal ships with a built-in side panel that lets your visitors switch themes, accent colors, text direction, and language without any custom UI work on your part. The panel is launched from the <SiteSettingsButton> — a small gear icon you place in the page header — and the rest of the framework reacts live to whatever the visitor picks.

Try it in this demo

Look in the top-right of every page in this demo for the gear icon — the same <SiteSettingsButton> wired up in this site's MainLayout.razor. Click it and a side panel opens with:

• Theme — toggle between Light, Dark, and System (System follows the OS preference and updates live when it changes).
• Color — pick a brand accent color. The grid, buttons, links, and focus rings all recolor to match.
• Direction — flip the entire layout between left-to-right and right-to-left to preview your RTL story.
• Language — switch between every culture configured on the server (this demo's gear hides this section; your own portal can show it via AllowLanguageChange).

Note

Your selection persists in localStorage under the key supplied via <ThemeProvider StorageName="…">, so a refresh keeps your choice. Hit Reset settings at the bottom of the panel to clear the preference and fall back to the theme defaults.

Wiring it up in your own portal

Drop a <SiteSettingsButton> into your MainLayout.razor header alongside the rest of your top-bar controls, and a <ThemeProvider> at the bottom of the layout so the panel has a theme to drive. The snippet below mirrors how this demo's MainLayout.razor wires it up:

@* MainLayout.razor — header slot *@
<FluentStack Orientation="Orientation.Horizontal"
             HorizontalAlignment="HorizontalAlignment.End"
             VerticalAlignment="VerticalAlignment.Center">
    <ProfileMainMenu />
    <SiteSettingsButton AllowColorChange="true"
                        AllowLanguageChange="false"
                        AllowRightToLeftChange="true"
                        AllowThemeChange="true" />
</FluentStack>

@* … the rest of MainLayout.razor … *@

@* Bottom of the layout — drives the theme the panel just changed *@
<ThemeProvider StorageName="theme" />

Note

StorageName on <ThemeProvider> namespaces the per-user preferences in localStorage. Use a name unique to your portal so multiple portals on the same domain don't clash.

Which sections to show

Each section of the panel is gated by a boolean parameter on <SiteSettingsButton>. Set the ones you want hidden to false; the panel reflows around them.

• AllowLanguageChange — defaults to true. Show the language picker. Set to false on single-language portals so the section doesn't show up empty.
• AllowThemeChange — defaults to true. Show the light / dark / system toggle.
• AllowColorChange — defaults to true. Show the accent color picker. Disable when your brand mandates a specific accent.
• AllowRightToLeftChange — defaults to false. Show the text-direction switch. Enable only when your portal actively supports RTL content.

If you turn all four sections off, the button hides itself — there's nothing useful for the panel to display.

API Reference