feat: add support for theme override

web/sdk/react/components/organization/preferences/index.tsx

@@ -1,7 +1,10 @@
 'use client';
 
+import { useRouteContext } from '@tanstack/react-router';
 import { PreferencesPage } from '~/react/views/preferences';
+import { RouterContext } from '../routes';
 
 export default function UserPreferences() {
-  return <PreferencesPage />;
+  const { theme, onThemeChange } = useRouteContext({ from: '__root__' }) as RouterContext;
+  return <PreferencesPage theme={theme} onThemeChange={onThemeChange} />;
 }

web/sdk/react/components/organization/profile.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import {
   RouterProvider,
   createMemoryHistory,
@@ -30,7 +31,9 @@ export const OrganizationProfile = ({
   showPreferences = false,
   hideToast = false,
   customScreens = [],
-  onLogout = () => {}
+  onLogout = () => { },
+  theme,
+  onThemeChange,
 }: OrganizationProfileProps) => {
   const memoryHistory = createMemoryHistory({
     initialEntries: [defaultRoute]
@@ -40,21 +43,47 @@ export const OrganizationProfile = ({
 
   const routeTree = getRootTree({ customScreens });
 
-  const memoryRouter = createRouter({
-    routeTree,
-    history: memoryHistory,
-    context: {
-      organizationId,
-      showBilling,
-      showTokens,
-      showAPIKeys,
-      hideToast,
-      showPreferences,
-      customRoutes,
-      onLogout
-    }
-  });
-  return <RouterProvider router={memoryRouter} />;
+  const memoryRouter = useMemo(
+    () =>
+      createRouter({
+        routeTree,
+        history: memoryHistory,
+        context: {
+          organizationId,
+          showBilling,
+          showTokens,
+          showAPIKeys,
+          hideToast,
+          showPreferences,
+          customRoutes,
+          onLogout,
+          theme,
+          onThemeChange
+        }
+      }),
+    // Router is created once; dynamic context flows through RouterProvider's
+    // context prop so updates don't recreate the router and reset navigation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <RouterProvider
+      router={memoryRouter}
+      context={{
+        organizationId,
+        showBilling,
+        showTokens,
+        showAPIKeys,
+        hideToast,
+        showPreferences,
+        customRoutes,
+        onLogout,
+        theme,
+        onThemeChange
+      }}
+    />
+  );
 };
 
 declare module '@tanstack/react-router' {

web/sdk/react/components/organization/routes.tsx

@@ -38,6 +38,8 @@ export interface CustomScreen {
   component: RouteComponent;
 }
 
+export type Theme = 'light' | 'dark' | 'system';
+
 export interface OrganizationProfileProps {
   organizationId: string;
   defaultRoute?: string;
@@ -48,21 +50,25 @@ export interface OrganizationProfileProps {
   hideToast?: boolean;
   customScreens?: CustomScreen[];
   onLogout?: () => void;
+  theme?: Theme;
+  onThemeChange?: (theme: Theme) => void;
 }
 
 export interface CustomRoutes {
   Organization: Pick<CustomScreen, 'name' | 'path'>[];
   User: Pick<CustomScreen, 'name' | 'path'>[];
 }
 
-type RouterContext = Pick<
+export type RouterContext = Pick<
   OrganizationProfileProps,
   | 'organizationId'
   | 'showBilling'
   | 'showTokens'
   | 'showAPIKeys'
   | 'hideToast'
   | 'showPreferences'
+  | 'theme'
+  | 'onThemeChange'
 > & { customRoutes: CustomRoutes; onLogout?: () => void };
 
 export function getCustomRoutes(customScreens: CustomScreen[] = []) {

web/sdk/react/views-new/preferences/preferences-view.tsx

@@ -10,13 +10,48 @@ import { useTheme } from '@raystack/apsara-v1';
 import styles from './preferences-view.module.css';
 import { ReactNode } from 'react';
 
+const THEME_OPTIONS = {
+  light: {
+    label: 'Light',
+    icon: <SunIcon />
+  },
+  dark: {
+    label: 'Dark',
+    icon: <MoonIcon />
+  },
+  system: {
+    label: 'System',
+    icon: <GearIcon />
+  }
+}
+type Theme = keyof typeof THEME_OPTIONS;
+
 interface PreferencesViewProps {
   children?: ReactNode;
+  /**
+   * The theme to use for Theme Select.
+   * If not provided, the theme will be fetched from ThemeProvider.
+   */
+  theme?: Theme;
+  /**
+   * The callback to call when the theme is changed.
+   * If not provided, the theme will be set in the ThemeProvider.
+   */
+  onThemeChange?: (theme: Theme) => void;
 }
-export function PreferencesView({ children }: PreferencesViewProps) {
+export function PreferencesView({ children, theme: providedTheme, onThemeChange }: PreferencesViewProps) {
   const { theme, setTheme } = useTheme();
   const { preferences, isLoading, isFetching, updatePreferences } =
     usePreferences({});
+  const computedTheme = providedTheme ?? theme;
+
+  const handleThemeChange = (theme: string) => {
+    if (onThemeChange) {
+      onThemeChange(theme as Theme);
+    } else {
+      setTheme(theme);
+    }
+  }
 
   const newsletterValue =
     preferences?.[PREFERENCE_OPTIONS.NEWSLETTER]?.value ?? 'false';
@@ -32,20 +67,16 @@ export function PreferencesView({ children }: PreferencesViewProps) {
           title="Theme"
           description="Customise your interface color scheme."
         >
-          <Select defaultValue={theme} onValueChange={setTheme}>
+          <Select defaultValue={computedTheme} onValueChange={handleThemeChange}>
             <Select.Trigger className={styles.selectTrigger}>
               <Select.Value placeholder="Theme" />
             </Select.Trigger>
             <Select.Content>
-              <Select.Item value="light" leadingIcon={<SunIcon />}>
-                Light
-              </Select.Item>
-              <Select.Item value="dark" leadingIcon={<MoonIcon />}>
-                Dark
-              </Select.Item>
-              <Select.Item value="system" leadingIcon={<GearIcon />}>
-                System
-              </Select.Item>
+              {Object.entries(THEME_OPTIONS).map(([value, { label, icon }]) => (
+                <Select.Item key={value} value={value} leadingIcon={icon}>
+                  {label}
+                </Select.Item>
+              ))}
             </Select.Content>
           </Select>
         </PreferenceRow>

web/sdk/react/views/preferences/preferences-page.tsx

@@ -72,12 +72,35 @@ const newsletterOptions = [
     value: 'false'
   }
 ];
+type Theme = 'light' | 'dark' | 'system';
 
-export default function PreferencesPage() {
+interface PreferencesPageProps {
+  /**
+   * The theme to use for Theme Select.
+   * If not provided, the theme will be fetched from ThemeProvider.
+   */
+  theme?: Theme;
+  /**
+   * The callback to call when the theme is changed.
+   * If not provided, the theme will be set in the ThemeProvider.
+   */
+  onThemeChange?: (theme: Theme) => void;
+}
+
+export default function PreferencesPage({ theme: providedTheme, onThemeChange }: PreferencesPageProps) {
   const { theme, setTheme } = useTheme();
   const { preferences, isLoading, isFetching, updatePreferences } =
     usePreferences({});
 
+  const computedTheme = providedTheme ?? theme;
+  const handleThemeChange = (theme: string) => {
+    if (onThemeChange) {
+      onThemeChange(theme as Theme);
+    } else {
+      setTheme(theme);
+    }
+  }
+
   const newsletterValue =
     preferences?.[PREFERENCE_OPTIONS.NEWSLETTER]?.value ?? 'false';
 
@@ -91,28 +114,28 @@ export default function PreferencesPage() {
           />
         </Flex>
         <Flex direction="column" gap={9}>
-        <PreferencesSelection
-          label="Theme"
-          text="Customise your interface color scheme."
-          name="theme"
-          defaultValue={theme}
-          values={themeOptions}
-          onSelection={value => setTheme(value)}
-        />
-        <Separator />
-        <PreferencesSelection
-          label="Updates, News & Events"
-          text="Stay informed on new features, improvements, and key updates."
-          name={PREFERENCE_OPTIONS.NEWSLETTER}
-          defaultValue={newsletterValue}
-          values={newsletterOptions}
-          isLoading={isFetching}
-          disabled={isLoading}
-          onSelection={value => {
-            updatePreferences([{ name: PREFERENCE_OPTIONS.NEWSLETTER, value }]);
-          }}
-        />
-        <Separator />
+          <PreferencesSelection
+            label="Theme"
+            text="Customise your interface color scheme."
+            name="theme"
+            defaultValue={computedTheme}
+            values={themeOptions}
+            onSelection={handleThemeChange}
+          />
+          <Separator />
+          <PreferencesSelection
+            label="Updates, News & Events"
+            text="Stay informed on new features, improvements, and key updates."
+            name={PREFERENCE_OPTIONS.NEWSLETTER}
+            defaultValue={newsletterValue}
+            values={newsletterOptions}
+            isLoading={isFetching}
+            disabled={isLoading}
+            onSelection={value => {
+              updatePreferences([{ name: PREFERENCE_OPTIONS.NEWSLETTER, value }]);
+            }}
+          />
+          <Separator />
         </Flex>
       </Flex>
     </Flex>