changes

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

@@ -42,6 +42,7 @@ import { Modals } from './Modals';
 import { ResponsiveProvider } from './responsive/ResponsiveProvider';
 import { SidebarProvider } from './sidebar/SidebarProvider';
 import { UpdateNotification } from './UpdateNotification';
+import { loadPlugins, setLoadedPlugins } from '../pluginLoader';
 
 function AppInner() {
   const [budgetId] = useMetadataPref('id');
@@ -117,6 +118,10 @@ function AppInner() {
     }
 
     initAll().catch(showErrorBoundary);
+
+    loadPlugins().then(plugins => {
+      setLoadedPlugins(plugins);
+    });
   }, []);
 
   useEffect(() => {

packages/desktop-client/src/i18n.ts

@@ -4,7 +4,14 @@ import i18n from 'i18next';
 import resourcesToBackend from 'i18next-resources-to-backend';
 
 const loadLanguage = (language: string) => {
-  return import(`./locale/${language}.json`);
+  try
+  {
+    return import(`./locale/${language}.json`);
+  }
+  catch
+  {
+    return null;
+  }
 };
 
 i18n

packages/desktop-client/src/pluginLoader.ts

@@ -3,9 +3,10 @@ import { ActualPlugin } from '../../plugins-shared/src';
 import * as jszip from 'jszip';
 
 export var loadedPlugins: ActualPlugin[] = null;
-loadPlugins().then(plugins => {
+
+export function setLoadedPlugins(plugins: ActualPlugin[]) {
   loadedPlugins = plugins;
-});
+}
 
 export async function loadPlugins(): Promise<ActualPlugin[]> {
   return [

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

@@ -6,10 +6,12 @@ import type { DarkTheme, Theme } from 'loot-core/src/types/prefs';
 
 import { useGlobalPref } from '../hooks/useGlobalPref';
 
-import * as darkTheme from './themes/dark';
-import * as developmentTheme from './themes/development';
-import * as lightTheme from './themes/light';
-import * as midnightTheme from './themes/midnight';
+import { theme as darkTheme } from './themes/dark';
+import { theme as developmentTheme } from './themes/development';
+import { theme as lightTheme } from './themes/light';
+import { theme as midnightTheme } from './themes/midnight';
+import { ThemeDefinition } from '../../../plugins-shared/src';
+import { loadedPlugins } from '../pluginLoader';
 
 export const themes = {
   light: { name: 'Light', colors: lightTheme },
@@ -43,24 +45,45 @@ export function usePreferredDarkTheme() {
 
 export function ThemeStyle() {
   const [theme] = useTheme();
+  const [themesExtended, setThemesExtended] = useState(themes);
+
   const [darkThemePreference] = usePreferredDarkTheme();
   const [themeColors, setThemeColors] = useState<
-    | typeof lightTheme
-    | typeof darkTheme
-    | typeof midnightTheme
-    | typeof developmentTheme
+    | ThemeDefinition
     | undefined
   >(undefined);
 
+  useEffect(() => {
+    const themesLight = loadedPlugins.reduce((acc, plugin) => {
+      if (plugin.availableThemes?.length) {
+        plugin.availableThemes(false).forEach(theme => {
+          acc[theme] = { name: theme, colors: plugin.getThemeSchema(theme, false)};
+        });
+      }
+      return acc;
+    }, {});
+
+    const themesDark = loadedPlugins.reduce((acc, plugin) => {
+      if (plugin.availableThemes?.length) {
+        plugin.availableThemes(true).forEach(theme => {
+          acc[theme] = { name: theme, colors: plugin.getThemeSchema(theme, true)};
+        });
+      }
+      return acc;
+    }, {});
+
+    setThemesExtended({...themes, ...themesLight, ...themesDark})
+  }, [loadedPlugins]);
+
   useEffect(() => {
     if (theme === 'auto') {
-      const darkTheme = themes[darkThemePreference];
+      const darkTheme = themesExtended[darkThemePreference];
 
       function darkThemeMediaQueryListener(event: MediaQueryListEvent) {
         if (event.matches) {
           setThemeColors(darkTheme.colors);
         } else {
-          setThemeColors(themes['light'].colors);
+          setThemeColors(themesExtended['light'].colors);
         }
       }
       const darkThemeMediaQuery = window.matchMedia(
@@ -75,7 +98,7 @@ export function ThemeStyle() {
       if (darkThemeMediaQuery.matches) {
         setThemeColors(darkTheme.colors);
       } else {
-        setThemeColors(themes['light'].colors);
+        setThemeColors(themesExtended['light'].colors);
       }
 
       return () => {
@@ -85,9 +108,9 @@ export function ThemeStyle() {
         );
       };
     } else {
-      setThemeColors(themes[theme].colors);
+      setThemeColors(themesExtended[theme].colors);
     }
-  }, [theme, darkThemePreference]);
+  }, [theme, darkThemePreference, themesExtended]);
 
   if (!themeColors) return null;