chore: move light mode out of experimental (podman-desktop#8290)

Replaces the experimental text from appearance setting, removes FIXMEs from
system mode, and updating tests.

Fixes podman-desktop#8202.

Signed-off-by: Tim deBoer <[email protected]>

Author: deboer-tim

packages/main/src/plugin/appearance-init.ts

@@ -25,11 +25,11 @@ export class AppearanceInit {
   init(): void {
     const appearanceConfiguration: IConfigurationNode = {
       id: 'preferences.appearance',
-      title: 'Experimental Appearance',
+      title: 'Appearance',
       type: 'object',
       properties: {
         [AppearanceSettings.SectionName + '.' + AppearanceSettings.Appearance]: {
-          description: 'Experimental setting to test support for light mode',
+          description: 'Select between light or dark mode, or use your system setting.',
           type: 'string',
           enum: ['system', 'dark', 'light'],
           default: 'system',

packages/renderer/src/lib/appearance/Appearance.spec.ts

@@ -63,9 +63,7 @@ async function awaitRender(): Promise<RenderResult<Appearance>> {
   return result;
 }
 
-// temporary as only dark mode is supported as rendering for now
-// it should return empty later
-test('Expect dark mode using system when OS is set to light', async () => {
+test('Expect light mode using system when OS is set to light', async () => {
   (window as any).matchMedia = vi.fn().mockReturnValue({
     matches: false,
     addEventListener: vi.fn(),
@@ -75,11 +73,8 @@ test('Expect dark mode using system when OS is set to light', async () => {
   getConfigurationValueMock.mockResolvedValue(AppearanceSettings.SystemEnumValue);
 
   const { baseElement } = await awaitRender();
-
-  const val = getRootElementClassesValue(baseElement);
-
-  // expect to have class being "dark" as for now we force dark mode in system mode
-  expect(val).toBe('dark');
+  // expect to have no (dark) class as OS is using light
+  expect(getRootElementClassesValue(baseElement)).toBe('');
 });
 
 test('Expect dark mode using system when OS is set to dark', async () => {

packages/renderer/src/lib/appearance/appearance-util.ts

@@ -30,9 +30,6 @@ export class AppearanceUtil {
     if (appearance === AppearanceSettings.SystemEnumValue) {
       // need to read the system default theme using the window.matchMedia
       isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      //FIXME: for now we hardcode to the dark theme even if the Operatin System is using light theme
-      // as it renders correctly only in dark mode today
-      isDark = true;
     } else if (appearance === AppearanceSettings.LightEnumValue) {
       isDark = false;
     } else if (appearance === AppearanceSettings.DarkEnumValue) {
@@ -49,9 +46,7 @@ export class AppearanceUtil {
     const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 
     if (themeName === AppearanceSettings.SystemEnumValue) {
-      //FIXME: for now we hardcode to the dark theme even if the Operating System is using light theme
-      // return systemTheme;
-      return 'dark';
+      return systemTheme;
     }
 
     return themeName ?? systemTheme;

packages/renderer/src/lib/appearance/appearance-utils.spec.ts

@@ -33,9 +33,7 @@ beforeEach(() => {
   (window as any).getConfigurationValue = getConfigurationValueMock;
 });
 
-// temporary as only dark mode is supported as rendering for now
-// it should return empty later
-test('Expect dark mode using system when OS is set to light', async () => {
+test('Expect light mode using system when OS is set to light', async () => {
   (window as any).matchMedia = vi.fn().mockReturnValue({
     matches: false,
     addEventListener: vi.fn(),
@@ -44,8 +42,8 @@ test('Expect dark mode using system when OS is set to light', async () => {
 
   getConfigurationValueMock.mockResolvedValue(AppearanceSettings.SystemEnumValue);
 
-  // expect to have class being "dark" as for now we force dark mode in system mode
-  expect(await appearanceUtil.isDarkMode()).toBe(true);
+  // expect to have class being "light" as OS is using light
+  expect(await appearanceUtil.isDarkMode()).toBe(false);
 });
 
 test('Expect dark mode using system when OS is set to dark', async () => {
@@ -130,9 +128,7 @@ describe('getTheme', () => {
 
     const theme = await appearanceUtil.getTheme();
 
-    // FIXME: for now we hardcode to the dark theme even if the Operating System is using light theme
-    // expect(theme).toBe('light');
-    expect(theme).toBe('dark');
+    expect(theme).toBe('light');
   });
 
   test('should return dark if value is dark even if os is light', async () => {