Add iOS Dark Mode

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>
             ))}