feat(ui): add darkmode logo (#880)

* feat(ui): add darkmode logo

add darkmode logo

* fix(ui): cr fix

cr fix

packages/ui/src/hooks/use-page-context.ts

@@ -1,15 +1,17 @@
 import { useState, useMemo, createContext } from 'react';
 import { isMobile } from 'react-device-detect';
 
-import { SignInExperienceSettings, Platform } from '@/types';
+import { SignInExperienceSettings, Platform, Theme } from '@/types';
 
 type Context = {
+  theme: Theme;
   toast: string;
   loading: boolean;
   platform: Platform;
   termsAgreement: boolean;
   showTermsModal: boolean;
   experienceSettings: SignInExperienceSettings | undefined;
+  setTheme: (theme: Theme) => void;
   setToast: (message: string) => void;
   setLoading: (loading: boolean) => void;
   setPlatform: (platform: Platform) => void;
@@ -24,11 +26,13 @@ const noop = () => {
 
 export const PageContext = createContext<Context>({
   toast: '',
+  theme: 'light',
   loading: false,
   platform: isMobile ? 'mobile' : 'web',
   termsAgreement: false,
   showTermsModal: false,
   experienceSettings: undefined,
+  setTheme: noop,
   setToast: noop,
   setLoading: noop,
   setPlatform: noop,
@@ -40,6 +44,7 @@ export const PageContext = createContext<Context>({
 const usePageContext = () => {
   const [loading, setLoading] = useState(false);
   const [toast, setToast] = useState('');
+  const [theme, setTheme] = useState<Theme>('light');
   const [platform, setPlatform] = useState<Platform>(isMobile ? 'mobile' : 'web');
   const [experienceSettings, setExperienceSettings] = useState<SignInExperienceSettings>();
   const [termsAgreement, setTermsAgreement] = useState(false);
@@ -47,12 +52,14 @@ const usePageContext = () => {
 
   const context = useMemo(
     () => ({
+      theme,
       toast,
       loading,
       platform,
       termsAgreement,
       showTermsModal,
       experienceSettings,
+      setTheme,
       setLoading,
       setToast,
       setPlatform,
@@ -60,7 +67,7 @@ const usePageContext = () => {
       setShowTermsModal,
       setExperienceSettings,
     }),
-    [experienceSettings, loading, platform, showTermsModal, termsAgreement, toast]
+    [experienceSettings, loading, platform, showTermsModal, termsAgreement, theme, toast]
   );
 
   return {

packages/ui/src/hooks/use-theme.ts

@@ -1,21 +1,24 @@
 import { AppearanceMode } from '@logto/schemas';
-import { useState, useEffect, useContext } from 'react';
+import { useEffect, useContext } from 'react';
+
+import { Theme } from '@/types';
 
 import { PageContext } from './use-page-context';
 
-export type Theme = 'dark' | 'light';
-
 const darkThemeWatchMedia = window.matchMedia('(prefers-color-scheme: dark)');
 const getThemeBySystemConfiguration = (): Theme => (darkThemeWatchMedia.matches ? 'dark' : 'light');
 
 export default function useTheme(mode: AppearanceMode = AppearanceMode.SyncWithSystem): Theme {
-  const { experienceSettings } = useContext(PageContext);
+  const { experienceSettings, theme, setTheme } = useContext(PageContext);
-  const [theme, setTheme] = useState<Theme>(
-    mode === AppearanceMode.SyncWithSystem ? 'light' : mode
-  );
 
   useEffect(() => {
-    if (mode !== AppearanceMode.SyncWithSystem || !experienceSettings?.branding.isDarkModeEnabled) {
+    if (mode !== AppearanceMode.SyncWithSystem) {
+      setTheme(mode);
+
+      return;
+    }
+
+    if (!experienceSettings?.branding.isDarkModeEnabled) {
       return;
     }
 
@@ -30,7 +33,7 @@ export default function useTheme(mode: AppearanceMode = AppearanceMode.SyncWithS
     return () => {
       darkThemeWatchMedia.removeEventListener('change', changeTheme);
     };
-  }, [experienceSettings, mode]);
+  }, [experienceSettings, mode, setTheme]);
 
   return theme;
 }

packages/ui/src/pages/SignIn/index.tsx

@@ -9,22 +9,28 @@ import * as styles from './index.module.scss';
 import { PrimarySection, SecondarySection, CreateAccountLink } from './registry';
 
 const SignIn = () => {
-  const { experienceSettings } = useContext(PageContext);
+  const { experienceSettings, theme } = useContext(PageContext);
-  const { slogan, logoUrl = '', style } = experienceSettings?.branding ?? {};
+
+  if (!experienceSettings) {
+    return null;
+  }
+
+  const { slogan, logoUrl, darkLogoUrl, style } = experienceSettings.branding;
+  const logo = theme === 'light' ? logoUrl : darkLogoUrl ?? logoUrl;
 
   return (
     <div className={classNames(styles.wrapper)}>
       <BrandingHeader
         className={styles.header}
         headline={style === BrandingStyle.Logo_Slogan ? slogan : undefined}
-        logo={logoUrl}
+        logo={logo}
       />
-      <PrimarySection signInMethod={experienceSettings?.primarySignInMethod} />
+      <PrimarySection signInMethod={experienceSettings.primarySignInMethod} />
       <SecondarySection
-        primarySignInMethod={experienceSettings?.primarySignInMethod}
+        primarySignInMethod={experienceSettings.primarySignInMethod}
-        secondarySignInMethods={experienceSettings?.secondarySignInMethods}
+        secondarySignInMethods={experienceSettings.secondarySignInMethods}
       />
-      <CreateAccountLink primarySignInMethod={experienceSettings?.primarySignInMethod} />
+      <CreateAccountLink primarySignInMethod={experienceSettings.primarySignInMethod} />
     </div>
   );
 };

packages/ui/src/types/index.ts

@@ -16,6 +16,8 @@ export enum SearchParameters {
 
 export type Platform = 'web' | 'mobile';
 
+export type Theme = 'dark' | 'light';
+
 export interface ConnectorData extends ConnectorMetadata {
   id: string;
 }