Next Experience UI Dark Theme, now also on Core UI... - ServiceNow Community
Mark Roethof
Tera Patron
Tera Patron

Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

 

Hi there,

 

Some of you already know, and some of you might have missed it: With the introduction of the Next Experience UI, also a Dark Theme was introduced. Unfortunately though, after meeting the prerequisites you would find out that the Dark Theme is working for for example Workspaces, though that it did not apply to Core UI experiences, like good old forms and lists...

 

With the Tokyo release, eureka! Let's have a look.


Enabling Dark Theme

Assuming you are working on the Next Experience UI, to be able to select the Dark Theme you would need to update the value of System Property  "glide.ui.polaris.dark_themes_enabled" and set it to "true". After refreshing your browser, when clicking on your User Profile icon and selecting Preferences, a "Theme" menu option would get visible under which you can select the Dark Theme. Selecting the Dark Theme would update the User Preference involved which actually holds which Theme you are using. After refreshing your browser again, the Dark Theme would be active.

 

San Diego - Workspaces (Dark Theme working)

The Dark Theme on San Diego does apply to for example Workspaces. See the example below:

 

find_real_file.png


San Diego - Lists, Forms (Dark Theme not working)

The Dark Theme on San Diego did not apply to Core UI experiences. See the below examples:

 

find_real_file.png

 

find_real_file.png

Tokyo - Lists, Forms (Dark Theme working)

With the Tokyo release, The Dark Theme does apply to Core UI experiences! The same examples as shown before, though now on a Tokyo instance:

 

find_real_file.png

 

find_real_file.png

---


Wow! Amazing to see the Dark Theme working like it is now with the Tokyo release.

And that's it. Hope you like it. If any questions or remarks, let me know!

 

C

If this content helped you, I would appreciate it if you hit bookmark or mark it as helpful.

 

Interested in more Articles, Blogs, Videos, Podcasts, Share projects I shared/participated in?
- Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

 

Kind regards,


Mark Roethof

Independent ServiceNow Consultant
3x ServiceNow Developer MVP

3x ServiceNow Community MVP

---

LinkedIn

Comments
Mark Manders
Kilo Patron

Finally! And now the last step: dashboards. I know you can set the background color, but I would expect the 'dark theme' to at least also do something with the reports/tabs/etc.

 

Thomas G
Tera Guru

I was just about to make a HI-case on not seeing black background on list views in San Diego with dark theme enabled. Now I know why. Thanks for sharing! 

Best regards
Thomas

Mike Whitlock
Tera Explorer

We just upgraded to Tokyo Patch 1 and Dark Mode is not working on lists or forms.  Dark mode is behaving just as it did in San Diego (as your screenshots above).  Do we need to do anything to make dark mode work on Lists, Forms????

Thanks,

Mike

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

You may notice dark mode does not apply to some elements such as UI Pages, interceptors, etc. I don't have an extensive list to provide, but as an admin please verify your users are not impacted, or know what to expect before using dark mode on classic environment forms and lists.

There is a system property in Tokyo glide.ui.polaris.core_ui_exclude_dark_mode that can be set to false, if you want to show dark mode in classic environment to users when the dark theme variant is selected in Next Experience. If you want to use the dark variant in Next Experience workspaces, you can set glide.ui.polaris.core_ui_exclude_dark_mode to true, and still render classic environment in light theme.

Mike Whitlock
Tera Explorer

Hey Ashley. We upgraded to Toyko Patch 1 and we have Next Experience along with Dark Mode enabled.  When a user selects Dark Mode, all the Forms and Lists (for example Incident Form and Incident List - as in the screenshots in earlier post), still show up as white.  Is there something we need to do to get those forms and lists to appear dark?

 

Thanks,

Mike

Phil A
Tera Contributor

it doesn't work in my PDI either(Tokyo P1). incident list still has white background

 

D62010ED-61A0-440A-A44A-32D1FC349368.jpeg

DiogoRamos
Mega Guru

