feat: add dynamicColor prop and DynamicTheme refactor

Author: adrcotfas

src/core/PaperProvider.tsx

@@ -7,6 +7,11 @@ import { defaultThemes, ThemeProvider } from './theming';
 import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
 import PortalHost from '../components/Portal/PortalHost';
 import { useAccessibleTheme } from '../theme/accessibility';
+import {
+  isDynamicColorSupported,
+  lightDynamicColors,
+  darkDynamicColors,
+} from '../theme/schemes/DynamicTheme';
 import type { Theme, ThemeProp } from '../types';
 
 export type Props = {
@@ -19,10 +24,17 @@ export type Props = {
    * accessibility in your own code.
    */
   accessibilityAdapters?: boolean;
+  /**
+   * Whether to use Android Material You (dynamic) colors from the system wallpaper seed.
+   * When `true`, dynamic colors override `theme.colors` on Android API 31+.
+   * Falls back silently on unsupported platforms and API levels.
+   * Set to `false` (default) when providing a fully custom color theme.
+   */
+  dynamicColor?: boolean;
 };
 
 const PaperProvider = (props: Props) => {
-  const { accessibilityAdapters = true } = props;
+  const { accessibilityAdapters = true, dynamicColor = false } = props;
 
   const colorSchemeName =
     (!props.theme && Appearance?.getColorScheme()) || 'light';
@@ -59,17 +71,28 @@ const PaperProvider = (props: Props) => {
   }, [props.theme]);
 
   const rawTheme = React.useMemo(() => {
-    const scheme = colorScheme === 'dark' ? 'dark' : 'light';
+    const effectiveDark = props.theme?.dark ?? colorScheme === 'dark';
+    const scheme = effectiveDark ? 'dark' : 'light';
     const base = defaultThemes[scheme];
+    const isDynamic = dynamicColor && isDynamicColorSupported;
+    const dynamicColors = isDynamic
+      ? scheme === 'dark'
+        ? darkDynamicColors
+        : lightDynamicColors
+      : null;
     return {
       ...base,
       ...props.theme,
+      ...(dynamicColors
+        ? { colors: { ...base.colors, ...dynamicColors } }
+        : {}),
       animation: {
         ...props.theme?.animation,
         scale: props.theme?.animation?.scale ?? 1,
       },
-    } as Theme;
-  }, [colorScheme, props.theme]);
+      dynamic: isDynamic,
+    } as unknown as Theme;
+  }, [colorScheme, props.theme, dynamicColor]);
 
   const theme = useAccessibleTheme(rawTheme, accessibilityAdapters !== false);
 

src/core/__tests__/PaperProvider.test.tsx

@@ -103,8 +103,8 @@ const createProvider = (theme?: ThemeProp) => {
   );
 };
 
-const ExtendedLightTheme = { ...LightTheme } as ThemeProp;
-const ExtendedDarkTheme = { ...DarkTheme } as ThemeProp;
+const ExtendedLightTheme = { ...LightTheme, dynamic: false } as ThemeProp;
+const ExtendedDarkTheme = { ...DarkTheme, dynamic: false } as ThemeProp;
 
 describe('PaperProvider', () => {
   beforeEach(() => {
@@ -134,6 +134,7 @@ describe('PaperProvider', () => {
     expect(getByTestId('provider-child-view').props.theme).toStrictEqual({
       ...LightTheme,
       animation: { scale: 1, defaultAnimationDuration: 250 },
+      dynamic: false,
     });
   });
 
@@ -229,8 +230,9 @@ describe('PaperProvider', () => {
       },
     } as ThemeProp;
     const { getByTestId } = render(createProvider(customTheme));
-    expect(getByTestId('provider-child-view').props.theme).toStrictEqual(
-      customTheme
-    );
+    expect(getByTestId('provider-child-view').props.theme).toStrictEqual({
+      ...customTheme,
+      dynamic: false,
+    });
   });
 });

src/theme/provider.tsx

@@ -3,7 +3,7 @@ import type { ComponentType } from 'react';
 import { $DeepPartial, createTheming } from '@callstack/react-theme-provider';
 
 import { DarkTheme, LightTheme } from './schemes';
-import type { InternalTheme, Theme, NavigationTheme } from '../types';
+import type { Theme, NavigationTheme } from '../types';
 
 export const DefaultTheme = LightTheme;
 
@@ -18,11 +18,11 @@ export function useTheme<T = Theme>(overrides?: $DeepPartial<T>) {
 }
 
 export const useInternalTheme = (
-  themeOverrides: $DeepPartial<InternalTheme> | undefined
-) => useAppTheme<InternalTheme>(themeOverrides);
+  themeOverrides: $DeepPartial<Theme> | undefined
+) => useAppTheme<Theme>(themeOverrides);
 
-export const withInternalTheme = <Props extends { theme: InternalTheme }, C>(
-  WrappedComponent: ComponentType<Props & { theme: InternalTheme }> & C
+export const withInternalTheme = <Props extends { theme: Theme }, C>(
+  WrappedComponent: ComponentType<Props & { theme: Theme }> & C
 ) => withTheme<Props, C>(WrappedComponent);
 
 export const defaultThemes = {