feat: add theme switcher (#3068)

callstack · Jun 8, 2022 · 2a9eff3 · 2a9eff3
1 parent c0a6ab6
commit 2a9eff3
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
@@ -16,6 +16,7 @@ import { isWeb } from '../utils';
 type Props = {
   toggleTheme: () => void;
   toggleRTL: () => void;
+  toggleThemeVersion: () => void;
   isRTL: boolean;
   isDarkTheme: boolean;
 };
@@ -39,12 +40,18 @@ const DrawerItemsData = [
   { label: 'A very long title that will be truncated', icon: 'delete', key: 4 },
 ];
 
-const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
+const DrawerItems = ({
+  toggleTheme,
+  toggleRTL,
+  toggleThemeVersion,
+  isRTL,
+  isDarkTheme,
+}: Props) => {
   const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(0);
 
   const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
 
-  const { colors } = useTheme();
+  const { colors, isV3 } = useTheme();
 
   const _handleToggleRTL = () => {
     toggleRTL();
@@ -84,6 +91,7 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
             </View>
           </View>
         </TouchableRipple>
+
         <TouchableRipple onPress={_handleToggleRTL}>
           <View style={styles.preference}>
             <Text>RTL</Text>
@@ -92,6 +100,15 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
             </View>
           </View>
         </TouchableRipple>
+
+        <TouchableRipple onPress={toggleThemeVersion}>
+          <View style={styles.preference}>
+            <Text>Switch back to Material 2</Text>
+            <View pointerEvents="none">
+              <Switch value={!isV3} />
+            </View>
+          </View>
+        </TouchableRipple>
       </Drawer.Section>
     </DrawerContentScrollView>
   );
@@ -103,6 +120,7 @@ const styles = StyleSheet.create({
   },
   preference: {
     flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'space-between',
     paddingVertical: 12,
     paddingHorizontal: 16,

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -8,9 +8,10 @@ import { InitialState, NavigationContainer } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   Provider as PaperProvider,
-  DarkTheme,
-  DefaultTheme as LightTheme,
-  ThemeBase,
+  MD3DarkTheme,
+  MD3LightTheme,
+  MD2DarkTheme,
+  MD2LightTheme,
 } from 'react-native-paper';
 import App from './RootNavigator';
 import DrawerItems from './DrawerItems';
@@ -44,6 +45,7 @@ const DrawerContent = () => {
         <DrawerItems
           toggleTheme={preferences.toggleTheme}
           toggleRTL={preferences.toggleRtl}
+          toggleThemeVersion={preferences.toggleThemeVersion}
           isRTL={preferences.rtl}
           isDarkTheme={preferences.theme.dark}
         />
@@ -62,9 +64,23 @@ export default function PaperExample() {
     InitialState | undefined
   >();
 
-  const [theme, setTheme] = React.useState<ThemeBase>(LightTheme);
+  const [isDarkMode, setIsDarkMode] = React.useState(false);
+  const [themeVersion, setThemeVersion] = React.useState<2 | 3>(3);
   const [rtl, setRtl] = React.useState<boolean>(I18nManager.isRTL);
 
+  const themeMode = isDarkMode ? 'dark' : 'light';
+
+  const theme = {
+    2: {
+      light: MD2LightTheme,
+      dark: MD2DarkTheme,
+    },
+    3: {
+      light: MD3LightTheme,
+      dark: MD3DarkTheme,
+    },
+  }[themeVersion][themeMode];
+
   React.useEffect(() => {
     const restoreState = async () => {
       try {
@@ -91,8 +107,7 @@ export default function PaperExample() {
         const preferences = JSON.parse(prefString || '');
 
         if (preferences) {
-          // eslint-disable-next-line react/no-did-mount-set-state
-          setTheme(preferences.theme === 'dark' ? DarkTheme : LightTheme);
+          setIsDarkMode(preferences.theme === 'dark');
 
           if (typeof preferences.rtl === 'boolean') {
             setRtl(preferences.rtl);
@@ -112,7 +127,7 @@ export default function PaperExample() {
         await AsyncStorage.setItem(
           PREFERENCES_KEY,
           JSON.stringify({
-            theme: theme === DarkTheme ? 'dark' : 'light',
+            theme: themeMode,
             rtl,
           })
         );
@@ -129,13 +144,14 @@ export default function PaperExample() {
     };
 
     savePrefs();
-  }, [rtl, theme]);
+  }, [rtl, themeMode]);
 
   const preferences = React.useMemo(
     () => ({
-      toggleTheme: () =>
-        setTheme((theme) => (theme === LightTheme ? DarkTheme : LightTheme)),
+      toggleTheme: () => setIsDarkMode((oldValue) => !oldValue),
       toggleRtl: () => setRtl((rtl) => !rtl),
+      toggleThemeVersion: () =>
+        setThemeVersion((oldThemeVersion) => (oldThemeVersion === 2 ? 3 : 2)),
       rtl,
       theme,
     }),

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,9 +4,12 @@ export { Colors };
 
 export { useTheme, withTheme, ThemeProvider } from './core/theming';
 
+export { default as MD2LightTheme } from './styles/themes/v2/LightTheme';
+export { default as MD2DarkTheme } from './styles/themes/v2/DarkTheme';
+export { default as MD3LightTheme } from './styles/themes/v3/LightTheme';
+export { default as MD3DarkTheme } from './styles/themes/v3/DarkTheme';
+
 export { default as Provider } from './core/Provider';
-export { default as DefaultTheme } from './styles/themes/v3/LightTheme';
-export { default as DarkTheme } from './styles/themes/v3/DarkTheme';
 export { default as shadow } from './styles/shadow';
 export { default as overlay } from './styles/overlay';
 export { default as configureFonts } from './styles/fonts';