Dark Mode Enablement for Custom Survey Cards in Service Portal

RaasheedRaS
Tera Contributor

3 weeks ago

We recently customized the My Assessments and Surveys page in Service Portal by converting the default item/list view into a card-based layout for a better user experience.
The card view is working as expected, but we're now exploring options to enable Dark Theme support for these custom survey cards. Since Polaris dark mode is primarily designed for Next Experience and Workspaces, it does not automatically apply to Service Portal widgets.

Has anyone implemented dark mode for custom Assessment/Survey widgets in Service Portal? Looking for best practices and recommended approaches. Please let me know.

Thankyou in advance !

0 Helpfuls
  • 442 Views
2 REPLIES 2

VJ_Srivastava
Tera Expert

3 weeks ago

Hello @RaasheedRaS,

From an architectural standpoint, customizing Service Portal widgets introduces long-term maintenance overhead, and implementing custom dark mode logic can easily compound that technical debt if not structured correctly.

 

The biggest architectural anti-pattern in Service Portal development is hardcoding colors directly into individual widgets. When you convert a list to a card view, it is very tempting for developers to drop static hex codes into the CSS panel. If you do this across multiple custom widgets, updating your corporate branding or fixing contrast issues requires opening and editing every single widget individually.

 

To build a scalable and upgrade-safe architecture, you must centralize your theming. Ensure your custom survey widget relies strictly on CSS Variables defined at the parent Portal Theme level (e.g., sp_theme). By defining your dark and light color palettes globally as CSS custom properties, your custom widgets will dynamically inherit the correct colors. This standardizes your UI architecture and ensures your custom widgets will easily adapt when ServiceNow eventually rolls out native Service Portal dark mode toggles in future family releases.

0 Helpfuls

NehaG8791370651
Tera Expert

3 weeks ago

Hi @RaasheedRaS,

This is a great question. You are correct that Polaris (Next Experience) theming does not natively cascade into classic Service Portal widgets. Because you have built a custom card layout, you have full control over the CSS, but you need to approach dark mode differently than Workspace developers do.

 

Here are the two best technical approaches to enable dark mode for your custom survey cards:

1. OS-Level Dark Mode via CSS Media Queries (Simplest & Most Reliable) Instead of relying on a ServiceNow-specific toggle, you can leverage standard web CSS to detect the user's operating system or browser dark mode preference. In your widget's CSS/SCSS section, use the @media (prefers-color-scheme: dark) query.

CSS
 
/* Default Light Mode Card */
.custom-survey-card {
   background-color: #ffffff;
   color: #333333;
}

/* Dark Mode Override */
@media (prefers-color-scheme: dark) {
   .custom-survey-card {
      background-color: #1e1e24; /* Dark gray */
      color: #f5f5f5; /* Off-white */
      border-color: #444444; 
   }
}

This is the cleanest approach because it requires zero client scripts or portal-level toggle configurations—it just instantly matches the user's OS settings.

 

2. Portal-Level CSS Variables (Best for Theme Consistency) If you want the dark mode to tie into a specific portal toggle (like the one found in the Employee Center), you must use CSS Variables (var(--my-card-bg)). Do not hardcode hex values in the widget CSS. Define the base variables in your Portal Theme record, and then create a toggle script that injects a .dark-theme class to the HTML body to swap those variables.

0 Helpfuls