Themeable Colors

[Kieron Jones]

Hi All, I created a very simple report on sc_task listing new tasks since 01-JUN-2022, and visualized as a bar time series. The colour I used for the bars was “UI14 Green”. In the Dark Mode Theme, I ran the report and the bar colour that appeared looked to be “UI14 Orange”, not UI14 Green! I wanted UI14 Green. I switched back to Light Mode Theme and the "UI14 Green" appeared correctly. I looked at the "UI14 Green" colour definition and noticed that the Themeable Color was Datavis Color - Qualitative 1 had an "inherited" Orange colour. I am guessing this is presented when the theme is not Light / Normal? As a test, I swapped the Themeable Color between the two (UI14 Green" and UI14 ORange", so: UI14 Green (Datavis Color - Qualitative 1)  UI14 Green (Datavis Color - Qualitative 3) UI14 Orange (Datavis Color - Qualitative 3)  UI14 Orange (Datavis Color - Qualitative 1) Reran the report and in Light Mode Theme, the colours remained correct, and in Dark Mode Theme the colours remained correct - the Green was shown in both iterations of the report. Why can the correct green not be provided correctly in both Light and Dark modes? This happens with many of the other colours too, the anticipated report colour (when used in light mode) is changed to something else in dark mode. Maybe I'm looking at this completely wrong, but it makes no sense to me at present - I appreciate that some colours will not work in dark mode, like Black, or possibly grey, so I would expect these to be alternative colours, but not a basic colour like Green, which shows up well on black. Thanks for any help

[mattystern]

Hi Kieron,

I am able to replicate this. It looks like these are using the CSS property "--now-datavis_color--qualitative-X" [X is a number] which then reference other CSS properties within the theme record. You can view which color matches on the UX Theme Property from the color pallet. In my screenshots, I am using Default UI14 and I'm only showing the first color:

From here, you can look for this property on the dark theme under Now Experience Framework > Themes > Themes in the Polaris record:

Dark theme:

Base polaris "colors"

So in dark theme the first blue is following "--nowdatavis_color--blue-8" (128,218,235) while the default is using "--nowdatavis_color--blue-5" (10,184,217)

In a custom theme, you would be able to edit these values to be the same across reports.

-Matt

[Kieron Jones]

Thank you for this - it goes a long way in to explaining, and my understanding of the setup.

I think all we can do for now, is to amend the Qualitative values against the Themeable Color field of the colour definition to one of the alternative 32 defined ones in the CSS list of values. Otherwise we'll be getting into all sorts of "darkness" with custom themes!