# Detecting dark theme in visualization plugin

**URL:** <https://discuss.elastic.co/t/detecting-dark-theme-in-visualization-plugin/235220>\
**Category:** Kibana\
**Created:** [June 1, 2020, 6:54pm UTC](https://discuss.elastic.co/t/detecting-dark-theme-in-visualization-plugin/235220 "2020-06-01T18:54:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tlacuache](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tlacuache/32/39003_2.png) [@tlacuache](https://discuss.elastic.co/u/tlacuache)\
**Post date:** [June 1, 2020, 6:54pm UTC](https://discuss.elastic.co/t/detecting-dark-theme-in-visualization-plugin/235220/1 "2020-06-01T18:54:12Z")

</div>

I'm working in a [fork](https://github.com/mmguero-dev/kbn_sankey_vis/tree/topic/colors) of a sankey diagram visualization [plugin](https://github.com/uniberg/kbn_sankey_vis).

In the visualization I'd like to be able to pick colors (particularly [label colors](https://github.com/mmguero-dev/kbn_sankey_vis/blob/topic/colors/public/kbn_sankey_vis_controller.js#L27)) 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.

---

<div class="post-metadata">

**Author:** ![tlacuache](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tlacuache/32/39003_2.png) [@tlacuache](https://discuss.elastic.co/u/tlacuache)\
**Post date:** [June 1, 2020, 9:25pm UTC](https://discuss.elastic.co/t/detecting-dark-theme-in-visualization-plugin/235220/2 "2020-06-01T21:25:00Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![Aaron\_Caldwell](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron_caldwell/32/45755_2.png) [@Aaron\_Caldwell](https://discuss.elastic.co/u/Aaron_Caldwell)\
**Post date:** [June 1, 2020, 9:28pm UTC](https://discuss.elastic.co/t/detecting-dark-theme-in-visualization-plugin/235220/3 "2020-06-01T21:28:46Z")

</div>

You beat me to it :). I was going to point you to [this example](https://github.com/elastic/kibana/blob/edee6543be33bfe61e6a902f62e2e815daebfef2/src/plugins/vis_type_timeseries/public/application/lib/set_is_reversed.js#L23).

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

---

<div class="post-metadata">

**Author:** ![tlacuache](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tlacuache/32/39003_2.png) [@tlacuache](https://discuss.elastic.co/u/tlacuache)\
**Post date:** [June 2, 2020, 3:08pm UTC](https://discuss.elastic.co/t/detecting-dark-theme-in-visualization-plugin/235220/4 "2020-06-02T15:08:49Z")

</div>

Thanks, that worked great.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [June 30, 2020, 3:08pm UTC](https://discuss.elastic.co/t/detecting-dark-theme-in-visualization-plugin/235220/5 "2020-06-30T15:08:55Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.