2 files changed, 9 insertions, 10 deletions

diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 5aaf3ad1..6f9a712e 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -313,7 +313,11 @@ ContrastThemeProvider.defaultProps = {
   children: undefined,
 };
 
-function ThemeProvider({ children }: { children?: ReactNode }): JSX.Element {
+const ThemeProvider = observer(function ThemeProvider({
+  children,
+}: {
+  children?: ReactNode;
+}): JSX.Element {
   const {
     themeStore: { darkMode },
   } = useRootStore();
@@ -326,10 +330,10 @@ function ThemeProvider({ children }: { children?: ReactNode }): JSX.Element {
       {children}
     </ThemeAndContrastThemeProvider>
   );
-}
+});
 
 ThemeProvider.defaultProps = {
   children: undefined,
 };
 
-export default observer(ThemeProvider);
+export default ThemeProvider;
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index 6fbd9f90..e09d8d99 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -1,4 +1,4 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { makeAutoObservable } from 'mobx';
 
 export enum ThemePreference {
   System,
@@ -17,12 +17,7 @@ export default class ThemeStore {
     mediaQuery.addEventListener('change', (event) => {
       this.systemDarkMode = event.matches;
     });
-    makeObservable(this, {
-      preference: observable,
-      systemDarkMode: observable,
-      darkMode: computed,
-      toggleDarkMode: action,
-    });
+    makeAutoObservable(this);
   }
 
   get darkMode(): boolean {