refactor: rename "device colors" to "Dynamic Theme"

Author: adrcotfas

example/src/DrawerItems.tsx

@@ -16,7 +16,7 @@ import {
   Portal,
 } from 'react-native-paper';
 
-import { deviceColorsSupported, isWeb } from '../utils';
+import { dynamicThemeSupported, isWeb } from '../utils';
 import { useExampleTheme } from './hooks/useExampleTheme';
 import { PreferencesContext } from './PreferencesContext';
 
@@ -103,7 +103,7 @@ function DrawerItems() {
   if (!preferences) throw new Error('PreferencesContext not provided');
 
   const {
-    toggleShouldUseDeviceColors,
+    toggleShouldUseDynamicTheme,
     toggleTheme,
     toggleRtl: toggleRTL,
     toggleCollapsed,
@@ -114,7 +114,7 @@ function DrawerItems() {
     collapsed,
     rtl: isRTL,
     theme: { dark: isDarkTheme },
-    shouldUseDeviceColors,
+    shouldUseDynamicTheme,
   } = preferences;
 
   const _handleToggleRTL = () => {
@@ -181,12 +181,12 @@ function DrawerItems() {
           </Drawer.Section>
 
           <Drawer.Section title="Preferences">
-            {deviceColorsSupported ? (
-              <TouchableRipple onPress={toggleShouldUseDeviceColors}>
+            {dynamicThemeSupported ? (
+              <TouchableRipple onPress={toggleShouldUseDynamicTheme}>
                 <View style={styles.preference}>
-                  <Text variant="labelLarge">Use device colors *</Text>
+                  <Text variant="labelLarge">Use Dynamic Theme</Text>
                   <View pointerEvents="none">
-                    <Switch value={shouldUseDeviceColors} />
+                    <Switch value={shouldUseDynamicTheme} />
                   </View>
                 </View>
               </TouchableRipple>

example/src/PreferencesContext.tsx

@@ -8,11 +8,11 @@ export const PreferencesContext = React.createContext<{
   toggleCollapsed: () => void;
   toggleCustomFont: () => void;
   toggleRippleEffect: () => void;
-  toggleShouldUseDeviceColors?: () => void;
+  toggleShouldUseDynamicTheme?: () => void;
   theme: Theme;
   rtl: boolean;
   collapsed: boolean;
   customFontLoaded: boolean;
   rippleEffectEnabled: boolean;
-  shouldUseDeviceColors?: boolean;
+  shouldUseDynamicTheme?: boolean;
 } | null>(null);

example/src/index.native.tsx

@@ -20,7 +20,7 @@ import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import DrawerItems from './DrawerItems';
 import { PreferencesContext } from './PreferencesContext';
 import App from './RootNavigator';
-import { deviceColorsSupported } from '../utils';
+import { dynamicThemeSupported } from '../utils';
 import {
   CombinedDefaultTheme,
   CombinedDarkTheme,
@@ -45,7 +45,7 @@ export default function PaperExample() {
     InitialState | undefined
   >();
 
-  const [shouldUseDeviceColors, setShouldUseDeviceColors] =
+  const [shouldUseDynamicTheme, setShouldUseDynamicTheme] =
     React.useState(true);
   const [isDarkMode, setIsDarkMode] = React.useState(false);
   const [rtl, setRtl] = React.useState<boolean>(
@@ -56,12 +56,12 @@ export default function PaperExample() {
   const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true);
 
   const theme = React.useMemo(() => {
-    if (deviceColorsSupported && shouldUseDeviceColors) {
+    if (dynamicThemeSupported && shouldUseDynamicTheme) {
       return isDarkMode ? DynamicDarkTheme : DynamicLightTheme;
     }
 
     return isDarkMode ? DarkTheme : LightTheme;
-  }, [isDarkMode, shouldUseDeviceColors]);
+  }, [isDarkMode, shouldUseDynamicTheme]);
 
   React.useEffect(() => {
     const restoreState = async () => {
@@ -128,8 +128,8 @@ export default function PaperExample() {
 
   const preferences = React.useMemo(
     () => ({
-      toggleShouldUseDeviceColors: () =>
-        setShouldUseDeviceColors((oldValue) => !oldValue),
+      toggleShouldUseDynamicTheme: () =>
+        setShouldUseDynamicTheme((oldValue) => !oldValue),
       toggleTheme: () => setIsDarkMode((oldValue) => !oldValue),
       toggleRtl: () => setRtl((rtl) => !rtl),
       toggleCollapsed: () => setCollapsed(!collapsed),
@@ -140,14 +140,14 @@ export default function PaperExample() {
       collapsed,
       rtl,
       theme,
-      shouldUseDeviceColors,
+      shouldUseDynamicTheme: shouldUseDynamicTheme,
     }),
     [
       rtl,
       theme,
       collapsed,
       customFontLoaded,
-      shouldUseDeviceColors,
+      shouldUseDynamicTheme,
       rippleEffectEnabled,
     ]
   );

example/src/index.tsx

@@ -110,9 +110,9 @@ export default function PaperExample() {
       rippleEffectEnabled,
       // noop for web, specified to avoid type errors
       toggleRtl: noop,
-      toggleShouldUseDeviceColors: noop,
+      toggleShouldUseDynamicTheme: noop,
       rtl: false,
-      shouldUseDeviceColors: false,
+      shouldUseDynamicTheme: false,
     }),
     [theme, collapsed, customFontLoaded, rippleEffectEnabled]
   );

example/utils/index.ts

@@ -1433,5 +1433,5 @@ export const restaurantsData = [
   },
 ];
 
-export const deviceColorsSupported =
+export const dynamicThemeSupported =
   Platform.OS === 'android' && (Platform.Version as number) >= 31;