packages/shared/lib/helpers/initElectronClassnames.ts

   1 import { canGetInboxDesktopInfo, getInboxDesktopInfo, hasInboxDesktopFeature } from '../desktop/ipcHelpers';
   2 import type { ThemeSetting } from '../themes/themes';
   3 import { ThemeModeSetting, electronAppTheme, getDarkThemes } from '../themes/themes';
   4 import { isElectronApp, isElectronOnMac, isElectronOnWindows } from './desktop';
   5
   6 export const updateElectronThemeModeClassnames = (theme: ThemeSetting) => {
   7     const prefersDark =
   8         theme.Mode === ThemeModeSetting.Dark ||
   9         (theme.Mode === ThemeModeSetting.Auto && window.matchMedia('(prefers-color-scheme: dark)').matches);
  10
  11     const selectedTheme = prefersDark ? theme.DarkTheme : theme.LightTheme;
  12     const isUsingDarkTheme = getDarkThemes().includes(selectedTheme);
  13
  14     if (isUsingDarkTheme) {
  15         document.body.classList.add('is-electron-dark');
  16         document.body.classList.remove('is-electron-light');
  17     } else {
  18         document.body.classList.remove('is-electron-dark');
  19         document.body.classList.add('is-electron-light');
  20     }
  21 };
  22
  23 export const initElectronClassnames = () => {
  24     if (isElectronApp) {
  25         document.body.classList.add('is-electron');
  26
  27         if (hasInboxDesktopFeature('ThemeSelection') && canGetInboxDesktopInfo) {
  28             updateElectronThemeModeClassnames(getInboxDesktopInfo('theme'));
  29         } else {
  30             updateElectronThemeModeClassnames(electronAppTheme);
  31         }
  32     }
  33
  34     if (isElectronOnMac) {
  35         document.body.classList.add('is-electron-mac');
  36     }
  37
  38     if (isElectronOnWindows) {
  39         document.body.classList.add('is-electron-windows');
  40     }
  41 };