@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.
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.
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)
We have a Hybrid Portal where we have Constellation Portal as our main Portal but we have UI-Kit case types that are also supported. Is it possible to implement similar Token behavior via Skin option.
Thanks for the update. This is a great addition to the product. I was wondering how the custom components will handle theming and whether they will automatically align with the established design theme.
Even though foreground-color is configured as Blue and Orange, if you use theme.components.card.backgroundfor your component’s text color, the text will appear Red in Light mode and Green in Dark mode.
The component applies whichever theme token you specify, regardless of its intended purpose.
3. Using hardcoded colors
If you hardcode a color, such as color: purple, your component’s text will remain Purple in both Light and Dark modes, regardless of the selected theme.
Note: To maintain consistent styling and ensure automatic theme adaptation, use the appropriate theme tokens instead of hardcoded colors.
In Pega Constellation 26, we have Light and Dark theme options. I would like to know how to detect the currently selected theme within a custom DX component.
I tried using the useTheme() hook from styled-components, which returns the theme configuration (base and components). However, I couldn’t find an explicit property indicating whether the current theme is Light or Dark.
My requirement: I want to apply custom colors based on the selected theme without relying on Pega’s predefined theme color tokens.
For example:
Light mode: color: purple
Dark mode: color: green
Is there an official Pega API, theme property, or recommended approach to detect the selected theme and automatically update custom component styles when users switch between Light and Dark modes, without refreshing the browser?
Any guidance or sample implementation would be greatly appreciated.
Anything is possible. However, Traditional UI Kit does not natively feature a simple “out-of-the-box toggle” or automatic system-level switching for light and dark modes in the same way modern Constellation design system does.
As are result you would have to build this yourself in UI Kit, which is not my area of expertise, BUT you’d hit a variety of challenges (mentioned below) that in my opinion would be more effort than benefit.
Migrating the blended UI Kit case types, might be a better use of the effort vs such a custom implementation. It would also require heavy expertise in Pega, UI Kit and custom CSS to achieve.
Potential challenges of building a UI Kit light/dark toggle for UI Kit Application
Hardcoded Mixins: Standard UI Kit components rely heavily on hardcoded inline styles and static mixin classes generated by the skin engine. You will likely need multiple CSS overrides to handle headers, grids, modals, and field borders.
Component Formats: Built-in form controls (standard dropdowns, autocomplete, calendar pickers) have complex styling structures that may require extensive custom CSS to look natural in a dark theme.
Upgrade/Maintenance Overhead: Large custom CSS files in the skin can make future platform updates more difficult to maintain compared to Constellation’s design token system
Regression issues and bugs: The point of Blended UI is to utilise existing investments in UI Kit cases, via your Constellation Application. This comes at no extra investment, you get to use what you built. By refactoring your UI Kit application, you are putting more investment in legacy architecture AND potentially breaking things in the process.
Blended UI Complexity: Over coming all of the above. You have the added challenge of Blended UI. How would the UI Kit application know Constellation’s theme?
The right hooks may not be in place and you’d likely be establishing your own mechanisms for a cross-origin/cross-frame communication to sync the theme state. Makes me nervous just saying it aloud.
