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

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

superset-frontend/src/theme/tests/ThemeController.test.ts

@@ -320,8 +320,18 @@ describe('ThemeController', () => {
       }),
     );
 
+    // Provide an explicit light theme fallback for this test
+    const lightThemeFallback = {
+      token: {
+        colorBgBase: '#fff',
+        colorTextBase: '#000',
+        colorPrimary: '#1890ff',
+      },
+    };
+
     controller = new ThemeController({
       themeObject: mockThemeObject,
+      defaultTheme: lightThemeFallback,
     });
 
     // When only dark theme is available, controller uses the default fallback theme initially
@@ -330,8 +340,8 @@ describe('ThemeController', () => {
     const calledWith = mockSetConfig.mock.calls[0][0];
 
     // Should use the default theme fallback (not dark) for initial load
-    expect(calledWith.colorBgBase).toBe('#fff');
-    expect(calledWith.colorTextBase).toBe('#000');
+    expect(calledWith.token.colorBgBase).toBe('#fff');
+    expect(calledWith.token.colorTextBase).toBe('#000');
 
     // Should allow mode changes since dark theme exists
     expect(controller.canSetMode()).toBe(true);
@@ -548,6 +558,41 @@ describe('ThemeController', () => {
 
       expect(mockSetConfig).toHaveBeenCalledTimes(initialCallCount);
     });
+
+    it('should switch to dark theme when system is dark and mode is SYSTEM', () => {
+      // Setup with both light and dark themes available
+      mockGetBootstrapData.mockReturnValue(
+        createMockBootstrapData({
+          default: DEFAULT_THEME,
+          dark: DARK_THEME,
+        }),
+      );
+
+      // Setup mock media query to return dark mode preference
+      const mockMediaQueryDark = {
+        matches: true, // System is in dark mode
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      };
+      mockMatchMedia.mockReturnValue(mockMediaQueryDark);
+
+      // Create fresh controller instance with dark system preference
+      controller = new ThemeController({
+        themeObject: mockThemeObject,
+      });
+
+      // Verify system mode is set by default
+      expect(controller.getCurrentMode()).toBe(ThemeMode.SYSTEM);
+
+      // Verify that dark theme was applied during initialization
+      expect(mockSetConfig).toHaveBeenCalled();
+      const lastCall =
+        mockSetConfig.mock.calls[mockSetConfig.mock.calls.length - 1][0];
+      expect(lastCall.token.colorBgBase).toBe(DARK_THEME.token!.colorBgBase);
+      expect(lastCall.token.colorTextBase).toBe(
+        DARK_THEME.token!.colorTextBase,
+      );
+    });
   });
 
   describe('Persistence', () => {