diff --git a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
index d6df17d9699..4ef07d19212 100644
--- a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
+++ b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { TimeSeries } from 'app/core/core';
 import { SeriesColorPicker } from '@grafana/ui';
+import { ThemeProvider } from 'app/core/utils/ConfigProvider';
+import { GrafanaTheme } from '@grafana/ui/';
 
 export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
 
@@ -154,8 +156,8 @@ interface LegendSeriesIconState {
   color: string;
 }
 
-function SeriesIcon(props) {
-  return <i className="fa fa-minus pointer" style={{ color: props.color }} />;
+function SeriesIcon({ color }) {
+  return <i className="fa fa-minus pointer" style={{ color }} />;
 }
 
 class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> {
@@ -167,15 +169,24 @@ class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeries
 
   render() {
     return (
-      <SeriesColorPicker
-        optionalClass="graph-legend-icon"
-        yaxis={this.props.yaxis}
-        color={this.props.color}
-        onColorChange={this.props.onColorChange}
-        onToggleAxis={this.props.onToggleAxis}
-      >
-        <SeriesIcon color={this.props.color} />
-      </SeriesColorPicker>
+      <ThemeProvider>
+        {theme => {
+          return (
+            <SeriesColorPicker
+              optionalClass="graph-legend-icon"
+              yaxis={this.props.yaxis}
+              color={this.props.color}
+              onColorChange={this.props.onColorChange}
+              onToggleAxis={this.props.onToggleAxis}
+              theme={theme as GrafanaTheme}
+            >
+              <span>
+                <SeriesIcon color={this.props.color} />
+              </span>
+            </SeriesColorPicker>
+          );
+        }}
+      </ThemeProvider>
     );
   }
 }