Next Experience UI Dark Theme

[himanshukolse98]

Hello All,

I am new to ServiceNow and currently exploring the Next Experience UI. Previously I have been using UI16 and now trying to migrate it to Next-Gen UI. Now, one thing I was trying to do is that I had some custom scripts in UI16, but as Next Gen UI introduced a dark theme, I am trying to detect from my script whether the dark theme is active, and if it is then perform some task. I also went through the ServiceNow Javascript APIs but wasn't able to get it. Any suggestions on how I could detect the theme using the script?

Thanks.

[SwarnadeepNandy]

Hello @himanshukolse98,

To detect the dark theme from your script, you can use the GlideUserPreference API, which allows you to get and set user preferences. You can use the getPreference method to get the value of a preference by name. The preference name for the dark theme is glide.css.theme.ui16. If the value is dark, then the dark theme is active. Otherwise, it is not.

Here is an example of how you can use this API in a script:

// Get the GlideUserPreference object
var userPref = new GlideUserPreference();

// Get the value of the dark theme preference
var darkTheme = userPref.getPreference("glide.css.theme.ui16");

// Check if the value is "dark"
if (darkTheme == "dark") {
  // Perform some task if the dark theme is active
  // For example, change the background color of a field to black
  g_form.setValue("field_name", "black", "black");
} else {
  // Perform some other task if the dark theme is not active
  // For example, change the background color of a field to white
  g_form.setValue("field_name", "white", "white");
}

Hope it helps.

Kind Regards,

Swarnadeep Nandy 

[himanshukolse98]

Hello @SwarnadeepNandy ,

Thanks for replying. I am trying to do something similar in the next experience UI and as you said the preference name for dark theme is "glide.css.theme.ui16", so currently am trying to find something similar in the next experience UI. Also, please ket me know if you are aware of it.

Thank you.

[himanshukolse98]

Hello @SwarnadeepNandy ,

Thanks for replying. I am actually using the Next Experience UI and as you mentioned about this property "glide.css.theme.ui16", I am trying to find similar for the Next Experience UI(as this is for UI16) but am unable to find it.

Thank you.

[Howard6]

This is a very late reply but might be helpful to others looking for the way to do this under Next Experience UI. The user preference you need to check is "glide.ui.polaris.theme.variant". Dark Mode is a "variant" of the main theme, and this stores the sys_id of the variant if it is being applied. If this user preference is not empty, then a variant (usually dark mode) is being applied. If the value is blank or the user preference is not present, then no variant is being used (normal colours).