Worked for me just with the property: glide.ui.polaris.core_ui_exclude_dark_mode setting it to false.

Rachael7
Tera Contributor

Unfortunately, dark mode isn't working in my lists. I wonder if it's because I our instances began like 10 years ago and have some legacy code....

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

@Rachael7 Do you have next experience enabled, and are on Tokyo and both properties set to:

 

glide.ui.polaris.dark_themes_enabled -true

glide.ui.polaris.core_ui_exclude_dark_mode - false

 

 

 

 

 

Rachael7
Tera Contributor

Yes to the first (and I can see the dark theme in all but lists). No to the second because it doesn't exist, and when I created it, it did nothing.

Phil A
Tera Contributor

@Ashley Snyder @Rachael7 still the same for me in my PDI

 

glide.ui.polaris.dark_themes_enabled -true

glide.ui.polaris.core_ui_exclude_dark_mode - false (I created this)

 

but lists still on white background

User152502_0-1665646794172.png

 

DiogoRamos
Mega Guru

It's working well on my instance, sharing the config below:

DiogoRamos_0-1665659713143.png


Cheers

Neil Paterson
Tera Contributor

List and forms are not working on my PDI which is Tokyo upgraded from San Diego.

I have tried creating the glide.ui.polaris.core_ui_exclude_dark_mode property as both a string and true/false data type and setting it to false in each case but without success.

 

Does anyone have any other ideas?

Bassam Itani
Tera Contributor

Hello Mark,


I have followed your instructions and I wanted to confirm that I was not able to see the Dark UI on my lists or record view either. I see some people are experiencing the same in the comments.

However, my coworker sees everything in dark view like lists/records.

 

Please let us know if there something we need to look into. 

Earl Duque
Administrator
Administrator

The properties that Ashley mentioned above worked for me, I had to perform a cache reset for it to take effect.

  • In your filter navigator, type `cache.do` and then press enter

The Next Experience does a lot of caching to be more performant, the theme is part of that, so a cache reset fixes it.

Bassam Itani
Tera Contributor

Hi @Earl Duque , you are right. This worked for me too. Thank you. 

Rachael7
Tera Contributor

I can see the dark theme, but in list view it whites-out the short description field unless you hover over it. I have a ticket into ServiceNow Support for it.

Neil Paterson
Tera Contributor

Hey @Earl Duque your suggestion to reload cache worked brilliantly.

Many thanks for your help.

Neil

Travis Davison
Tera Expert

Thank you all! @Earl Duque  your cache trick was the final fix. I did have to create the glide.ui.polaris.core_ui_exclude_dark_mode as a true/false in sys_properties.list but after clearing cache it worked

Karl Martin Lun
Tera Contributor

Thanks! This is great. Is there a way to enable dark mode on Studio as well?

Phil A
Tera Contributor

Thanks all, I have re-looked at my sys_properties (my mistake I think 😊) and done a cache.do and lists now appear in dark mode. Thanks all

PAULO CESAR FIL
Tera Contributor

In some pages dark theme doesn't work, reports > view/page for example. Someone know how to do dark theme work in this page ?

Sebas Di Loreto
Kilo Sage
Kilo Sage

If you set up both sys_properties as explained above AND you are still not seeing the dark mode on your lists do this trick:

  1. right click anywhere on the screen to get the menu shown below and select "inspect"
  2. then right click on the browser's refresh icon and select "empty cache and hard reload"
  3. you can close the screen on the right that was opened on step 1
  4. you should now get dark mode.

SebastianDL_0-1668376775427.png

 

SebastianDL_1-1668376795971.png

 

 

Gilles Boutin
Tera Explorer

@Rachael7 I've got exactly the same "white line until hovering" issue : did you have a solutionto this problem ?

Thanks in advance !

Rachael7
Tera Contributor

Yes @Gilles Boutin, I had the short description set on a line below the rest of the columns (set years ago). I changed it so that the Short Description did not take its' own row by setting the system property glide.ui.list.detail_row to false.

