chore: light dark mode for banners (podman-desktop#8343)

Author: cdrage

packages/main/src/plugin/recommendations/recommendations-api.ts

@@ -26,7 +26,9 @@ export interface ExtensionBanner {
   thumbnail: string;
   publishDate?: string;
   background?: {
-    image?: string;
+    // Light and dark colors for the backgrounds in base64. Ex: "data:image/png;base64,<data-here>"
+    light?: string;
+    dark?: string;
     gradient?: {
       start: string;
       end: string;

packages/renderer/src/lib/recommendation/ExtensionBanner.spec.ts

@@ -17,6 +17,7 @@
  ***********************************************************************/
 
 import { render, screen } from '@testing-library/svelte';
+import { tick } from 'svelte';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import ExtensionBanner from '/@/lib/recommendation/ExtensionBanner.svelte';
@@ -54,7 +55,8 @@ const gradientBackground: IExtensionBanner = {
 const imageBackground: IExtensionBanner = {
   ...baseBanner,
   background: {
-    image: 'data:image/png;base64-image',
+    light: 'data:image/png;base64-image-light',
+    dark: 'data:image/png;base64-image-dark',
   },
 };
 
@@ -65,6 +67,7 @@ beforeEach(() => {
 test('banner icon should be visible', () => {
   render(ExtensionBanner, {
     banner: baseBanner,
+    isDark: true,
   });
 
   const img = screen.getByAltText('banner icon');
@@ -75,6 +78,7 @@ test('banner icon should be visible', () => {
 test('thumbnail should be visible', () => {
   render(ExtensionBanner, {
     banner: baseBanner,
+    isDark: true,
   });
 
   const img = screen.getByAltText('banner thumbnail');
@@ -86,6 +90,7 @@ describe('backgrounds', () => {
   test('expect default gradient background', () => {
     render(ExtensionBanner, {
       banner: baseBanner,
+      isDark: true,
     });
 
     const card = screen.getByLabelText('Recommended extension');
@@ -97,20 +102,40 @@ describe('backgrounds', () => {
   test('expect linear gradient background', () => {
     render(ExtensionBanner, {
       banner: gradientBackground,
+      isDark: true,
     });
+    tick();
 
     const card = screen.getByLabelText('Recommended extension');
     expect(card).toBeDefined();
     expect(card.attributes.getNamedItem('style')?.value).toBe('background: linear-gradient(#fff, #000);');
   });
 
-  test('expect image background', () => {
+  test('expect image background for dark theme', () => {
     render(ExtensionBanner, {
       banner: imageBackground,
+      isDark: true,
     });
+    tick();
 
     const card = screen.getByLabelText('Recommended extension');
     expect(card).toBeDefined();
-    expect(card.attributes.getNamedItem('style')?.value).toBe('background-image: url("data:image/png;base64-image");');
+    expect(card.attributes.getNamedItem('style')?.value).toBe(
+      'background-image: url("data:image/png;base64-image-dark");',
+    );
+  });
+
+  test('expect image background for light theme', () => {
+    render(ExtensionBanner, {
+      banner: imageBackground,
+      isDark: false,
+    });
+    tick();
+
+    const card = screen.getByLabelText('Recommended extension');
+    expect(card).toBeDefined();
+    expect(card.attributes.getNamedItem('style')?.value).toBe(
+      'background-image: url("data:image/png;base64-image-light");',
+    );
   });
 });

packages/renderer/src/lib/recommendation/ExtensionBanner.svelte

@@ -6,15 +6,20 @@ import FeaturedExtension from '/@/lib/featured/FeaturedExtension.svelte';
 import type { ExtensionBanner } from '../../../../main/src/plugin/recommendations/recommendations-api';
 
 export let banner: ExtensionBanner;
+// Pass in the theme appearance colour of PD to the banner, we do it here so we don't have to do multiple isDarkMode() checks when rendering multiple banners.
+export let isDark: boolean;
 
 let style: string | undefined = undefined;
-let hasBackground: boolean = !!banner.background && (!!banner.background.image || !!banner.background.gradient);
+let hasBackground: boolean =
+  !!banner.background && ((!!banner.background.dark && !!banner.background.light) || !!banner.background.gradient);
 
 onMount(() => {
   if (banner.background?.gradient) {
     style = `background: linear-gradient(${banner.background.gradient.start}, ${banner.background.gradient.end});`;
-  } else if (banner.background?.image) {
-    style = `background-image: url("${banner.background.image}");`;
+  } else if (isDark && banner.background?.dark) {
+    style = `background-image: url("${banner.background.dark}");`;
+  } else if (!isDark && banner.background?.light) {
+    style = `background-image: url("${banner.background.light}");`;
   } else {
     style = undefined;
   }

packages/renderer/src/lib/recommendation/ExtensionBanners.spec.ts

@@ -28,8 +28,13 @@ import type { ExtensionBanner } from '../../../../main/src/plugin/recommendation
 
 const getExtensionBannersMock = vi.fn();
 
+// mock window.getConfigurationValue
+const getConfigurationValueMock = vi.fn();
+
 // fake the window.events object
 beforeEach(() => {
+  vi.resetAllMocks();
+  (window as any).getConfigurationValue = getConfigurationValueMock;
   (window as any).getExtensionBanners = getExtensionBannersMock;
   (window.events as unknown) = {
     receive: (_channel: string, func: any) => {

packages/renderer/src/lib/recommendation/ExtensionBanners.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
+import { onMount } from 'svelte';
+
 import ExtensionBanner from '/@/lib/recommendation/ExtensionBanner.svelte';
 import { extensionBannerInfos } from '/@/stores/extensionBanners';
+
+import { AppearanceUtil } from '../appearance/appearance-util';
+
+let isDark: boolean;
+
+onMount(async () => {
+  // Retrieve the current theme appearance colour of PD for the banners we will be showing
+  const appearanceUtil = new AppearanceUtil();
+  isDark = await appearanceUtil.isDarkMode();
+});
 </script>
 
 {#each $extensionBannerInfos as banner (banner.extensionId)}
-  <ExtensionBanner banner={banner} />
+  <ExtensionBanner banner={banner} isDark={isDark} />
 {/each}