From 00f505561444dd516977c41aaae6f3f3dadb269d Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Thu, 18 Dec 2025 16:35:49 +0200
Subject: [PATCH] feat: set light mode by default for recruiter

---
 packages/shared/src/contexts/BootProvider.tsx |  8 ++++++--
 .../shared/src/contexts/SettingsContext.tsx   |  5 ++++-
 packages/shared/src/graphql/settings.ts       |  1 +
 .../layouts/RecruiterSelfServeLayout.tsx      | 19 ++++++++++++++++++-
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/contexts/BootProvider.tsx b/packages/shared/src/contexts/BootProvider.tsx
index 4a4cc10ff7..8ec0d60e3d 100644
--- a/packages/shared/src/contexts/BootProvider.tsx
+++ b/packages/shared/src/contexts/BootProvider.tsx
@@ -146,13 +146,17 @@ export const BootDataProvider = ({
     }
 
     if (boot?.settings?.theme) {
-      applyTheme(themeModes[boot.settings.theme]);
+      if (boot.settings?.recruiterTheme && getPage().startsWith('/recruiter')) {
+        applyTheme(themeModes[boot.settings?.recruiterTheme]);
+      } else {
+        applyTheme(themeModes[boot.settings.theme]);
+      }
     }
 
     preloadFeedsRef.current({ feeds: boot.feeds, user: boot.user });
 
     setCachedBootData(boot);
-  }, [localBootData]);
+  }, [getPage, localBootData]);
 
   const { hostGranted } = useHostStatus();
   const isExtension = checkIsExtension();
diff --git a/packages/shared/src/contexts/SettingsContext.tsx b/packages/shared/src/contexts/SettingsContext.tsx
index 065effa84e..2d33febc00 100644
--- a/packages/shared/src/contexts/SettingsContext.tsx
+++ b/packages/shared/src/contexts/SettingsContext.tsx
@@ -41,8 +41,10 @@ export const themes: ThemeOption[] = Object.values(ThemeMode).map((theme) => ({
   value: theme,
 }));
 
-export interface SettingsContextData extends Omit<RemoteSettings, 'theme'> {
+export interface SettingsContextData
+  extends Omit<RemoteSettings, 'theme' | 'recruiterTheme'> {
   themeMode: ThemeMode;
+  recruiterTheme?: ThemeMode;
   setTheme: (theme: ThemeMode) => Promise<void>;
   toggleOpenNewTab: () => Promise<void>;
   setSpaciness: (density: Spaciness) => Promise<void>;
@@ -223,6 +225,7 @@ export const SettingsContextProvider = ({
       ...settings,
       syncSettings,
       themeMode: themeModes[settings.theme],
+      recruiterTheme: themeModes[settings?.recruiterTheme],
       setTheme: (theme: ThemeMode) =>
         setSettings({ ...settings, theme: remoteThemes[theme] }),
       toggleOpenNewTab: () =>
diff --git a/packages/shared/src/graphql/settings.ts b/packages/shared/src/graphql/settings.ts
index df5c764025..0c98164cbb 100644
--- a/packages/shared/src/graphql/settings.ts
+++ b/packages/shared/src/graphql/settings.ts
@@ -33,6 +33,7 @@ export enum SidebarSettingsFlags {
 export type RemoteSettings = {
   openNewTab: boolean;
   theme: RemoteTheme;
+  recruiterTheme?: RemoteTheme;
   spaciness: Spaciness;
   insaneMode: boolean;
   showTopSites: boolean;
diff --git a/packages/webapp/components/layouts/RecruiterSelfServeLayout.tsx b/packages/webapp/components/layouts/RecruiterSelfServeLayout.tsx
index 2e0203c156..ce2e480706 100644
--- a/packages/webapp/components/layouts/RecruiterSelfServeLayout.tsx
+++ b/packages/webapp/components/layouts/RecruiterSelfServeLayout.tsx
@@ -1,13 +1,30 @@
 import type { ReactNode } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { RecruiterSelfServeLayoutProps } from '@dailydotdev/shared/src/components/recruiter/layout/RecruiterLayout';
 import { RecruiterLayout } from '@dailydotdev/shared/src/components/recruiter/layout/RecruiterLayout';
+import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext';
 
 const GetLayout = (
   page: ReactNode,
   pageProps: Record<string, unknown>,
   layoutProps?: RecruiterSelfServeLayoutProps,
 ): ReactNode => {
+  const { applyThemeMode, recruiterTheme, loadedSettings } =
+    useSettingsContext();
+
+  useEffect(() => {
+    if (loadedSettings) {
+      applyThemeMode(recruiterTheme);
+    }
+  }, [applyThemeMode, recruiterTheme, loadedSettings]);
+
+  // Cleanup only on unmount
+  useEffect(() => {
+    return () => {
+      applyThemeMode();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return <RecruiterLayout {...layoutProps}>{page}</RecruiterLayout>;
 };