diff --git a/src/lib/ui/AppThemes.ts b/src/lib/ui/AppThemes.ts index ac3573d5..0e0866b0 100644 --- a/src/lib/ui/AppThemes.ts +++ b/src/lib/ui/AppThemes.ts @@ -196,8 +196,14 @@ const getFontsFromTheme = (obj: Record, fonts: string[] = []): stri }; const loadedFonts: string[] = []; + +export const hasMissingFonts = (theme: ThemeOptions): boolean => { + const themeFonts = getFontsFromTheme(theme.typography ?? {}); + return !!themeFonts.length && themeFonts.some((font) => !loadedFonts.includes(font)); +}; + export const loadThemeFonts = async (theme: ThemeOptions): Promise => { - const themeFonts = getFontsFromTheme(theme); + const themeFonts = getFontsFromTheme(theme.typography ?? {}); const missingThemeFonts = themeFonts.filter((font) => !loadedFonts.includes(font)); if (!missingThemeFonts.length) { diff --git a/src/screens/settings/appearance/theme/ThemePreview.tsx b/src/screens/settings/appearance/theme/ThemePreview.tsx index 424f956f..4cf64a66 100644 --- a/src/screens/settings/appearance/theme/ThemePreview.tsx +++ b/src/screens/settings/appearance/theme/ThemePreview.tsx @@ -21,7 +21,7 @@ import Tooltip from '@mui/material/Tooltip'; import EditIcon from '@mui/icons-material/Edit'; import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks'; import { ThemeModeContext } from '@/components/context/ThemeModeContext.tsx'; -import { AppTheme, loadThemeFonts } from '@/lib/ui/AppThemes.ts'; +import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/lib/ui/AppThemes.ts'; import { createTheme } from '@/theme.ts'; import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx'; import { makeToast } from '@/components/util/Toast'; @@ -84,12 +84,15 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: ( backgroundColor: 'background.default', }} onClick={() => { + const needToLoadFonts = hasMissingFonts(theme.muiTheme); + if (!needToLoadFonts) { + setAppTheme(theme.id); + return; + } + makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info'); loadThemeFonts(theme.muiTheme) - .then(() => { - setAppTheme(theme.id); - makeToast(t('settings.appearance.theme.select.success'), 'success'); - }) + .then(() => setAppTheme(theme.id)) .catch(() => makeToast(t('settings.appearance.theme.select.fonts.error'), 'error')); }} >