What is the event hook to know when the dashboard dark theme changes?

Elastic Stack Kibana
1

I can't seem to find how to register a plugin to watch for the dark theme changing on a dashboard.

2

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.

3

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.

4

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.

5

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

The only way I see to access the current state is via $scope.getDashboardState().

6

Right, but again I need to know when it changes, not the current state.

7

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.

8

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.

9

Kibana has been taking the approach recently of mixing Angular and React code in multiple layers. You could do the same.

10

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.

11

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