How to get OOTB Dark style on custom Next Experience UI Theme

[Devon Chopp]

Is there a way to get the out of the box Dark style that is in the default Polaris theme and put it in a custom theme that I have developed with our company branding? We came up with a default theme with our company branding, but if users want a dark mode we would like to allow them to use the out of the box one. When I added the Dark style to my theme and switched over to it in my PDI I noticed that several buttons/drop down menus and icons did not look the same as using the out of the box dark theme. Specifically if you look at Service Operations Workspace you can see the My Work button/drop down menu does not have the same colors.

[Ashley Snyder · Accepted solution]

Creating your own dark mode theme can be a little tricky at the moment as you do have to account for elements that may or may not work well with your custom theme. Have you looked at the Color Generator tool mentioned in this article? There is a toggle for Dark mode that you can look at and tweak CSS variables from there.

[Kim Sullivan]

Did you ever get this to work?

[Devon Chopp]

We sort of got it to work. I ended up just adding the OOTB dark mode to our custom branding config, but did not do any tweaking of it. We decided just to focus on the light mode aspect as that was much easier to configure and get working mostly how we wanted.