packages/components/containers/themes/ThemesSection.tsx

   1 import { c } from 'ttag';
   2
   3 import Info from '@proton/components/components/link/Info';
   4 import Toggle from '@proton/components/components/toggle/Toggle';
   5 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
   6 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
   7 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
   8 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
   9 import SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
  10 import useNotifications from '@proton/components/hooks/useNotifications';
  11 import { BRAND_NAME } from '@proton/shared/lib/constants';
  12 import { ColorScheme, ThemeModeSetting, getThemes } from '@proton/shared/lib/themes/themes';
  13
  14 import ThemeCards from './ThemeCards';
  15 import { useTheme } from './ThemeProvider';
  16 import ThemeSyncModeCard from './ThemeSyncModeCard';
  17
  18 const ThemesSection = () => {
  19     const { information, settings, setTheme, setAutoTheme } = useTheme();
  20
  21     const { createNotification } = useNotifications();
  22     const notifyPreferenceSaved = () => createNotification({ text: c('Success').t`Preference saved` });
  23
  24     const themes = getThemes();
  25
  26     return (
  27         <>
  28             <SettingsSectionWide>
  29                 <SettingsParagraph>{c('Info')
  30                     .t`Customize the look and feel of ${BRAND_NAME} applications.`}</SettingsParagraph>
  31             </SettingsSectionWide>
  32
  33             <SettingsLayout>
  34                 <SettingsLayoutLeft>
  35                     <label htmlFor="themeSyncToggle" className="text-semibold">
  36                         <span className="mr-2">{c('Label').t`Sync with system`}</span>
  37                         <Info
  38                             title={c('Tooltip')
  39                                 .t`Automatically switch between your preferred themes for day and night in sync with your system’s day and night modes`}
  40                         />
  41                     </label>
  42                 </SettingsLayoutLeft>
  43                 <SettingsLayoutRight isToggleContainer>
  44                     <Toggle
  45                         id="themeSyncToggle"
  46                         checked={settings.Mode === ThemeModeSetting.Auto}
  47                         onChange={(e) => {
  48                             setAutoTheme(e.target.checked);
  49                             notifyPreferenceSaved();
  50                         }}
  51                     />
  52                 </SettingsLayoutRight>
  53             </SettingsLayout>
  54
  55             {settings.Mode === ThemeModeSetting.Auto ? (
  56                 <SettingsSectionWide className="flex mt-6 flex-nowrap gap-4 flex-column lg:flex-row">
  57                     <ThemeSyncModeCard
  58                         className="lg:flex-1"
  59                         mode="light"
  60                         list={themes}
  61                         themeIdentifier={settings.LightTheme}
  62                         onChange={(themeType) => {
  63                             setTheme(themeType, ThemeModeSetting.Light);
  64                             notifyPreferenceSaved();
  65                         }}
  66                         active={information.colorScheme === ColorScheme.Light}
  67                     />
  68                     <ThemeSyncModeCard
  69                         className="lg:flex-1"
  70                         mode="dark"
  71                         list={themes}
  72                         themeIdentifier={settings.DarkTheme}
  73                         onChange={(themeType) => {
  74                             setTheme(themeType, ThemeModeSetting.Dark);
  75                             notifyPreferenceSaved();
  76                         }}
  77                         active={information.colorScheme === ColorScheme.Dark}
  78                     />
  79                 </SettingsSectionWide>
  80             ) : (
  81                 <SettingsSectionWide className="mt-6">
  82                     <ThemeCards
  83                         size="large"
  84                         list={themes}
  85                         themeIdentifier={information.theme}
  86                         onChange={(themeType) => {
  87                             setTheme(themeType);
  88                             notifyPreferenceSaved();
  89                         }}
  90                     />
  91                 </SettingsSectionWide>
  92             )}
  93         </>
  94     );
  95 };
  96
  97 export default ThemesSection;