Get theme in a custom panel plugin

[tschroeer]

I have created a plugin. Now I would like to adapt my design depending on the theme I have set. How can I find out which theme is set?

I have made the following import from the API description:

import { getTheme } from ‘@grafana/ui’;

Now I try with

var gt = getTheme();
console.log("Theme: " + gt);

to read out the theme. But as output I only get

“Theme: [object Object]”

What is wrong with this, or how can I read out the set theme?

[marcusolsson]

How do you define your components?

For functional components, you can use the useTheme hook.

import { useTheme } from '@grafana/ui';
export const MyComponent: React.FC<Props> = (props) => {
  const theme = useTheme()

  // ...
}

I’m not aware of the getTheme function, but the output you’re getting is because the theme is an object. I believe there should be a theme.isDark() method if you only want to check if light or dark theme is set.

[tschroeer]

@marcusolsson

How do you define your components?

For functional components, you can use the useTheme hook.

I’m afraid I don’t understand your answer. What components do you mean? The basis of my panel is the Multistat Panel by Michel D. Moore. Here is another code excerpt with your built-in answer:

/*jshint esversion: 6 */
/*jshint -W087 */
/*jshint -W014 */
import { MetricsPanelCtrl } from "app/plugins/sdk";
import $ from "jquery";
import "jquery.flot";
import _, { constant } from "lodash";
import moment from "moment";
import "./css/multistat-panel.css!";
import d3 from "./external/d3.min";
import { getTemplateSrv } from '@grafana/runtime';
import appEvents from "app/core/app_events";
import { AppEvents } from "@grafana/data";
import {
//  DataQuery,
//  DataQueryResponseData,
//  PanelPlugin,
  PanelEvents,
//  DataLink,
//  DataTransformerConfig,
//  ScopedVars,
} from "@grafana/data";
import { getTheme } from '@grafana/ui';


const templateSrv = getTemplateSrv();

class MultistatPanelCtrl extends MetricsPanelCtrl {
...
}

onRender() {
if (this.data != null && this.data.rows && this.data.rows.length) {
  var cols = this.cols;
  var dateTimeCol = -1;
  var unitCol = 0;
  var labelCol = -1;
  var valueCol = 0;
  var sortCol = 0;
  var groupCol = -1;
  var recolorCol = -1;
  var lowCol = 0;
  var highCol = 0;
  var minLineCol = -1;
  var baselineCol = -1;
  var maxLineCol = -1;
  var alarmCol = -1;
  var info1Col = -1;
  var info2Col = -1;
  var info3Col = -1;
  var info4Col = -1;
  for (let i = 0; i < cols.length; i++) {
    if (cols[i] == this.panel.DateTimeColName) dateTimeCol = i;
    if (cols[i] == this.panel.UnitColName) unitCol = i;
    if (cols[i] == this.panel.LabelColName) labelCol = i;
    if (cols[i] == this.panel.ValueColName) valueCol = i;
    if (cols[i] == this.panel.SortColName) sortCol = i;
    if (cols[i] == this.panel.GroupColName) groupCol = i;
    if (cols[i] == this.panel.RecolorColName) recolorCol = i;
    if (cols[i] == this.panel.LimitLowColName) lowCol = i;
    if (cols[i] == this.panel.LimitHighColName) highCol = i;
    if (cols[i] == this.panel.MinColName) minLineCol = i;
    if (cols[i] == this.panel.BaseLineColName) baselineCol = i;
    if (cols[i] == this.panel.MaxColName) maxLineCol = i;
    if (cols[i] == this.panel.AlarmColName) alarmCol = i;
    if (cols[i] == this.panel.Info1Col) info1Col = i;
    if (cols[i] == this.panel.Info2Col) info2Col = i;
    if (cols[i] == this.panel.Info3Col) info3Col = i;
    if (cols[i] == this.panel.Info4Col) info4Col = i;
  }

  //console.log('onRender: this.data.rows\n'+JSON.stringify(this.data.rows));
  var gt = getTheme();
  console.log("Theme: " + gt); //returns Theme: [object Object]
  console.log("Theme gt.isDark: " + gt.isDark); // returns true regardless of whether dark or light is set
  console.log("Theme gt.isLight: " + gt.isLight); //returns false regardless of whether dark or light is set

When I use your useTheme, the panel does not start at all.

[marcusolsson]

Sorry for the confusion. I assumed that you’re using the current (React) plugin platform. I can see from your example that you’re building a legacy (Angular) plugin.

Unfortunately, I’m not that familiar with building Angular plugins, but I’m not sure whether the GrafanaTheme actually works with Angular plugins. You may need to find the legacy equivalent of getTheme.