feat: add dynamicColor prop and DynamicTheme refactor

Author: adrcotfas

src/babel/__fixtures__/rewrite-imports/code.js

@@ -10,5 +10,4 @@ import {
   NonExistentSecond as Stuff,
   ThemeProvider,
   withTheme,
-  DefaultTheme,
 } from 'react-native-paper';

src/babel/__fixtures__/rewrite-imports/output.js

@@ -8,4 +8,3 @@ import { MD3Colors } from "react-native-paper/lib/module/deprecated";
 import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js";
 import { ThemeProvider } from "react-native-paper/lib/module/core/theming";
 import { withTheme } from "react-native-paper/lib/module/core/theming";
-import { DefaultTheme } from "react-native-paper/lib/module/core/theming";

src/components/__tests__/TextInput.test.tsx

@@ -5,9 +5,10 @@ import { Platform, StyleSheet, Text, View } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 
 import PaperProvider from '../../core/PaperProvider';
-import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming';
+import { getTheme, ThemeProvider } from '../../core/theming';
 import { render } from '../../test-utils';
 import { red500 } from '../../theme/colors';
+import { LightTheme } from '../../theme/schemes';
 import { tokens } from '../../theme/tokens';
 import {
   getFlatInputColors,
@@ -369,9 +370,9 @@ it('calls onLayout on right-side affix adornment', () => {
 it("correctly applies theme background to label when input's background is transparent", () => {
   const backgroundColor = 'transparent';
   const theme = {
-    ...DefaultTheme,
+    ...LightTheme,
     colors: {
-      ...DefaultTheme.colors,
+      ...LightTheme.colors,
       background: 'pink',
     },
   };

src/core/PaperProvider.tsx

@@ -12,6 +12,11 @@ import { useSystemColorScheme } from './useSystemColorScheme';
 import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
 import PortalHost from '../components/Portal/PortalHost';
 import { ReduceMotionContext } from '../theme/accessibility/ReduceMotionContext';
+import {
+  isDynamicColorSupported,
+  lightDynamicColors,
+  darkDynamicColors,
+} from '../theme/schemes/DynamicTheme';
 import type { ThemeProp } from '../types';
 
 export type Props = {
@@ -20,28 +25,33 @@ export type Props = {
   settings?: Settings;
   direction?: Direction;
   reduceMotion?: ReduceMotionPreference;
+  dynamicColor?: boolean;
 };
 
 const PaperProvider = (props: Props) => {
-  const { reduceMotion = 'auto' } = props;
+  const { reduceMotion = 'auto', dynamicColor = false } = props;
 
   const colorScheme = useSystemColorScheme(!props.theme);
   const resolvedReduceMotion = useResolvedReduceMotion(reduceMotion);
 
   const theme = React.useMemo(() => {
-    const scheme = colorScheme === 'dark' ? 'dark' : 'light';
-    const defaultThemeBase = defaultThemes[scheme];
-    const userScale = props.theme?.animation?.scale ?? 1;
+    const isDark = props.theme?.dark ?? colorScheme === 'dark';
+    const base = defaultThemes[isDark ? 'dark' : 'light'];
+    const dynamicColors =
+      dynamicColor && isDynamicColorSupported
+        ? isDark
+          ? darkDynamicColors
+          : lightDynamicColors
+        : undefined;
+    const scale = resolvedReduceMotion ? 0 : props.theme?.animation?.scale ?? 1;
 
     return {
-      ...defaultThemeBase,
+      ...base,
       ...props.theme,
-      animation: {
-        ...props.theme?.animation,
-        scale: resolvedReduceMotion ? 0 : userScale,
-      },
+      colors: { ...base.colors, ...props.theme?.colors, ...dynamicColors },
+      animation: { ...props.theme?.animation, scale },
     };
-  }, [colorScheme, props.theme, resolvedReduceMotion]);
+  }, [colorScheme, props.theme, resolvedReduceMotion, dynamicColor]);
 
   const { children, settings } = props;
 

src/core/__tests__/PaperProvider.test.tsx

@@ -213,6 +213,19 @@ describe('PaperProvider', () => {
     ).toStrictEqual(0);
   });
 
+  it('leaves theme.colors unchanged when dynamicColor is true on an unsupported platform', async () => {
+    mockAppearance();
+    const { getByTestId } = render(
+      <PaperProvider dynamicColor>
+        <FakeChild />
+      </PaperProvider>
+    );
+    // `isDynamicColorSupported` is false on the test platform → no color override.
+    expect(getByTestId('provider-child-view').props.theme.colors.primary).toBe(
+      LightTheme.colors.primary
+    );
+  });
+
   it('should set Appearance listeners, if there is no theme', async () => {
     mockAppearance();
     const { getByTestId } = render(createProvider());

src/index.tsx

@@ -4,7 +4,6 @@ export {
   useTheme,
   withTheme,
   ThemeProvider,
-  DefaultTheme,
   adaptNavigationTheme,
 } from './core/theming';
 

src/theme/provider.tsx

@@ -3,9 +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';
-
-export const DefaultTheme = LightTheme;
+import type { Theme, NavigationTheme } from './types';
 
 export const {
   ThemeProvider,
@@ -18,11 +16,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 = {