Update

packages/desktop-client/src/components/App.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import {
@@ -128,7 +128,7 @@ export function App() {
   );
   const dispatch = useDispatch();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     function checkScrollbars() {
       if (hiddenScrollbars !== hasHiddenScrollbars()) {
         setHiddenScrollbars(hasHiddenScrollbars());

packages/desktop-client/src/style/theme.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 
 import { isNonProductionEnvironment } from 'loot-core/src/shared/environment';
 import type { DarkTheme, Theme } from 'loot-core/src/types/prefs';
@@ -52,42 +52,44 @@ export function ThemeStyle() {
     | undefined
   >(undefined);
 
+  const setAutoThemeColors = useCallback(
+    (isDarkMode: boolean) => {
+      if (isDarkMode) {
+        setThemeColors(themes[darkThemePreference].colors);
+      } else {
+        setThemeColors(themes['light'].colors);
+      }
+    },
+    [darkThemePreference],
+  );
+
+  useLayoutEffect(() => {
+    if (theme === 'auto') {
+      const isDarkMode = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      ).matches;
+      setAutoThemeColors(isDarkMode);
+    } else {
+      setThemeColors(themes[theme].colors);
+    }
+  }, [theme, darkThemePreference, setAutoThemeColors]);
+
   useEffect(() => {
     if (theme === 'auto') {
-      const darkTheme = themes[darkThemePreference];
-
-      function darkThemeMediaQueryListener(event: MediaQueryListEvent) {
-        if (event.matches) {
-          setThemeColors(darkTheme.colors);
-        } else {
-          setThemeColors(themes['light'].colors);
-        }
-      }
       const darkThemeMediaQuery = window.matchMedia(
         '(prefers-color-scheme: dark)',
       );
 
-      darkThemeMediaQuery.addEventListener(
+      const changeListener = (event: MediaQueryListEvent) => {
-        'change',
+        setAutoThemeColors(event.matches);
-        darkThemeMediaQueryListener,
+      };
-      );
+
-
+      darkThemeMediaQuery.addEventListener('change', changeListener);
-      if (darkThemeMediaQuery.matches) {
+      return () => {
-        setThemeColors(darkTheme.colors);
+        darkThemeMediaQuery.removeEventListener('change', changeListener);
-      } else {
-        setThemeColors(themes['light'].colors);
-      }
-
-      return () => {
-        darkThemeMediaQuery.removeEventListener(
-          'change',
-          darkThemeMediaQueryListener,
-        );
       };
-    } else {
-      setThemeColors(themes[theme].colors);
     }
-  }, [theme, darkThemePreference]);
+  }, [setAutoThemeColors, theme]);
 
   if (!themeColors) return null;
 

upcoming-release-notes/3520.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix the theme color change that happens when initially loading the page where initially it's set to light mode and then switches to the configured theme.