From e8e4ebb404c74b5d6bac74ed3efb0e7ac3a0d950 Mon Sep 17 00:00:00 2001
From: Florent Benoit <fbenoit@redhat.com>
Date: Sun, 11 Feb 2024 11:30:18 +0100
Subject: [PATCH] chore: send event when operating system change the colors

related to https://github.com/containers/podman-desktop/issues/5914
Signed-off-by: Florent Benoit <fbenoit@redhat.com>
---
 .../src/lib/appearance/Appearance.spec.ts     | 29 ++++++++++++++++++-
 .../src/lib/appearance/Appearance.svelte      |  2 ++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/renderer/src/lib/appearance/Appearance.spec.ts b/packages/renderer/src/lib/appearance/Appearance.spec.ts
index 393b4e9885f2..8a3127bfb432 100644
--- a/packages/renderer/src/lib/appearance/Appearance.spec.ts
+++ b/packages/renderer/src/lib/appearance/Appearance.spec.ts
@@ -24,13 +24,14 @@ import Appearance from './Appearance.svelte';
 import { AppearanceSettings } from '../../../../main/src/plugin/appearance-settings';
 
 const getConfigurationValueMock = vi.fn();
+const addEventListenerMock = vi.fn();
 
 beforeEach(() => {
   vi.resetAllMocks();
   (window as any).getConfigurationValue = getConfigurationValueMock;
   (window as any).matchMedia = vi.fn().mockReturnValue({
     matches: false,
-    addEventListener: vi.fn(),
+    addEventListener: addEventListenerMock,
     removeEventListener: vi.fn(),
   });
 });
@@ -113,3 +114,29 @@ test('Expect dark mode using dark configuration', async () => {
   // expect to have color-scheme: dark
   expect(getRootElement(container)).toHaveStyle('color-scheme: dark');
 });
+
+test('Expect event being changed when changing the default appearance on the operating system', async () => {
+  const spyDispatchEvent = vi.spyOn(window, 'dispatchEvent');
+
+  let userCallback: () => void = () => {};
+  addEventListenerMock.mockImplementation((event: string, callback: () => void) => {
+    if (event === 'change') {
+      userCallback = callback;
+    }
+  });
+
+  await awaitRender();
+
+  // check no dispatched event for now
+  expect(spyDispatchEvent).not.toHaveBeenCalled();
+
+  // call the callback on matchMedia
+  userCallback();
+
+  // check dispatched event
+  expect(spyDispatchEvent).toHaveBeenCalled();
+
+  // get details of the event
+  const event = spyDispatchEvent.mock.calls[0][0];
+  expect(event.type).toBe('appearance-changed');
+});
diff --git a/packages/renderer/src/lib/appearance/Appearance.svelte b/packages/renderer/src/lib/appearance/Appearance.svelte
index 12529dd64824..c3a19d1d1776 100644
--- a/packages/renderer/src/lib/appearance/Appearance.svelte
+++ b/packages/renderer/src/lib/appearance/Appearance.svelte
@@ -32,6 +32,8 @@ onMount(async () => {
   // add a listener for the appearance change in case user change setting on the Operating System
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
     updateAppearance();
+    // notify changes
+    window.dispatchEvent(new Event('appearance-changed'));
   });
 });