fix: extend d3-interpolateRgb() to process CSS vars

src/graph.js

@@ -1,4 +1,4 @@
-import { interpolateRgb } from 'd3-interpolate';
+import interpolateRgb from './interpolateRgb';
 import {
   X, Y, V,
   ONE_HOUR,
@@ -162,10 +162,10 @@ export default class Graph {
       let color;
       if (stop.value > this._max && arr[index + 1]) {
         const factor = (this._max - arr[index + 1].value) / (stop.value - arr[index + 1].value);
-        color = interpolateRgb(arr[index + 1].color, stop.color)(factor);
+        color = interpolateRgb(arr[index + 1].color, stop.color, factor);
       } else if (stop.value < this._min && arr[index - 1]) {
         const factor = (arr[index - 1].value - this._min) / (arr[index - 1].value - stop.value);
-        color = interpolateRgb(arr[index - 1].color, stop.color)(factor);
+        color = interpolateRgb(arr[index - 1].color, stop.color, factor);
       }
       let offset;
       if (scale <= 0) {

src/interpolateRgb.js

@@ -0,0 +1,15 @@
+import { interpolateRgb } from 'd3-interpolate';
+import {
+  isAssumingCssVar,
+  convertCssVarToValue,
+} from './utils';
+
+export default (start, end, y) => {
+  const _start = isAssumingCssVar(start)
+    ? convertCssVarToValue(start)
+    : start;
+  const _end = isAssumingCssVar(end)
+    ? convertCssVarToValue(end)
+    : end;
+  return interpolateRgb(_start, _end)(y);
+};

src/main.js

@@ -2,7 +2,7 @@ import { LitElement, html, svg } from 'lit-element';
 import localForage from 'localforage/src/localforage';
 import { stateIcon } from 'custom-card-helpers';
 import SparkMD5 from 'spark-md5';
-import { interpolateRgb } from 'd3-interpolate';
+import interpolateRgb from './interpolateRgb';
 import Graph from './graph';
 import style from './style';
 import handleClick from './handleClick';
@@ -681,7 +681,7 @@ class MiniGraphCard extends LitElement {
       const c2 = color_thresholds[index - 1];
       if (c2) {
         const factor = (c2.value - state) / (c2.value - c1.value);
-        intColor = interpolateRgb(c2.color, c1.color)(factor);
+        intColor = interpolateRgb(c2.color, c1.color, factor);
       } else {
         intColor = index
           ? color_thresholds[color_thresholds.length - 1].color

src/utils.js

@@ -22,6 +22,18 @@ const getFirstDefinedItem = (...collection) => collection.find(item => typeof it
 // eslint-disable-next-line max-len
 const compareArray = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
 
+const isAssumingCssVar = value => (typeof value === 'string' && value.trim().startsWith('var(--'));
+
+const convertCssVarToValue = (cssVar) => {
+  const name = cssVar.trim().replace('var(', '').replace(')', '');
+  let element = document.querySelector('ha-card'); // eslint-disable-line no-undef
+  if (!element)
+    element = document.body; // eslint-disable-line no-undef
+  return window
+    ? window.getComputedStyle(element).getPropertyValue(name)
+    : '#000000';
+};
+
 const log = (message) => {
   // eslint-disable-next-line no-console
   console.warn('mini-graph-card: ', message);
@@ -31,4 +43,5 @@ export {
   getMin, getAvg, getMax, getTime, getMilli, compress, decompress, log,
   getFirstDefinedItem,
   compareArray,
+  isAssumingCssVar, convertCssVarToValue,
 };