feat: Add comprehensive dark mode support for chart thumbnails and examples (#35111)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts

@@ -21,6 +21,7 @@ import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 
 export default class PopKPIPlugin extends ChartPlugin {
   constructor() {
@@ -38,6 +39,7 @@ export default class PopKPIPlugin extends ChartPlugin {
         t('Advanced-Analytics'),
       ],
       thumbnail,
+      thumbnailDark,
     });
 
     super({

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts

@@ -21,8 +21,11 @@ import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
 import example1 from './images/BigNumber.jpg';
+import example1Dark from './images/BigNumber-dark.jpg';
 import example2 from './images/BigNumber2.jpg';
+import example2Dark from './images/BigNumber2-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import { BigNumberTotalChartProps, BigNumberTotalFormData } from '../types';
 import { EchartsChartPlugin } from '../../types';
 
@@ -32,8 +35,8 @@ const metadata = {
     'Showcases a single metric front-and-center. Big number is best used to call attention to a KPI or the one thing you want your audience to focus on.',
   ),
   exampleGallery: [
-    { url: example1, caption: t('A Big Number') },
-    { url: example2, caption: t('With a subheader') },
+    { url: example1, urlDark: example1Dark, caption: t('A Big Number') },
+    { url: example2, urlDark: example2Dark, caption: t('With a subheader') },
   ],
   name: t('Big Number'),
   tags: [
@@ -46,6 +49,7 @@ const metadata = {
     t('Report'),
   ],
   thumbnail,
+  thumbnailDark,
   behaviors: [Behavior.DrillToDetail],
 };
 

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts

@@ -21,7 +21,9 @@ import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
 import example from './images/Big_Number_Trendline.jpg';
+import exampleDark from './images/Big_Number_Trendline-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import {
   BigNumberWithTrendlineChartProps,
   BigNumberWithTrendlineFormData,
@@ -33,7 +35,7 @@ const metadata = {
   description: t(
     'Showcases a single number accompanied by a simple line chart, to call attention to an important metric along with its change over time or other dimension.',
   ),
-  exampleGallery: [{ url: example }],
+  exampleGallery: [{ url: example, urlDark: exampleDark }],
   name: t('Big Number with Trendline'),
   tags: [
     t('Advanced-Analytics'),
@@ -45,6 +47,7 @@ const metadata = {
     t('Trend'),
   ],
   thumbnail,
+  thumbnailDark,
   behaviors: [Behavior.DrillToDetail],
 };