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],
 };
 

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

@@ -21,7 +21,9 @@ import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import example from './images/BoxPlot.jpg';
+import exampleDark from './images/BoxPlot-dark.jpg';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import { BoxPlotQueryFormData, EchartsBoxPlotChartProps } from './types';
 import { EchartsChartPlugin } from '../types';
 
@@ -55,10 +57,11 @@ export default class EchartsBoxPlotChartPlugin extends EchartsChartPlugin<
         description: t(
           'Also known as a box and whisker plot, this visualization compares the distributions of a related metric across multiple groups. The box in the middle emphasizes the mean, median, and inner 2 quartiles. The whiskers around each box visualize the min, max, range, and outer 2 quartiles.',
         ),
-        exampleGallery: [{ url: example }],
+        exampleGallery: [{ url: example, urlDark: exampleDark }],
         name: t('Box Plot'),
         tags: [t('ECharts'), t('Range'), t('Statistical'), t('Featured')],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

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

@@ -18,11 +18,14 @@
  */
 import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import example1 from './images/example1.png';
+import example1Dark from './images/example1-dark.png';
 import example2 from './images/example2.png';
+import example2Dark from './images/example2-dark.png';
 import { EchartsBubbleChartProps, EchartsBubbleFormData } from './types';
 
 // TODO: Implement cross filtering
@@ -41,7 +44,10 @@ export default class EchartsBubbleChartPlugin extends ChartPlugin<
         description: t(
           'Visualizes a metric across three dimensions of data in a single chart (X axis, Y axis, and bubble size). Bubbles from the same group can be showcased using bubble color.',
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         name: t('Bubble Chart'),
         tags: [
           t('Multi-Dimensions'),
@@ -53,6 +59,7 @@ export default class EchartsBubbleChartPlugin extends ChartPlugin<
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       }),
       transformProps,
     });

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

@@ -21,7 +21,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 example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import { EchartsFunnelChartProps, EchartsFunnelFormData } from './types';
 import { EchartsChartPlugin } from '../types';
 
@@ -55,7 +57,7 @@ export default class EchartsFunnelChartPlugin extends EchartsChartPlugin<
         description: t(
           'Showcases how a metric changes as the funnel progresses. This classic chart is useful for visualizing drop-off between stages in a pipeline or lifecycle.',
         ),
-        exampleGallery: [{ url: example }],
+        exampleGallery: [{ url: example, urlDark: exampleDark }],
         name: t('Funnel Chart'),
         tags: [
           t('Business'),
@@ -67,6 +69,7 @@ export default class EchartsFunnelChartPlugin extends EchartsChartPlugin<
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

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

@@ -22,8 +22,11 @@ import controlPanel from './controlPanel';
 import buildQuery from './buildQuery';
 import { EchartsChartPlugin } from '../types';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example1 from './images/example1.png';
+import example1Dark from './images/example1-dark.png';
 import example2 from './images/example2.png';
+import example2Dark from './images/example2-dark.png';
 
 export default class EchartsGanttChartPlugin extends EchartsChartPlugin {
   constructor() {
@@ -46,7 +49,11 @@ export default class EchartsGanttChartPlugin extends EchartsChartPlugin {
         ),
         tags: [t('ECharts'), t('Featured'), t('Timeline'), t('Time')],
         thumbnail,
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        thumbnailDark,
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
       },
       transformProps,
     });

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

@@ -20,8 +20,11 @@ import { t, Behavior } from '@superset-ui/core';
 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/example1.jpg';
+import example1Dark from './images/example1-dark.jpg';
 import example2 from './images/example2.jpg';
+import example2Dark from './images/example2-dark.jpg';
 import buildQuery from './buildQuery';
 import { EchartsGaugeChartProps, EchartsGaugeFormData } from './types';
 import { EchartsChartPlugin } from '../types';
