Detecting dark theme in visualization plugin

Elastic Stack Kibana
1

I'm working in a fork of a sankey diagram visualization plugin.

In the visualization I'd like to be able to pick colors (particularly label colors) based on whether or not dark theme is currently enabled.

I haven't had luck so far in finding other examples online that show how to read/detect/watch this setting. I'd be very appreciative if someone could give me an example or information on how to read the current theme.

2

For what it's worth, I figured out a way to do it. I don't know if it's the "best" way, but this worked:

import chrome from 'ui/chrome';
...
const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
...
let textColor = (IS_DARK_THEME) ? '#CBCFCB' : '#000000';
3

You beat me to it :). I was going to point you to this example.

One word of caution. You're on the right track the way you've done it, but using the ui/chrome lib is an "old platform" approach, meaning it's getting phased out. If you plan to leverage your plugin in versions past ~8.0, you may want to look at how the logic works in the example I provided. Totally up to you!

Regards,
Aaron

4

Thanks, that worked great.