apps/packages/shared/src/hooks/utils/useThemedAsset.ts at 36949893c93b28ec151d39b27f682d26aa09d1c4 · dailydotdev/apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { useMemo } from 'react';
import { ThemeMode, useSettingsContext } from '../../contexts/SettingsContext';
import colors from '../../styles/colors';
import {
  cloudinaryFeedFiltersYourFeedLight,
  cloudinaryFeedFiltersYourFeedDark,
  cloudinaryFeedFiltersScrollLight,
  cloudinaryFeedFiltersScrollDark,
  cloudinaryGenericNotFoundLight,
  cloudinaryGenericNotFoundDark,
  cloudinaryShortcutsIconsGithubLight,
  cloudinaryShortcutsIconsGithubDark,
  cloudinaryIntegrationsSlackHeaderLight,
  cloudinaryIntegrationsSlackHeaderDark,
  cloudinaryGenericErrorLight,
  cloudinaryGenericErrorDark,
  boostNewPostBanner,
  boostNewPostBannerLight,
  jobsWelcomeDarkMode,
  jobsWelcomeLightMode,
  jobOfferLightDesktop,
  jobOfferDarkDesktop,
  jobOfferDarkMobile,
  jobOfferLightMobile,
} from '../../lib/image';

interface UseAsset {
  postBoostStrip: string;
  onboardingIntroduction: string;
  scrollBlock: string;
  notFound: string;
  themeColor: string;
  githubShortcut: string;
  slackIntegrationHeader: string;
  gardrError: string;
  jobsWelcome: string;
  jobOfferDesktop: string;
  jobOfferMobile: string;
}

export const useIsLightTheme = (): boolean => {
  const { themeMode } = useSettingsContext();

  return useMemo(() => {
    if (themeMode === ThemeMode.Auto) {
      return globalThis?.window?.matchMedia?.('(prefers-color-scheme:light)')
        .matches;
    }

    return themeMode === ThemeMode.Light;
  }, [themeMode]);
};

export const useThemedAsset = (): UseAsset => {
  const isLight = useIsLightTheme();

  return {
    postBoostStrip: isLight ? boostNewPostBannerLight : boostNewPostBanner,
    onboardingIntroduction: isLight
      ? cloudinaryFeedFiltersYourFeedLight
      : cloudinaryFeedFiltersYourFeedDark,
    scrollBlock: isLight
      ? cloudinaryFeedFiltersScrollLight
      : cloudinaryFeedFiltersScrollDark,
    notFound: isLight
      ? cloudinaryGenericNotFoundLight
      : cloudinaryGenericNotFoundDark,
    themeColor: isLight ? colors.salt['0'] : colors.pepper['90'],
    githubShortcut: isLight
      ? cloudinaryShortcutsIconsGithubLight
      : cloudinaryShortcutsIconsGithubDark,
    slackIntegrationHeader: isLight
      ? cloudinaryIntegrationsSlackHeaderLight
      : cloudinaryIntegrationsSlackHeaderDark,
    gardrError: isLight
      ? cloudinaryGenericErrorLight
      : cloudinaryGenericErrorDark,
    jobsWelcome: isLight ? jobsWelcomeLightMode : jobsWelcomeDarkMode,
    jobOfferDesktop: isLight ? jobOfferLightDesktop : jobOfferDarkDesktop,
    jobOfferMobile: isLight ? jobOfferLightMobile : jobOfferDarkMobile,
  };
};