refactor: remove mode from theme

Author: lukewalczak

docs/docs/guides/02-theming.mdx

@@ -68,7 +68,6 @@ A theme usually contains the following properties:
 - `version`: specify which design system components should follow in the app
   - 3 - new Material You (MD3)
   - 2 - previous Material Design (MD2)
-- `mode` (`'adaptive' | 'exact'`): color mode for dark theme (See [Dark Theme](#dark-theme)).
 - `roundness` (`number`): roundness of common elements, such as buttons.
 - `colors` (`object`): various colors used throughout different elements.
 
@@ -616,22 +615,6 @@ export default function FancyButton(props) {
 
 Now you can use your `FancyButton` component everywhere instead of using `Button` from Paper.
 
-## Dark Theme
-
-Since 3.0 we adapt dark theme to follow [Material design guidelines](https://material.io/design/color/dark-theme.html). <br/>
-In contrast to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `AppBar` or `BottomNavigation`.<br/>
-The dark theme adds a white overlay with opacity depending on elevation of surfaces. It uses it for the better accentuation of surface elevation. Using only shadow is highly imperceptible on dark surfaces.
-
-We are aware that users often use dark theme in their own ways and may not want to use the default dark theme features from the guidelines.<br/>
-That's why if you are using dark theme you can switch between two dark theme `mode`s:
-
-- `exact` where everything is like it was before. `Appbar` and `BottomNavigation` will still use primary colour by default.<br/>
-- `adaptive` where we follow [Material design guidelines](https://material.io/design/color/dark-theme.html), the surface will use white overlay with opacity to show elevation, `Appbar` and `BottomNavigation` will use surface colour as a background.
-
-If you don't use a custom theme, Paper will automatically change between the default theme and the default dark theme, depending on device settings.
-
-Otherwise, your custom theme will need to handle it manually, using React Native's [Appearance API](https://reactnative.dev/docs/appearance).
-
 ## Gotchas
 
 The `PaperProvider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html), which means that the component must be in the same tree as the `PaperProvider`. Some React Native components will render a different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the exported `ThemeProvider` component.

example/src/Examples/AppbarExample.tsx

@@ -46,9 +46,6 @@ const AppbarExample = ({ navigation }: Props) => {
       header: () => (
         <Appbar.Header
           style={showCustomColor ? styles.customColor : null}
-          theme={{
-            mode: 'adaptive',
-          }}
           mode={appbarMode}
           elevated={showElevated}
         >
@@ -171,7 +168,6 @@ const AppbarExample = ({ navigation }: Props) => {
           },
         ]}
         safeAreaInsets={{ bottom, left, right }}
-        theme={{ mode: 'adaptive' }}
       >
         <Appbar.Action icon="archive" onPress={() => {}} />
         <Appbar.Action icon="email" onPress={() => {}} />

src/components/Appbar/Appbar.tsx

@@ -69,9 +69,6 @@ export type Props = Omit<
  * The top bar usually contains the screen title, controls such as navigation buttons, menu button etc.
  * The bottom bar usually provides access to a drawer and up to four actions.
  *
- * By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations
- *
  * ## Usage
  * ### Top bar
  * ```js

src/components/BottomNavigation/BottomNavigation.tsx

@@ -271,9 +271,6 @@ const SceneComponent = React.memo(({ component, ...rest }: any) =>
  * BottomNavigation provides quick navigation between top-level views of an app with a bottom navigation bar.
  * It is primarily designed for use on mobile. If you want to use the navigation bar only see [`BottomNavigation.Bar`](BottomNavigationBar).
  *
- * By default BottomNavigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
- *
  * ## Usage
  * ```js
  * import * as React from 'react';

src/components/Card/Card.tsx

@@ -145,7 +145,7 @@ const Card = (
     onLongPress,
     onPressOut,
     onPressIn,
-    mode: cardMode = 'elevated',
+    mode = 'elevated',
     children,
     style,
     contentStyle,
@@ -158,11 +158,16 @@ const Card = (
   ref: React.ForwardedRef<View>
 ) => {
   const theme = useInternalTheme(themeOverrides);
+  const {
+    animation: { scale },
+    roundness,
+  } = theme;
+
   const isMode = React.useCallback(
     (modeToCompare: Mode) => {
-      return cardMode === modeToCompare;
+      return mode === modeToCompare;
     },
-    [cardMode]
+    [mode]
   );
 
   const hasPassedTouchHandler = hasTouchHandler({
@@ -172,65 +177,21 @@ const Card = (
     onPressOut,
   });
 
-  // Default animated value
   const { current: elevation } = React.useRef<Animated.Value>(
     new Animated.Value(cardElevation)
   );
-  // Dark adaptive animated value, used in case of toggling the theme,
-  // it prevents animating the background with native drivers inside Surface
-  const { current: elevationDarkAdaptive } = React.useRef<Animated.Value>(
-    new Animated.Value(cardElevation)
-  );
-  const { animation, dark, mode, roundness } = theme;
-
-  const prevDarkRef = React.useRef<boolean>(dark);
-  React.useEffect(() => {
-    prevDarkRef.current = dark;
-  });
-
-  const prevDark = prevDarkRef.current;
-  const isAdaptiveMode = mode === 'adaptive';
-  const animationDuration = 150 * animation.scale;
-
-  React.useEffect(() => {
-    /**
-     * Resets animations values if updating to dark adaptive mode,
-     * otherwise, any card that is in the middle of animation while
-     * toggling the theme will stay at that animated value until
-     * the next press-in
-     */
-    if (dark && isAdaptiveMode && !prevDark) {
-      elevation.setValue(cardElevation);
-      elevationDarkAdaptive.setValue(cardElevation);
-    }
-  }, [
-    prevDark,
-    dark,
-    isAdaptiveMode,
-    cardElevation,
-    elevation,
-    elevationDarkAdaptive,
-  ]);
 
   const runElevationAnimation = (pressType: HandlePressType) => {
     if (isMode('contained')) {
       return;
     }
 
     const isPressTypeIn = pressType === 'in';
-    if (dark && isAdaptiveMode) {
-      Animated.timing(elevationDarkAdaptive, {
-        toValue: isPressTypeIn ? 2 : cardElevation,
-        duration: animationDuration,
-        useNativeDriver: false,
-      }).start();
-    } else {
-      Animated.timing(elevation, {
-        toValue: isPressTypeIn ? 2 : cardElevation,
-        duration: animationDuration,
-        useNativeDriver: false,
-      }).start();
-    }
+    Animated.timing(elevation, {
+      toValue: isPressTypeIn ? 2 : cardElevation,
+      duration: 150 * scale,
+      useNativeDriver: false,
+    }).start();
   };
 
   const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
@@ -249,12 +210,10 @@ const Card = (
       ? (child.type as any).displayName
       : null
   );
-  const computedElevation =
-    dark && isAdaptiveMode ? elevationDarkAdaptive : elevation;
 
   const { backgroundColor, borderColor: themedBorderColor } = getCardColors({
     theme,
-    mode: cardMode,
+    mode,
   });
 
   const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
@@ -295,7 +254,7 @@ const Card = (
         style,
       ]}
       theme={theme}
-      elevation={isMode('elevated') ? computedElevation : 0}
+      elevation={isMode('elevated') ? elevation : 0}
       testID={`${testID}-container`}
       container
       {...rest}

src/components/Surface.tsx

@@ -209,8 +209,6 @@ const SurfaceIOS = forwardRef<
 
 /**
  * Surface is a basic container that can give depth to an element with elevation shadow.
- * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
  * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
  *
  * ## Usage

src/styles/themes/DarkTheme.tsx

@@ -9,7 +9,6 @@ const { palette, opacity } = tokens.md.ref;
 export const DarkTheme: Theme = {
   ...LightTheme,
   dark: true,
-  mode: 'adaptive',
   colors: {
     primary: palette.primary80,
     primaryContainer: palette.primary30,

src/types.tsx

@@ -19,8 +19,6 @@ export type Font = {
   fontStyle?: 'normal' | 'italic' | undefined;
 };
 
-type Mode = 'adaptive' | 'exact';
-
 export type Colors = {
   primary: string;
   primaryContainer: string;
@@ -61,7 +59,6 @@ export type ThemeProp = $DeepPartial<InternalTheme>;
 
 export type ThemeBase = {
   dark: boolean;
-  mode?: Mode;
   roundness: number;
   animation: {
     scale: number;