diff --git a/packages/app/src/App.test.tsx b/packages/app/src/App.test.tsx
index 83fcc039a3..79f78e45e0 100644
--- a/packages/app/src/App.test.tsx
+++ b/packages/app/src/App.test.tsx
@@ -24,8 +24,8 @@ describe('App', () => {
       value: jest.fn(() => {
         return {
           matches: true,
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
         };
       }),
     });
diff --git a/packages/app/src/ThemeContext.tsx b/packages/app/src/ThemeContext.tsx
index 4ee76d400e..3d5a04f22a 100644
--- a/packages/app/src/ThemeContext.tsx
+++ b/packages/app/src/ThemeContext.tsx
@@ -41,9 +41,9 @@ export function useThemeType(themeId: string): [string, () => void] {
         setTheme('auto');
       }
     };
-    mql.addEventListener('change', darkListener);
+    mql.addListener(darkListener);
     return () => {
-      mql.removeEventListener('change', darkListener);
+      mql.removeListener(darkListener);
     };
   });
   function toggleTheme() {