feat: use theme based on user theme preference

webapp/src/infra/ThemeLocalStorageRepository.ts

@@ -13,11 +13,16 @@ export class ThemeLocalStorageRepository implements ThemeRepository {
     const theme = global.localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme;
 
     if(!theme){
-      return DEFAULT_THEME;
+      return this.userThemePreference();
     }
 
     return theme;
   }
+  private userThemePreference(): Theme {
+    const darkThemeMq = global.matchMedia("(prefers-color-scheme: dark)");
+    const isDarkMode = darkThemeMq.matches;
+    return isDarkMode ? "dark" : "light";
+  }
   changeTheme(theme: Theme): void {
     global.localStorage.setItem(LOCAL_STORAGE_THEME_KEY, theme);
   }

webapp/tests/unit/infra/ThemeLocalStorageRepository.spec.ts

@@ -8,9 +8,11 @@ interface Storage {
 
 describe("infra :: ThemeLocalStorageRepository", () => {
 
+  const fakeMatchMedia = jest.fn();
   beforeEach(() => {
     // @ts-ignore
     global.localStorage = createMock<Storage>();
+    global.matchMedia = fakeMatchMedia;
   })
 
   const themeRepository = new ThemeLocalStorageRepository();
@@ -27,9 +29,29 @@ describe("infra :: ThemeLocalStorageRepository", () => {
   });
 
   describe('given an empty localstorage', () => {
-    it("should get the light theme", () => {
-      const theme = themeRepository.getTheme();
-      expect(theme).toBe("light");
+
+    describe('with user theme preference as dark', () => {
+      beforeEach(() => {
+        fakeMatchMedia.mockReturnValue({
+          matches: true,
+        });
+      })
+      it("should get the dark theme", () => {
+        const theme = themeRepository.getTheme();
+        expect(theme).toBe("dark");
+      });
+    })
+    describe("with user theme preference as light", () => {
+      beforeEach(() => {
+        // @ts-ignore
+        fakeMatchMedia.mockReturnValue({
+          matches: false,
+        });
+      });
+      it("should get the light theme", () => {
+        const theme = themeRepository.getTheme();
+        expect(theme).toBe("light");
+      });
     });
   });