Add iOS Dark Mode

src/components/App.tsx

@@ -2,9 +2,14 @@ import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import TrackPlayer from 'react-native-track-player';
 import { PersistGate } from 'redux-persist/integration/react';
-import { NavigationContainer } from '@react-navigation/native';
+import { AppearanceProvider, Appearance } from 'react-native-appearance';
 import Routes from '../screens';
 import store, { persistedStore } from 'store';
+import {
+    NavigationContainer,
+    DefaultTheme,
+    DarkTheme,
+} from '@react-navigation/native';
 
 interface State {
     isReady: boolean;
@@ -32,6 +37,7 @@ export default class App extends Component<State> {
     
     render() {
         const { isReady } = this.state;
+        const scheme = Appearance.getColorScheme();
 
         if (!isReady) {
             return null;
@@ -40,9 +46,11 @@ export default class App extends Component<State> {
         return (
             <Provider store={store}>
                 <PersistGate loading={null} persistor={persistedStore}>
-                    <NavigationContainer>
-                        <Routes />
-                    </NavigationContainer>
+                    <AppearanceProvider>
+                        <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+                            <Routes />
+                        </NavigationContainer>
+                    </AppearanceProvider>
                 </PersistGate>
             </Provider>
         );

src/components/Colors.tsx

@@ -0,0 +1,76 @@
+import { StyleSheet, PlatformColor, Platform, DynamicColorIOS } from 'react-native';
+import { THEME_COLOR } from 'CONSTANTS';
+
+export const colors = StyleSheet.create({
+    text: {
+        ...Platform.select({
+            ios: { 
+                color: PlatformColor('label'),
+            },
+            android: { 
+                color: PlatformColor('?android:attr/textColorPrimary'),
+            }
+        }),
+    },
+    view: {
+        ...Platform.select({
+            ios: { 
+                backgroundColor: PlatformColor('systemBackground'),
+            },
+            android: { 
+                backgroundColor: PlatformColor('?android:attr/backgroundTint'),
+            }
+        }),
+    },
+    border: {
+        ...Platform.select({
+            ios: { 
+                borderColor: PlatformColor('systemGray5Color'),
+            },
+            android: { 
+                borderColor: PlatformColor('?android:attr/backgroundTint'),
+            }
+        }),
+    },
+    activeBackground: {
+        ...Platform.select({
+            ios: { 
+                backgroundColor: DynamicColorIOS({ light: `${THEME_COLOR}16`, dark: `${THEME_COLOR}66` })
+            },
+            android: { 
+                backgroundColor: PlatformColor('?android:attr/backgroundTint'),
+            }
+        }),
+    },
+    imageBackground: {
+        ...Platform.select({
+            ios: { 
+                backgroundColor: PlatformColor('systemGray5Color')
+            },
+            android: { 
+                backgroundColor: PlatformColor('?android:attr/backgroundTint'),
+            }
+        }),
+    },
+    modal: {
+        ...Platform.select({
+            ios: { 
+                backgroundColor: DynamicColorIOS({ light: '#eeeeeeee', dark: '#222222ee' })
+            },
+            android: { 
+                backgroundColor: PlatformColor('?android:attr/backgroundTint'),
+            }
+        }),
+    },
+    input: {
+        ...Platform.select({
+            ios: { 
+                backgroundColor: PlatformColor('systemGray5Color'),
+                color: PlatformColor('label'),
+            },
+            android: { 
+                backgroundColor: PlatformColor('?android:attr/backgroundTint'),
+            }
+        }),
+    }
+});

src/components/Input.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components/native';
 
 const Input = styled.TextInput`
     margin: 10px 0;
-    background-color: #f6f6f6;
     border-radius: 5px;
     padding: 15px;
 `;

src/components/ListButton.tsx

@@ -3,20 +3,20 @@ import { TouchableOpacityProps, Text } from 'react-native';
 import ChevronRight from 'assets/chevron-right.svg';
 import styled from 'styled-components/native';
 import { THEME_COLOR } from 'CONSTANTS';
+import { colors } from './Colors';
 
 const BUTTON_SIZE = 14;
 
 const Container = styled.TouchableOpacity`
     padding: 18px 0;
     border-bottom-width: 1px;
-    border-bottom-color: #eee;
     flex-direction: row;
     justify-content: space-between;
 `;
 
 const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
     return (
-        <Container {...props}>
+        <Container {...props} style={colors.borderColor}>
             <Text style={{ color: THEME_COLOR, fontSize: 16 }}>{children}</Text>
             <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={THEME_COLOR} />
         </Container>

src/components/Modal.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
 import styled from 'styled-components/native';
 import { SafeAreaView } from 'react-native';
+import { colors } from './Colors';
 
 const Background = styled.View`
-    background-color: #eeeeeeee;
     padding: 100px 25px;
     flex: 1;
 `;
 
 const Container = styled.View`
-    background-color: white;
     border-radius: 20px;
     flex: 1;
 `;
 
 const Modal: React.FC = ({ children }) => {
     return (
-        <Background>
-            <SafeAreaView style={{ flex: 1}}>
-                <Container>
+        <Background style={colors.modal}>
+            <SafeAreaView style={{ flex: 1 }}>
+                <Container style={colors.view}>
                     {children}
                 </Container>
             </SafeAreaView>