Fix issue with graph legend color picker disapearing on color selection

public/app/core/utils/ConfigProvider.tsx

@@ -21,8 +21,7 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
   return (
   return (
     <ConfigConsumer>
     <ConfigConsumer>
       {config => {
       {config => {
-        const currentTheme = getCurrentThemeName();
-        return <ThemeContext.Provider value={getTheme(currentTheme)}>{children}</ThemeContext.Provider>;
+        return <ThemeContext.Provider value={getCurrentTheme()}>{children}</ThemeContext.Provider>;
       }}
       }}
     </ConfigConsumer>
     </ConfigConsumer>
   );
   );

public/app/plugins/panel/graph/graph.ts

@@ -28,6 +28,8 @@ import { GraphCtrl } from './module';
 import { GrafanaThemeType, getValueFormat } from '@grafana/ui';
 import { GrafanaThemeType, getValueFormat } from '@grafana/ui';
 import { provideTheme } from 'app/core/utils/ConfigProvider';
 import { provideTheme } from 'app/core/utils/ConfigProvider';
 
 
+const LegendWithThemeProvider = provideTheme(Legend);
+
 class GraphElement {
 class GraphElement {
   ctrl: GraphCtrl;
   ctrl: GraphCtrl;
   tooltip: any;
   tooltip: any;
@@ -44,6 +46,7 @@ class GraphElement {
   legendElem: HTMLElement;
   legendElem: HTMLElement;
 
 
   constructor(private scope, private elem, private timeSrv) {
   constructor(private scope, private elem, private timeSrv) {
+
     this.ctrl = scope.ctrl;
     this.ctrl = scope.ctrl;
     this.dashboard = this.ctrl.dashboard;
     this.dashboard = this.ctrl.dashboard;
     this.panel = this.ctrl.panel;
     this.panel = this.ctrl.panel;
@@ -110,7 +113,7 @@ class GraphElement {
       onToggleAxis: this.ctrl.onToggleAxis,
       onToggleAxis: this.ctrl.onToggleAxis,
     };
     };
 
 
-    const legendReactElem = React.createElement(provideTheme(Legend), legendProps);
+    const legendReactElem = React.createElement(LegendWithThemeProvider, legendProps);
     ReactDOM.render(legendReactElem, this.legendElem, () => this.renderPanel());
     ReactDOM.render(legendReactElem, this.legendElem, () => this.renderPanel());
   }
   }
 
 

scripts/webpack/getThemeVariable.js

@@ -29,7 +29,7 @@ function getThemeVariable(variablePath, themeName) {
   const variable = get(theme, variablePath.getValue());
   const variable = get(theme, variablePath.getValue());
 
 
   if (!variable) {
   if (!variable) {
-    throw new Error(`${variablePath} is not defined fo ${themeName}`);
+    throw new Error(`${variablePath.getValue()} is not defined for ${themeName.getValue()} theme`);
   }
   }
 
 
   if (isHex(variable)) {
   if (isHex(variable)) {