packages/components/containers/themes/ThemeInjector.tsx

   1 import { useEffect, useLayoutEffect, useMemo } from 'react';
   2
   3 import { useUserSettings } from '@proton/account/userSettings/hooks';
   4 import useApi from '@proton/components/hooks/useApi';
   5 import { getSilentApi } from '@proton/shared/lib/api/helpers/customConfig';
   6 import { updateTheme } from '@proton/shared/lib/api/settings';
   7 import {
   8     canGetInboxDesktopInfo,
   9     getInboxDesktopInfo,
  10     hasInboxDesktopFeature,
  11 } from '@proton/shared/lib/desktop/ipcHelpers';
  12 import { getIsDrawerApp, postMessageToIframe } from '@proton/shared/lib/drawer/helpers';
  13 import { DRAWER_EVENTS } from '@proton/shared/lib/drawer/interfaces';
  14 import { isElectronMail } from '@proton/shared/lib/helpers/desktop';
  15 import { rootFontSize } from '@proton/shared/lib/helpers/dom';
  16 import type { ThemeSetting } from '@proton/shared/lib/themes/themes';
  17 import { electronAppTheme as defaultElectronAppTheme, getDefaultThemeSetting } from '@proton/shared/lib/themes/themes';
  18 import debounce from '@proton/utils/debounce';
  19 import noop from '@proton/utils/noop';
  20
  21 import useDrawer from '../../hooks/drawer/useDrawer';
  22 import { useTheme } from './ThemeProvider';
  23
  24 export const DrawerThemeInjector = () => {
  25     const { settings } = useTheme();
  26
  27     const { iframeSrcMap } = useDrawer();
  28
  29     useLayoutEffect(() => {
  30         // If apps are opened in drawer, update their theme too
  31         if (iframeSrcMap) {
  32             Object.keys(iframeSrcMap).map((app) => {
  33                 if (getIsDrawerApp(app)) {
  34                     postMessageToIframe({ type: DRAWER_EVENTS.UPDATE_THEME, payload: { themeSetting: settings } }, app);
  35                 }
  36             });
  37         }
  38     }, [settings]);
  39
  40     return null;
  41 };
  42
  43 export const ThemeInjector = () => {
  44     const [userSettings] = useUserSettings();
  45     const { addListener, settings, setThemeSetting } = useTheme();
  46     const api = useApi();
  47     const silentApi = getSilentApi(api);
  48
  49     const legacyThemeType = userSettings.ThemeType;
  50     const legacyThemeSettings = useMemo(() => getDefaultThemeSetting(legacyThemeType), [legacyThemeType]);
  51     const themeSetting = userSettings.Theme && 'Mode' in userSettings.Theme ? userSettings.Theme : legacyThemeSettings;
  52
  53     useLayoutEffect(() => {
  54         const theme = (() => {
  55             if (!isElectronMail) {
  56                 return themeSetting;
  57             }
  58
  59             if (canGetInboxDesktopInfo) {
  60                 if (hasInboxDesktopFeature('FullTheme')) {
  61                     return getInboxDesktopInfo('theme');
  62                 } else if (hasInboxDesktopFeature('ThemeSelection')) {
  63                     return { ...defaultElectronAppTheme, ...getInboxDesktopInfo('theme') };
  64                 }
  65             }
  66
  67             return defaultElectronAppTheme;
  68         })();
  69
  70         setThemeSetting(theme);
  71     }, [themeSetting]);
  72
  73     useEffect(() => {
  74         rootFontSize(true);
  75     }, [settings.FontSize]);
  76
  77     useEffect(() => {
  78         const cb = debounce((settings: ThemeSetting) => {
  79             if (!hasInboxDesktopFeature('ThemeSelection')) {
  80                 silentApi(updateTheme(settings)).catch(noop);
  81             }
  82         }, 500);
  83
  84         const removeListener = addListener(cb);
  85         return () => {
  86             removeListener();
  87         };
  88     }, []);
  89
  90     return null;
  91 };