From 1002b4608ba7872009b0c48f344e206d6f2cb154 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 15 Sep 2025 16:16:11 -0700
Subject: [PATCH] fix: resolve dark mode compatibility issues in BigNumber and
 Heatmap visualizations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BigNumber with Trendline: Replace hardcoded supersetTheme.colorBgContainer with 'transparent' in sparkline gradient
- Heatmap: Use live theme.colorText with alpha transparency instead of static supersetTheme colors for emphasis styles

Both visualizations now properly support theme switching without visual artifacts in dark mode.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../BigNumber/BigNumberWithTrendline/transformProps.ts    | 3 +--
 .../plugin-chart-echarts/src/Heatmap/transformProps.ts    | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
index 2e172448d658..20cc94174247 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
@@ -25,7 +25,6 @@ import {
   getXAxisLabel,
   Metric,
   getValueFormatter,
-  supersetTheme,
   t,
   tooltipHtml,
 } from '@superset-ui/core';
@@ -281,7 +280,7 @@ export default function transformProps(
                 },
                 {
                   offset: 1,
-                  color: supersetTheme.colorBgContainer,
+                  color: 'transparent',
                 },
               ]),
             },
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts
index ea1b52f92c15..92c90bb481a9 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts
@@ -27,7 +27,6 @@ import {
   getValueFormatter,
   rgbToHex,
   addAlpha,
-  supersetTheme,
   tooltipHtml,
 } from '@superset-ui/core';
 import memoizeOne from 'memoize-one';
@@ -78,7 +77,8 @@ export default function transformProps(
   chartProps: HeatmapChartProps,
 ): HeatmapTransformedProps {
   const refs: Refs = {};
-  const { width, height, formData, queriesData, datasource } = chartProps;
+  const { width, height, formData, queriesData, datasource, theme } =
+    chartProps;
   const {
     bottomMargin,
     xAxis,
@@ -176,9 +176,9 @@ export default function transformProps(
       },
       emphasis: {
         itemStyle: {
-          borderColor: supersetTheme.colorBgContainer,
+          borderColor: 'transparent',
           shadowBlur: 10,
-          shadowColor: supersetTheme.colorTextBase,
+          shadowColor: addAlpha(theme.colorText, 0.3),
         },
       },
     },