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/Timeseries/Area/index.ts

@@ -21,11 +21,13 @@ 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';
 import {
   EchartsTimeseriesChartProps,
   EchartsTimeseriesFormData,
 } from '../types';
 import example1 from './images/Area1.png';
+import example1Dark from './images/Area1-dark.png';
 import { EchartsChartPlugin } from '../../types';
 
 const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
@@ -54,7 +56,7 @@ export default class EchartsAreaChartPlugin extends EchartsChartPlugin<
         description: t(
           'Area charts are similar to line charts in that they represent variables with the same scale, but area charts stack the metrics on top of each other.',
         ),
-        exampleGallery: [{ url: example1 }],
+        exampleGallery: [{ url: example1, urlDark: example1Dark }],
         supportedAnnotationTypes: [
           AnnotationType.Event,
           AnnotationType.Formula,
@@ -73,6 +75,7 @@ export default class EchartsAreaChartPlugin extends EchartsChartPlugin<
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps: areaTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts

@@ -27,9 +27,13 @@ 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';
 import example1 from './images/Bar1.png';
+import example1Dark from './images/Bar1-dark.png';
 import example2 from './images/Bar2.png';
+import example2Dark from './images/Bar2-dark.png';
 import example3 from './images/Bar3.png';
+import example3Dark from './images/Bar3-dark.png';
 
 const barTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
   transformProps({
@@ -61,9 +65,9 @@ export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
           'Bar Charts are used to show metrics as a series of bars.',
         ),
         exampleGallery: [
-          { url: example1 },
-          { url: example2 },
-          { url: example3 },
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+          { url: example3, urlDark: example3Dark },
         ],
         supportedAnnotationTypes: [
           AnnotationType.Event,
@@ -83,6 +87,7 @@ export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps: barTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts

@@ -26,8 +26,11 @@ 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';
 import example1 from './images/Line1.png';
+import example1Dark from './images/Line1-dark.png';
 import example2 from './images/Line2.png';
+import example2Dark from './images/Line2-dark.png';
 import { EchartsChartPlugin } from '../../../types';
 
 const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
@@ -59,7 +62,10 @@ export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin
         description: t(
           'Line chart is used to visualize measurements taken over a given category. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.',
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         canBeAnnotationTypes: [AnnotationType.Timeseries],
         supportedAnnotationTypes: [
           AnnotationType.Event,
@@ -76,6 +82,7 @@ export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps: lineTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts

@@ -26,7 +26,9 @@ 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';
 import example1 from './images/Scatter1.png';
+import example1Dark from './images/Scatter1-dark.png';
 import { EchartsChartPlugin } from '../../../types';
 
 const scatterTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
@@ -58,7 +60,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlu
         description: t(
           'Scatter Plot has the horizontal axis in linear units, and the points are connected in order. It shows a statistical relationship between two variables.',
         ),
-        exampleGallery: [{ url: example1 }],
+        exampleGallery: [{ url: example1, urlDark: example1Dark }],
         supportedAnnotationTypes: [
           AnnotationType.Event,
           AnnotationType.Formula,
@@ -76,6 +78,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlu
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps: scatterTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts

@@ -26,7 +26,9 @@ 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';
 import example1 from './images/SmoothLine1.png';
+import example1Dark from './images/SmoothLine1-dark.png';
 import { EchartsChartPlugin } from '../../../types';
 
 const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
@@ -58,7 +60,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChart
         description: t(
           'Smooth-line is a variation of the line chart. Without angles and hard edges, Smooth-line sometimes looks smarter and more professional.',
         ),
-        exampleGallery: [{ url: example1 }],
+        exampleGallery: [{ url: example1, urlDark: example1Dark }],
         supportedAnnotationTypes: [
           AnnotationType.Event,
           AnnotationType.Formula,
@@ -75,6 +77,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChart
           t('Transformable'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps: smoothTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts

@@ -22,8 +22,11 @@ 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';
 import example1 from './images/Step1.png';
+import example1Dark from './images/Step1-dark.png';
 import example2 from './images/Step2.png';
+import example2Dark from './images/Step2-dark.png';
 import { EchartsChartPlugin } from '../../types';
 
 export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin<
@@ -46,7 +49,10 @@ export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin
         description: t(
           'Stepped-line graph (also called step chart) is a variation of line chart but with the line forming a series of steps between data points. A step chart can be useful when you want to show the changes that occur at irregular intervals.',
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         supportedAnnotationTypes: [
           AnnotationType.Event,
           AnnotationType.Formula,
@@ -63,6 +69,7 @@ export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin
           t('Stacked'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

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

@@ -21,11 +21,13 @@ import buildQuery from './buildQuery';
 import controlPanel from './Regular/Line/controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import {
   EchartsTimeseriesChartProps,
   EchartsTimeseriesFormData,
 } from './types';
 import example from './images/Time-series_Chart.jpg';
+import exampleDark from './images/Time-series_Chart-dark.jpg';
 import { EchartsChartPlugin } from '../types';
 
 export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
@@ -48,7 +50,7 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
         description: t(
           'Swiss army knife for visualizing data. Choose between step, line, scatter, and bar charts. This viz type has many customization options as well.',
         ),
-        exampleGallery: [{ url: example }],
+        exampleGallery: [{ url: example, urlDark: exampleDark }],
         supportedAnnotationTypes: [
           AnnotationType.Event,
           AnnotationType.Formula,
@@ -65,6 +67,7 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
           t('Transformable'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });