# What is the event hook to know when the dashboard dark theme changes? **URL:** \ **Category:** Kibana\ **Created:** [January 6, 2020, 5:26pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927 "2020-01-06T17:26:54Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![brandtj](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandtj/32/41927_2.png) [@brandtj](https://discuss.elastic.co/u/brandtj)\ **Post date:** [January 6, 2020, 5:26pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/1 "2020-01-06T17:26:55Z")
I can't seem to find how to register a plugin to watch for the dark theme changing on a dashboard. ---
**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\ **Post date:** [January 6, 2020, 6:22pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/2 "2020-01-06T18:22:05Z")
Dark mode in Kibana is an advanced setting which requires a full page refresh to change- your plugin should have access to the `config` API to read Kibana advanced settings. ---
**Author:** ![brandtj](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandtj/32/41927_2.png) [@brandtj](https://discuss.elastic.co/u/brandtj)\ **Post date:** [January 6, 2020, 6:27pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/3 "2020-01-06T18:27:02Z")
Sorry should have said I'm using 6.6. We aren't upgrading for lots of reasons and in this version you can have each dashboard be saved individually with dark theme. ---
**Author:** ![brandtj](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandtj/32/41927_2.png) [@brandtj](https://discuss.elastic.co/u/brandtj)\ **Post date:** [January 6, 2020, 6:33pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/4 "2020-01-06T18:33:15Z")
I'm asking for basically the equivalent of this in React. ``` $scope.$watch('state.options.darkTheme', newValue => { $scope.$emit('render'); }); ``` Really just any way to know when the AppState changes. ---
**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\ **Post date:** [January 6, 2020, 6:34pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/5 "2020-01-06T18:34:43Z")
I was unfamiliar with Kibana 6.6 so I checked the source. There is a DashboardStateManager instance used to toggle dark mode: [https://github.com/elastic/kibana/blob/6.6/src/legacy/core\_plugins/kibana/public/dashboard/dashboard\_app.js#L111](https://github.com/elastic/kibana/blob/6.6/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js#L111) The only way I see to access the current state is via `$scope.getDashboardState()`. ---
**Author:** ![brandtj](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandtj/32/41927_2.png) [@brandtj](https://discuss.elastic.co/u/brandtj)\ **Post date:** [January 6, 2020, 6:36pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/6 "2020-01-06T18:36:11Z")
Right, but again I need to know when it changes, not the current state. ---
**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\ **Post date:** [January 6, 2020, 6:43pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/7 "2020-01-06T18:43:11Z")
Yes, I believe you can do something like the snippet you showed. It's angular.js code. Removing angular.js has been a major effort and is still ongoing. ---
**Author:** ![brandtj](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandtj/32/41927_2.png) [@brandtj](https://discuss.elastic.co/u/brandtj)\ **Post date:** [January 6, 2020, 6:46pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/8 "2020-01-06T18:46:41Z")
I think you are misunderstanding. I know I can do what I've shown in the snippet. I'm asking how would one do this in React because I'm building a React plugin. ---
**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\ **Post date:** [January 6, 2020, 7:16pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/9 "2020-01-06T19:16:38Z")
Kibana has been taking the approach recently of mixing Angular and React code in multiple layers. You could do the same. ---
**Author:** ![brandtj](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/brandtj/32/41927_2.png) [@brandtj](https://discuss.elastic.co/u/brandtj)\ **Post date:** [January 6, 2020, 9:18pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/10 "2020-01-06T21:18:03Z")
Thanks for your help. I actually just found something where I wouldn't need to mix libraries. I knew you could mix libraries but I don't like doing that if I don't have to. For anyone curious the AppState will emit "save\_with\_changes" and the keys will be what has changed. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [February 3, 2020, 9:18pm UTC](https://discuss.elastic.co/t/what-is-the-event-hook-to-know-when-the-dashboard-dark-theme-changes/213927/11 "2020-02-03T21:18:08Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.