MarcB1
Tera Guru

Hi

Does anyone facing the same issue that emails in Activities become unreadable when Dark Mode is on?

MarcB1_0-1669277342463.png

 

MarcB1_1-1669277348907.png

 

Thanks
Marc

VL10
Tera Expert

I don't have dark mode working, and only see glide.ui.polaris.dark_themes_enabled which I have set to true but I don't see glide.ui.polaris.core_ui_exclude_dark_mode 

Any ideas what to try next?


Sebas Di Loreto
Kilo Sage
Kilo Sage

Create it if you don’t see it. 
Many system properties are like this and don’t come “preloaded”. 

Juan25
Tera Contributor

After setting glide.ui.polaris.dark_themes_enabled to true and creating glide.ui.polaris.core_ui_exclude_dark_mode and setting it to false, the theme is working great.

The only issue we've found so far is the black email details on the dark background as seen in @MarcB1 's screenshot above.

 

Anyone find a fix for this yet?  I tried creating my own dark theme (copied the JSON from the OOB dark theme) but I can't find the --now- property that would change the email text or even the background (to make it lighter) so I didn't get far.

 

Edit:

--now-color_background--primary can be used to change the background color.  Setting it to something a bit lighter helps but it's still black text on a dark grey background and if you make the background too light, you start having trouble reading the light colored text everywhere else.

MarcB1
Tera Guru

@Juan25 
This is the answer I got today from Support:

The reported issue is a verified defect that was addressed in PRB(PRB1607006) and is targeted to fix in Tokyo Patch 5 (Awaiting Approvals) and Utah releases. Currently, this problem has no workaround.

Juan25
Tera Contributor

@MarcB1 Thank you!  I'm glad it is something that ServiceNow plans to fix.  For now, I've created a new variant and found a happy medium to use for the background color to help with readability (though it still isn't great...).

Sandeep21
Tera Explorer

Hello,

 Did anybody applied dark theme on service portal ? Please let me know the steps for the same.

 

We have requirement to apply the themes on service portal based on user selection on clicking button.

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

@Sandeep21 

 

Dark mode for Next Experience UI and Classic Environment does not extend to the Service Portal. Service Portal theming is defined separately from Next Experience and does not use the same CSS Variables that Next Experience themes use, so you would need to create your own dark mode theme for your Service Portal.

holly-t
Tera Guru

 

One issue I see in dark. If you have short description set to be your second line in your list then you can not see it unless you hover over that particular line, then the white background goes away and you can see the white text.

 

hollyt_0-1675872503135.png

 

TonO
Tera Expert

Get Dark theme core components working in Utah

Polaris, Next Experience,  Dark mode.

Set this property to true if you have this defined to get rid of the picture below empty lists:

glide.ui.polarisberg => true

 

Somehow when you set this property to false all Core components are no longer Dark mode but look like UI16..
Tested with Utah patch 4 and patch 7.

Tommy SN Sahlin
Kilo Sage

Hi guys,

we have Dark Mode working, however we have issues with our Dashboards - e.g Single Score widgets with black numbers. Does anyone else recognize this?

 

TommySNSahlin_0-1700823084901.png

 

Susie W
Tera Expert

Yes, we have this issue as well.  At the moment I am telling our users to work around it by changing the number colour.  A mid grey works well.  But it would be preferable for SN to change it automatically as it does for other types of chart.

Susie W
Tera Expert

As a follow up to my above post, I created a HI case and received the following response:

 

== This issue has been identified via PRB1657330 ... 
... We are happy to report that the PRB is marked as fixed and the fix will be available in the Washington DC release. ...

Jaspal Singh
Mega Patron
Mega Patron

@Mark Roethof  there happens to be a field named 'Dark Theme' starting Utah on sp_portal table. Seems like a plan for future release for portal themes. Do you have any idea on it? Looking for documentations but it seems a gray area still.

Version history
Last update:
‎08-03-2024 10:22 AM
Updated by:
Contributors