callstack · adrcotfas · May 8, 2026
diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx
@@ -9,8 +9,8 @@ import {
   Avatar,
   Button,
   FAB,
-  MD3DarkTheme as DarkTheme,
-  MD3LightTheme as DefaultTheme,
+  DarkTheme,
+  LightTheme,
   ProgressBar,
   PaperProvider,
   RadioButton,
@@ -167,7 +167,7 @@ const Shimmer = () => {
 const ThemedBannerExample = () => {
   const isDarkTheme = useColorMode().colorMode === 'dark';
   return (
-    <PaperProvider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
+    <PaperProvider theme={isDarkTheme ? DarkTheme : LightTheme}>
       <BannerExample />
     </PaperProvider>
   );

diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx
@@ -9,8 +9,8 @@ import Link from '@docusaurus/Link';
 import { useColorMode } from '@docusaurus/theme-common';
 import {
   Button,
-  MD3DarkTheme as DarkTheme,
-  MD3LightTheme as DefaultTheme,
+  DarkTheme,
+  LightTheme,
   PaperProvider,
 } from 'react-native-paper';
 
@@ -95,7 +95,7 @@ const Shimmer = () => {
 const ThemedGetStarted = () => {
   const isDarkTheme = useColorMode().colorMode === 'dark';
   return (
-    <PaperProvider theme={isDarkTheme ? DarkTheme : DefaultTheme}>
+    <PaperProvider theme={isDarkTheme ? DarkTheme : LightTheme}>
       <GetStartedButton />
     </PaperProvider>
   );

diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
@@ -9,7 +9,7 @@ import {
   Button,
   Dialog,
   Drawer,
-  MD3Colors,
+  Palette,
   Switch,
   Text,
   TouchableRipple,
@@ -136,8 +136,8 @@ function DrawerItems() {
 
   const coloredLabelTheme = {
     colors: {
-      secondaryContainer: MD3Colors.tertiary80,
-      onSecondaryContainer: MD3Colors.tertiary20,
+      secondaryContainer: Palette.tertiary80,
+      onSecondaryContainer: Palette.tertiary20,
     },
   };
 

diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { ActivityIndicator, FAB, List, MD3Colors } from 'react-native-paper';
+import { ActivityIndicator, FAB, List, Palette } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -41,7 +41,7 @@ const ActivityIndicatorExample = () => {
       <List.Section title="Custom color">
         <ActivityIndicator
           animating={animating}
-          color={MD3Colors.error20}
+          color={Palette.error20}
           hidesWhenStopped={false}
         />
       </List.Section>

diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
@@ -3,7 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
 
 import Icon from '@expo/vector-icons/MaterialCommunityIcons';
-import { Avatar, MD3Colors, Text } from 'react-native-paper';
+import { Avatar, Palette, Text } from 'react-native-paper';
 
 import CustomFAB from './CustomFAB';
 import CustomFABControls, {
@@ -46,7 +46,7 @@ const AnimatedFABExample = () => {
           <Avatar.Text
             style={[styles.avatar, { backgroundColor: item.bgColor }]}
             label={item.initials}
-            color={MD3Colors.primary100}
+            color={Palette.primary100}
             size={40}
           />
           <View style={styles.itemTextContentContainer}>
@@ -89,7 +89,7 @@ const AnimatedFABExample = () => {
               <Icon
                 name={item.favorite ? 'star' : 'star-outline'}
                 color={
-                  item.favorite ? MD3Colors.error70 : MD3Colors.neutralVariant70
+                  item.favorite ? Palette.error70 : Palette.neutralVariant70
                 }
                 size={20}
                 onPress={() => setVisible(!visible)}

diff --git a/example/src/Examples/AppbarExample.tsx b/example/src/Examples/AppbarExample.tsx
@@ -6,7 +6,7 @@ import {
   Appbar,
   FAB,
   List,
-  MD3Colors,
+  Palette,
   RadioButton,
   Snackbar,
   Switch,
@@ -32,7 +32,6 @@ const AppbarExample = ({ navigation }: Props) => {
   const [showSearchIcon, setShowSearchIcon] = React.useState(true);
   const [showMoreIcon, setShowMoreIcon] = React.useState(true);
   const [showCustomColor, setShowCustomColor] = React.useState(false);
-  const [showExactTheme, setShowExactTheme] = React.useState(false);
   const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
   const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
   const [showElevated, setShowElevated] = React.useState(false);
@@ -49,9 +48,6 @@ const AppbarExample = ({ navigation }: Props) => {
       header: () => (
         <Appbar.Header
           style={showCustomColor ? styles.customColor : null}
-          theme={{
-            mode: showExactTheme ? 'exact' : 'adaptive',
-          }}
           mode={appbarMode}
           elevated={showElevated}
         >
@@ -80,7 +76,6 @@ const AppbarExample = ({ navigation }: Props) => {
     showSearchIcon,
     showMoreIcon,
     showCustomColor,
-    showExactTheme,
     appbarMode,
     showCalendarIcon,
     isCenterAlignedMode,
@@ -129,10 +124,6 @@ const AppbarExample = ({ navigation }: Props) => {
         <Text>Custom Color</Text>
         <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
       </View>
-      <View style={styles.row}>
-        <Text>Exact Dark Theme</Text>
-        <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
-      </View>
       <View style={styles.row}>
         <Text>Elevated</Text>
         <Switch value={showElevated} onValueChange={setShowElevated} />
@@ -186,7 +177,6 @@ const AppbarExample = ({ navigation }: Props) => {
           },
         ]}
         safeAreaInsets={{ bottom, left, right }}
-        theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }}
       >
         <Appbar.Action icon="archive" onPress={() => {}} />
         <Appbar.Action icon="email" onPress={() => {}} />
@@ -231,6 +221,6 @@ const styles = StyleSheet.create({
     right: 16,
   },
   customColor: {
-    backgroundColor: MD3Colors.secondary80,
+    backgroundColor: Palette.secondary80,
   },
 });
diff --git a/example/src/Examples/AvatarExample.tsx b/example/src/Examples/AvatarExample.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Avatar, List, MD3Colors } from 'react-native-paper';
+import { Avatar, List, Palette } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -14,11 +14,11 @@ const AvatarExample = () => {
             style={[
               styles.avatar,
               {
-                backgroundColor: MD3Colors.error70,
+                backgroundColor: Palette.error70,
               },
             ]}
             label="XD"
-            color={MD3Colors.primary0}
+            color={Palette.primary0}
           />
           <Avatar.Text style={styles.avatar} label="XD" />
           <Avatar.Text style={styles.avatar} label="XD" size={80} />
@@ -30,11 +30,11 @@ const AvatarExample = () => {
             style={[
               styles.avatar,
               {
-                backgroundColor: MD3Colors.error70,
+                backgroundColor: Palette.error70,
               },
             ]}
             icon="folder"
-            color={MD3Colors.primary0}
+            color={Palette.primary0}
           />
           <Avatar.Icon style={styles.avatar} icon="folder" />
           <Avatar.Icon style={styles.avatar} icon="folder" size={80} />

diff --git a/example/src/Examples/BadgeExample.tsx b/example/src/Examples/BadgeExample.tsx
@@ -5,7 +5,7 @@ import {
   Badge,
   IconButton,
   List,
-  MD3Colors,
+  Palette,
   Text,
   Switch,
 } from 'react-native-paper';
@@ -41,7 +41,7 @@ const BadgeExample = () => {
               style={[
                 styles.badge,
                 {
-                  backgroundColor: MD3Colors.primary80,
+                  backgroundColor: Palette.primary80,
                 },
               ]}
             >

diff --git a/example/src/Examples/BannerExample.tsx b/example/src/Examples/BannerExample.tsx
@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native';
 
-import { Banner, FAB, MD3Colors } from 'react-native-paper';
+import { Banner, FAB, Palette } from 'react-native-paper';
 
 import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
@@ -33,12 +33,12 @@ const BannerExample = () => {
     ...defaultTheme,
     colors: {
       ...defaultTheme.colors,
-      onSurface: MD3Colors.tertiary100,
+      onSurface: Palette.tertiary100,
       elevation: {
         ...defaultTheme.colors.elevation,
-        level1: MD3Colors.tertiary50,
+        level1: Palette.tertiary50,
       },
-      primary: MD3Colors.tertiary10,
+      primary: Palette.tertiary10,
     },
   };
 

diff --git a/example/src/Examples/CheckboxExample.tsx b/example/src/Examples/CheckboxExample.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Checkbox, MD3Colors, Text, TouchableRipple } from 'react-native-paper';
+import { Checkbox, Palette, Text, TouchableRipple } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -26,7 +26,7 @@ const CheckboxExample = () => {
           <Text>Custom</Text>
           <View pointerEvents="none">
             <Checkbox
-              color={MD3Colors.error70}
+              color={Palette.error70}
               status={checkedCustom ? 'checked' : 'unchecked'}
             />
           </View>

diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
 import color from 'color';
-import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper';
+import { Chip, List, Palette, Snackbar, Text } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -11,7 +11,7 @@ const ChipExample = () => {
     visible: false,
     text: '',
   });
-  const customColor = MD3Colors.error50;
+  const customColor = Palette.error50;
 
   return (
     <>

diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+import { Button, Portal, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -16,20 +16,18 @@ const DialogWithCustomColors = ({
       <Dialog
         onDismiss={close}
         style={{
-          backgroundColor: MD3Colors.primary10,
+          backgroundColor: Palette.primary10,
         }}
         visible={visible}
       >
-        <Dialog.Title style={{ color: MD3Colors.primary95 }}>
-          Alert
-        </Dialog.Title>
+        <Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
         <Dialog.Content>
-          <TextComponent style={{ color: MD3Colors.primary95 }}>
+          <TextComponent style={{ color: Palette.primary95 }}>
             This is a dialog with custom colors
           </TextComponent>
         </Dialog.Content>
         <Dialog.Actions>
-          <Button color={MD3Colors.primary95} onPress={close}>
+          <Button textColor={Palette.primary95} onPress={close}>
             Ok
           </Button>
         </Dialog.Actions>

diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+import { Button, Portal, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -26,7 +26,7 @@ const DialogWithDismissableBackButton = ({
         </TextComponent>
       </Dialog.Content>
       <Dialog.Actions>
-        <Button color={MD3Colors.tertiary50} disabled>
+        <Button textColor={Palette.tertiary50} disabled>
           Disagree
         </Button>
         <Button onPress={close}>Agree</Button>

diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 
-import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+import { Button, Portal, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -24,7 +24,7 @@ const DialogWithIcon = ({
           </TextComponent>
         </Dialog.Content>
         <Dialog.Actions>
-          <Button onPress={close} color={MD3Colors.error50}>
+          <Button onPress={close} textColor={Palette.error50}>
             Disagree
           </Button>
           <Button onPress={close}>Agree</Button>

diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 
-import { Dialog, MD3Colors, Portal } from 'react-native-paper';
+import { Dialog, Palette, Portal } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -21,7 +21,7 @@ const DialogWithLoadingIndicator = ({
         <Dialog.Content>
           <View style={styles.flexing}>
             <ActivityIndicator
-              color={MD3Colors.tertiary30}
+              color={Palette.tertiary30}
               size={isIOS ? 'large' : 48}
               style={styles.marginRight}
             />

diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+import { Button, Portal, Dialog, Palette } from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
@@ -18,7 +18,7 @@ const UndismissableDialog = ({
         <TextComponent>This is an undismissable dialog!!</TextComponent>
       </Dialog.Content>
       <Dialog.Actions>
-        <Button color={MD3Colors.tertiary50} disabled>
+        <Button textColor={Palette.tertiary50} disabled>
           Disagree
         </Button>
         <Button onPress={close}>Agree</Button>