@@ -46,7 +49,10 @@ export default class EchartsGaugeChartPlugin extends EchartsChartPlugin<
         description: t(
           'Uses a gauge to showcase progress of a metric towards a target. The position of the dial represents the progress and the terminal value in the gauge represents the target value.',
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         name: t('Gauge Chart'),
         tags: [
           t('Multi-Variables'),
@@ -57,6 +63,7 @@ export default class EchartsGaugeChartPlugin extends EchartsChartPlugin<
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

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

@@ -20,7 +20,9 @@ import { Behavior, t } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import buildQuery from './buildQuery';
 import { EchartsChartPlugin } from '../types';
 
@@ -36,7 +38,7 @@ export default class EchartsGraphChartPlugin extends EchartsChartPlugin {
         description: t(
           'Displays connections between entities in a graph structure. Useful for mapping relationships and showing which nodes are important in a network. Graph charts can be configured to be force-directed or circulate. If your data has a geospatial component, try the deck.gl Arc chart.',
         ),
-        exampleGallery: [{ url: example }],
+        exampleGallery: [{ url: example, urlDark: exampleDark }],
         name: t('Graph Chart'),
         tags: [
           t('Circular'),
@@ -49,6 +51,7 @@ export default class EchartsGraphChartPlugin extends EchartsChartPlugin {
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
         behaviors: [
           Behavior.InteractiveChart,
           Behavior.DrillToDetail,

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

@@ -20,9 +20,13 @@ import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
 import example1 from './images/example1.png';
+import example1Dark from './images/example1-dark.png';
 import example2 from './images/example2.png';
+import example2Dark from './images/example2-dark.png';
 import example3 from './images/example3.png';
+import example3Dark from './images/example3-dark.png';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -30,7 +34,11 @@ const metadata = new ChartMetadata({
   description: t(
     'Visualize a related metric across pairs of groups. Heatmaps excel at showcasing the correlation or strength between two groups. Color is used to emphasize the strength of the link between each pair of groups.',
   ),
-  exampleGallery: [{ url: example1 }, { url: example2 }, { url: example3 }],
+  exampleGallery: [
+    { url: example1, urlDark: example1Dark },
+    { url: example2, urlDark: example2Dark },
+    { url: example3, urlDark: example3Dark },
+  ],
   name: t('Heatmap'),
   tags: [
     t('Business'),
@@ -41,6 +49,7 @@ const metadata = new ChartMetadata({
     t('Featured'),
   ],
   thumbnail,
+  thumbnailDark,
 });
 
 export default class EchartsHeatmapChartPlugin extends ChartPlugin {

superset-frontend/plugins/plugin-chart-echarts/src/Histogram/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/example1.png';
 import example2 from './images/example2.png';
+import example1Dark from './images/example1-dark.png';
+import example2Dark from './images/example2-dark.png';
 import { HistogramChartProps, HistogramFormData } from './types';
 
 // TODO: Implement cross filtering
@@ -55,10 +58,14 @@ export default class EchartsHistogramChartPlugin extends ChartPlugin<
           It helps visualize patterns, clusters, and outliers in the data and provides
           insights into its shape, central tendency, and spread.`,
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         name: t('Histogram'),
         tags: [t('Comparison'), t('ECharts'), t('Pattern'), t('Range')],
         thumbnail,
+        thumbnailDark,
       }),
       transformProps,
     });

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

@@ -21,7 +21,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 example from './images/example.jpg';
+import exampleDark from './images/example-dark.jpg';
 import {
   EchartsMixedTimeseriesFormData,
   EchartsMixedTimeseriesProps,
@@ -64,9 +66,10 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
           AnnotationType.Interval,
           AnnotationType.Timeseries,
         ],
-        exampleGallery: [{ url: example }],
+        exampleGallery: [{ url: example, urlDark: exampleDark }],
         name: t('Mixed Chart'),
         thumbnail,
+        thumbnailDark,
         tags: [
           t('Advanced-Analytics'),
           t('ECharts'),

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

@@ -21,10 +21,15 @@ 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/Pie1.jpg';
+import example1Dark from './images/Pie1-dark.jpg';
 import example2 from './images/Pie2.jpg';
+import example2Dark from './images/Pie2-dark.jpg';
 import example3 from './images/Pie3.jpg';
+import example3Dark from './images/Pie3-dark.jpg';
 import example4 from './images/Pie4.jpg';
+import example4Dark from './images/Pie4-dark.jpg';
 import { EchartsPieChartProps, EchartsPieFormData } from './types';
 import { EchartsChartPlugin } from '../types';
 
@@ -60,10 +65,10 @@ export default class EchartsPieChartPlugin extends EchartsChartPlugin<
 
         Pie charts can be difficult to interpret precisely. If clarity of relative proportion is important, consider using a bar or other chart type instead.`),
         exampleGallery: [
-          { url: example1 },
-          { url: example2 },
-          { url: example3 },
-          { url: example4 },
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+          { url: example3, urlDark: example3Dark },
+          { url: example4, urlDark: example4Dark },
         ],
         name: t('Pie Chart'),
         tags: [
@@ -77,6 +82,7 @@ export default class EchartsPieChartPlugin extends EchartsChartPlugin<
           t('Nightingale'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Radar/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/example1.jpg';
+import example1Dark from './images/example1-dark.jpg';
 import example2 from './images/example2.jpg';
+import example2Dark from './images/example2-dark.jpg';
 import { EchartsRadarChartProps, EchartsRadarFormData } from './types';
 import { EchartsChartPlugin } from '../types';
 
@@ -57,7 +60,10 @@ export default class EchartsRadarChartPlugin extends EchartsChartPlugin<
         description: t(
           'Visualize a parallel set of metrics across multiple groups. Each group is visualized using its own line of points and each metric is represented as an edge in the chart.',
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         name: t('Radar Chart'),
         tags: [
           t('Business'),
@@ -69,6 +75,7 @@ export default class EchartsRadarChartPlugin extends EchartsChartPlugin<
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Sankey/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/example1.png';
+import example1Dark from './images/example1-dark.png';
 import example2 from './images/example2.png';
+import example2Dark from './images/example2-dark.png';
 import { SankeyChartProps, SankeyFormData } from './types';
 
 // TODO: Implement cross filtering
@@ -55,10 +58,14 @@ export default class EchartsSankeyChartPlugin extends ChartPlugin<
           height corresponds to the visualized metric, providing a clear representation of
           value distribution and transformation.`,
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         name: t('Sankey Chart'),
         tags: [t('Directional'), t('ECharts'), t('Distribution'), t('Flow')],
         thumbnail,
+        thumbnailDark,
       }),
       transformProps,
     });

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

@@ -19,10 +19,13 @@
 import { Behavior, t } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import controlPanel from './controlPanel';
 import buildQuery from './buildQuery';
 import example1 from './images/Sunburst1.png';
+import example1Dark from './images/Sunburst1-dark.png';
 import example2 from './images/Sunburst2.png';
+import example2Dark from './images/Sunburst2-dark.png';
 import { EchartsChartPlugin } from '../types';
 
 export default class EchartsSunburstChartPlugin extends EchartsChartPlugin {
@@ -42,7 +45,10 @@ export default class EchartsSunburstChartPlugin extends EchartsChartPlugin {
         description: t(
           'Uses circles to visualize the flow of data through different stages of a system. Hover over individual paths in the visualization to understand the stages a value took. Useful for multi-stage, multi-group visualizing funnels and pipelines.',
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         name: t('Sunburst Chart'),
         tags: [
           t('ECharts'),
@@ -51,6 +57,7 @@ export default class EchartsSunburstChartPlugin extends EchartsChartPlugin {
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

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,
     });

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

@@ -20,7 +20,9 @@ import { t } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
+import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/tree.png';
+import exampleDark from './images/tree-dark.png';
 import buildQuery from './buildQuery';
 import { EchartsChartPlugin } from '../types';
 
@@ -36,7 +38,7 @@ export default class EchartsTreeChartPlugin extends EchartsChartPlugin {
         description: t(
           'Visualize multiple levels of hierarchy using a familiar tree-like structure.',
         ),
-        exampleGallery: [{ url: example }],
+        exampleGallery: [{ url: example, urlDark: exampleDark }],
         name: t('Tree Chart'),
         tags: [
           t('Categorical'),
@@ -47,6 +49,7 @@ export default class EchartsTreeChartPlugin extends EchartsChartPlugin {
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/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/treemap_v2_1.png';
+import example1Dark from './images/treemap_v2_1-dark.png';
 import example2 from './images/treemap_v2_2.jpg';
+import example2Dark from './images/treemap_v2_2-dark.jpg';
 import { EchartsTreemapChartProps, EchartsTreemapFormData } from './types';
 import { EchartsChartPlugin } from '../types';
 
@@ -57,7 +60,10 @@ export default class EchartsTreemapChartPlugin extends EchartsChartPlugin<
         description: t(
           'Show hierarchical relationships of data, with the value represented by area, showing proportion and contribution to the whole.',
         ),
-        exampleGallery: [{ url: example1 }, { url: example2 }],
+        exampleGallery: [
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+        ],
         name: t('Treemap'),
         tags: [
           t('Categorical'),
@@ -69,6 +75,7 @@ export default class EchartsTreemapChartPlugin extends EchartsChartPlugin<
           t('Featured'),
         ],
         thumbnail,
+        thumbnailDark,
       },
       transformProps,
     });

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

@@ -22,9 +22,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/example1.png';
 import example2 from './images/example2.png';
 import example3 from './images/example3.png';
+import example1Dark from './images/example1-dark.png';
+import example2Dark from './images/example2-dark.png';
+import example3Dark from './images/example3-dark.png';
 import { EchartsWaterfallChartProps, EchartsWaterfallFormData } from './types';
 
 // TODO: Implement cross filtering
@@ -56,13 +60,14 @@ export default class EchartsWaterfallChartPlugin extends ChartPlugin<
           These intermediate values can either be time based or category based.`,
         ),
         exampleGallery: [
-          { url: example1 },
-          { url: example2 },
-          { url: example3 },
+          { url: example1, urlDark: example1Dark },
+          { url: example2, urlDark: example2Dark },
+          { url: example3, urlDark: example3Dark },
         ],
         name: t('Waterfall Chart'),
         tags: [t('Categorical'), t('Comparison'), t('ECharts'), t('Featured')],
         thumbnail,
+        thumbnailDark,
       }),
       transformProps,
     });