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 layout's header alongside the rest of your top-bar controls, and make sure the app is wrapped in a theme provider so the panel has a theme to drive. The Blazor and React tabs below mirror how each template wires it up:

Note

The theme provider namespaces the per-user preferences in localStorage — via StorageName on Blazor's <ThemeProvider>, or storageKey on React's <PowerPortalsProThemeProvider>. Use a name unique to your portal so multiple portals on the same domain don't clash.

Fixing the accent color to your brand

By default the accent color belongs to the visitor, and their pick outlives any default you configure. Portals that have to stay on-brand can pin it instead: set the accent on the theme provider and turn the lock on. The configured color then wins over whatever the visitor picked previously, the stored preference is rewritten to match, and the accent picker removes itself from the settings panel. Light / dark mode stays the visitor's to choose either way.

Note

Without the lock, an accent on the theme provider is only a default — it applies to first-time visitors and is overridden the moment someone picks their own. Hiding the picker with AllowColorChange="false" doesn't set a color either; it only hides the section, leaving anyone who already chose an accent on that choice. Reach for the lock when the color actually matters.

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