Add iOS Dark Mode

src/screens/Player/components/NowPlaying.tsx

@@ -1,29 +1,47 @@
 import React from 'react';
-import { Text, Dimensions, View } from 'react-native';
+import { Text, Dimensions, View, StyleSheet } from 'react-native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import styled from 'styled-components/native';
 import FastImage from 'react-native-fast-image';
+import { colors } from 'components/Colors';
 
 const Screen = Dimensions.get('screen');
 
 const Artwork = styled(FastImage)`
     border-radius: 10px;
-    background-color: #fbfbfb;
     width: ${Screen.width * 0.8}px;
     height: ${Screen.width * 0.8}px;
     margin: 25px auto;
     display: flex;
+    flex: 1;
 `;
 
+const styles = StyleSheet.create({
+    artist: {
+        ...colors.text,
+        fontWeight: 'bold',
+        fontSize: 24,
+        marginBottom: 12,
+    },
+    title: {
+        ...colors.text,
+        fontSize: 18,
+        marginBottom: 12,
+        textAlign: 'center',
+        paddingLeft: 20,
+        paddingRight: 20,
+    }
+});
+
 
 export default function NowPlaying() {
     const track = useCurrentTrack();
 
     return (
         <View style={{ alignItems: 'center' }}>
-            <Artwork style={{ flex: 1 }} source={{ uri: track?.artwork }} />
-            <Text style={{ fontWeight: 'bold', fontSize: 24, marginBottom: 12 }} >{track?.artist}</Text>
-            <Text style={{ fontSize: 18, marginBottom: 12, textAlign: 'center', paddingLeft: 20, paddingRight: 20 }}>{track?.title}</Text>
+            <Artwork style={colors.imageBackground} source={{ uri: track?.artwork }} />
+            <Text style={styles.artist} >{track?.artist}</Text>
+            <Text style={styles.title}>{track?.title}</Text>
         </View>
     );
 }

src/screens/Player/components/ProgressBar.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components/native';
 import { Text, Platform } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { THEME_COLOR } from 'CONSTANTS';
+import { colors } from 'components/Colors';
 
 const NumberBar = styled.View`
     flex-direction: row;
@@ -78,8 +79,8 @@ export default class ProgressBar extends Component<{}, State> {
                     disabled={!duration}
                 />
                 <NumberBar>
-                    <Text>{getMinutes(gesture || position)}:{getSeconds(gesture || position)}</Text>
-                    <Text>{getMinutes(duration)}:{getSeconds(duration)}</Text>
+                    <Text style={colors.text}>{getMinutes(gesture || position)}:{getSeconds(gesture || position)}</Text>
+                    <Text style={colors.text}>{getMinutes(duration)}:{getSeconds(duration)}</Text>
                 </NumberBar>
             </>
         );

src/screens/Player/components/Queue.tsx

@@ -1,29 +1,39 @@
 import React, { useCallback } from 'react';
 import useQueue from 'utility/useQueue';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import styled, { css } from 'styled-components/native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import TouchableHandler from 'components/TouchableHandler';
 import TrackPlayer from 'react-native-track-player';
 import { THEME_COLOR } from 'CONSTANTS';
+import { colors } from 'components/Colors';
 
-const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
+const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean, isDark?: boolean }>`
     padding: 10px;
     border-bottom-width: 1px;
-    border-bottom-color: #eee;
 
     ${props => props.active && css`
         font-weight: 900;
-        background-color: ${THEME_COLOR}16;
         padding: 20px 35px;
         margin: 0 -25px;
     `}
 
     ${props => props.alreadyPlayed && css`
-        opacity: 0.25;
+        opacity: 0.5;
     `}
 `;
 
+const styles = StyleSheet.create({
+    title: {
+        ...colors.text,
+        marginBottom: 2,
+    },
+    artist: {
+        ...colors.text,
+        opacity: 0.5,
+    }
+});
+
 export default function Queue() {
     const queue = useQueue();
     const currentTrack = useCurrentTrack();
@@ -38,9 +48,17 @@ export default function Queue() {
             <Text style={{ marginTop: 20, marginBottom: 20 }}>Queue</Text>
             {queue.map((track, i) => (
                 <TouchableHandler id={track.id} onPress={playTrack} key={i}>
-                    <QueueItem active={currentTrack?.id === track.id} key={i} alreadyPlayed={i < currentIndex}>
-                        <Text style={{marginBottom: 2}}>{track.title}</Text>
-                        <Text style={{ opacity: 0.5 }}>{track.artist}</Text>
+                    <QueueItem 
+                        active={currentTrack?.id === track.id}
+                        key={i}
+                        alreadyPlayed={i < currentIndex}
+                        style={{
+                            ...colors.border,
+                            ...currentTrack?.id === track.id ? colors.activeBackground : {},
+                        }}
+                    >
+                        <Text style={styles.title}>{track.title}</Text>
+                        <Text style={styles.artist}>{track.artist}</Text>
                     </QueueItem>
                 </TouchableHandler>
             ))}

src/screens/Player/index.tsx

@@ -1,25 +1,35 @@
 import React from 'react';
+import { DynamicColorIOS, StyleSheet, ScrollView, Platform, PlatformColor } from 'react-native';
 import MediaControls from './components/MediaControls';
 import ProgressBar from './components/ProgressBar';
 import NowPlaying from './components/NowPlaying';
-import styled from 'styled-components/native';
 import Queue from './components/Queue';
 
-const Container = styled.ScrollView`
-    background-color: #fff;
-`;
-
-const containerStyle = {
-    padding: 25,
-};
+const styles = StyleSheet.create({
+    outer: {
+        ...Platform.select({
+            ios: { 
+                color: PlatformColor('label'),
+                backgroundColor: PlatformColor('systemBackground'),
+            },
+            android: { 
+                color: PlatformColor('?android:attr/textColorPrimary'),
+                backgroundColor: PlatformColor('?android:attr/backgroundTint'),
+            }
+        }),
+    },
+    inner: {
+        padding: 25,
+    }
+});
 
 export default function Player() {
     return (
-        <Container contentContainerStyle={containerStyle}>
+        <ScrollView contentContainerStyle={styles.inner} style={styles.outer}>
             <NowPlaying />
             <MediaControls />
             <ProgressBar />
             <Queue />
-        </Container>
+        </ScrollView>
     );
 }