Implementing User-Toggleable Light/Dark Modes in Constellation 25.1

Hi Team,

I am currently working with Pega Constellation 25.1 and have a requirement to enable a user-controlled Light/Dark theme toggle at runtime.

Since Constellation uses Design Tokens and App Studio usually only allows one active theme per portal, I’m looking for the best way to handle this.

  1. Is there a built-in way in 25.1 to support “prefers-color-scheme” (system dark mode)?

  2. If not, what is the recommended approach for a user-controlled toggle? Should I use a Custom DX Component in the header to swap CSS variables?

  3. Where is the best place to save the user’s theme preference (Operator record or a Data Page)?

Looking forward to your advice and any best practices!

@hemalathag8810 There is no such way OOTB currently. Building a DX component is certainly an option. But our product team is also looking at implementing this natively into the platform, no promises made - but could be an idea to weigh the implementation cost of adding a DX component vs waiting for native support.

Did you implemented this?

@Pradeep_Bhatt keep an eye out for '26. We are planning a '26 new feature webinars in July, where we will showcase some of the features in this space.

@MarcCheong Hi, any setting we need to enable to see Portal Themes? no icon (Light/Dark theme toggle) at my end?

Since Pega Constellation 25.1 does not natively support runtime theme toggling, you must build a custom DX Component placed in the portal header to handle the switch. This component will dynamically modify the application’s underlying CSS variables and design tokens on the document body when toggled. To ensure the selected theme persists across future sessions, save the user’s theme preference directly to a custom property on their Operator record. You can then load this saved preference during the login sequence using a thread-level Data Page to instantly apply the chosen mode. This direct approach successfully gives users full control over their visual workspace while working within the current platform architecture.

Very good question.

For those reading this, this is an image of Infinity '26, so here we are referring to the new feature Theme Switching in Runtime Portal.

This isn’t very well documented (I’m getting this fixed).

  • Run time
  • Design time
    • You are likely not seeing it because you have not configured your dark theme? I noticed when I went in, this was empty and I had to set it; and when it was empty at run time the icon was not there (which is expected outcome)