chore: send event when operating system change the colors

related to #5914
Signed-off-by: Florent Benoit <fbenoit@redhat.com>

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');
+});

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