Implement dark mode for Android

android/app/build.gradle

@@ -166,13 +166,6 @@ android {
         }
     }
 
-    packagingOptions {
-        pickFirst "lib/armeabi-v7a/libc++_shared.so"
-        pickFirst "lib/arm64-v8a/libc++_shared.so"
-        pickFirst "lib/x86/libc++_shared.so"
-        pickFirst "lib/x86_64/libc++_shared.so"
-    }
-
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         variant.outputs.each { output ->

android/app/src/main/res/values/styles.xml

@@ -1,9 +1,8 @@
 <resources>
 
-    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:textColor">#000000</item>
+        <!-- <item name="android:textColor">#000000</item> -->
     </style>
 
 </resources>

ios/JellyfinAudioPlayer/AppDelegate.m

@@ -36,7 +36,11 @@ static void InitializeFlipper(UIApplication *application) {
                                                    moduleName:@"JellyfinAudioPlayer"
                                             initialProperties:nil];
 
-  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
+  if (@available(iOS 13.0, *)) {
+      rootView.backgroundColor = [UIColor systemBackgroundColor];
+  } else {
+      rootView.backgroundColor = [UIColor whiteColor];
+  }
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [UIViewController new];

src/components/App.tsx

@@ -10,7 +10,6 @@ import {
     DefaultTheme,
     DarkTheme,
 } from '@react-navigation/native';
-import { colors } from './Colors';
 
 interface State {
     isReady: boolean;
@@ -55,8 +54,6 @@ export default class App extends Component<{}, State> {
             return null;
         }
 
-        console.log(colorScheme);
-
         return (
             <Provider store={store}>
                 <PersistGate loading={null} persistor={persistedStore}>

src/components/Colors.android.tsx

@@ -0,0 +1,26 @@
+import { StyleSheet, PlatformColor } from 'react-native';
+import { THEME_COLOR } from 'CONSTANTS';
+
+export const colors = StyleSheet.create({
+    text: {
+        color: PlatformColor('?attr/colorOnBackground'),
+    },
+    view: {
+        backgroundColor: PlatformColor('?android:colorBackground'),
+    },
+    border: {
+        borderColor: '#88888844'
+    },
+    activeBackground: {
+        backgroundColor: `${THEME_COLOR}44`,
+    },
+    imageBackground: {
+        backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
+    },
+    modal: {
+        backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
+    },
+    input: {
+        backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
+    }
+});

src/components/Colors.ios.tsx

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

src/components/Colors.tsx

@@ -1,76 +0,0 @@
-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/screens/Player/components/MediaControls.tsx

@@ -7,6 +7,7 @@ import ForwardIcon from 'assets/forwards.svg';
 import BackwardIcon from 'assets/backwards.svg';
 import PlayIcon from 'assets/play.svg';
 import PauseIcon from 'assets/pause.svg';
+import { useColorScheme } from 'react-native-appearance';
 
 const BUTTON_SIZE = 40;
 
@@ -32,61 +33,64 @@ const Button = styled.View`
 `;
 
 export default function MediaControls() {
+    const scheme = useColorScheme();
+    const fill = scheme === 'dark' ? '#ffffff' : '#000000';
+
     return (
         <Container>
             <Buttons>
                 <Button>
-                    <PreviousButton />
+                    <PreviousButton fill={fill} />
                 </Button>
-                <MainButton />
+                <MainButton fill={fill} />
                 <Button>
-                    <NextButton />
+                    <NextButton fill={fill} />
                 </Button>
             </Buttons>
         </Container>
     );
 }
 
-export function PreviousButton() {
+export function PreviousButton({ fill }: { fill: string }) {
     const hasQueue = useHasQueue();
 
     return (
         <TouchableOpacity onPress={previous} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
-            <BackwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+            <BackwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
         </TouchableOpacity>
     );
 }
 
-export function NextButton() {
+export function NextButton({ fill }: { fill: string }) {
     const hasQueue = useHasQueue();
 
     return (
         <TouchableOpacity onPress={next} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
-            <ForwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+            <ForwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
         </TouchableOpacity>
     );
 }
 
-export function MainButton() {
+export function MainButton({ fill }: { fill: string }) {
     const state = usePlaybackState();
 
     switch (state) {
         case STATE_PLAYING:
             return (
                 <TouchableOpacity onPress={pause}>
-                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
                 </TouchableOpacity>
             );
         case STATE_PAUSED:
             return (
                 <TouchableOpacity onPress={play}>
-                    <PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+                    <PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
                 </TouchableOpacity>
             );
         default:
             return (
                 <TouchableOpacity onPress={pause} disabled>
-                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
+                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
                 </TouchableOpacity>
             );
     }

src/screens/Player/index.tsx

@@ -1,28 +1,20 @@
 import React from 'react';
-import { DynamicColorIOS, StyleSheet, ScrollView, Platform, PlatformColor } from 'react-native';
+import { StyleSheet, ScrollView } from 'react-native';
 import MediaControls from './components/MediaControls';
 import ProgressBar from './components/ProgressBar';
 import NowPlaying from './components/NowPlaying';
 import Queue from './components/Queue';
+import { colors } from 'components/Colors';
 
 const styles = StyleSheet.create({
-    outer: {
+    outer: colors.view,
-        ...Platform.select({
-            ios: { 
-                color: PlatformColor('label'),
-                backgroundColor: PlatformColor('systemBackground'),
-            },
-            android: { 
-                color: PlatformColor('?android:attr/textColorPrimary'),
-                backgroundColor: PlatformColor('?android:attr/backgroundTint'),
-            }
-        }),
-    },
     inner: {
         padding: 25,
     }
 });
 
+console.log(JSON.stringify(styles));
+
 export default function Player() {
     return (
         <ScrollView contentContainerStyle={styles.inner} style={styles.outer}>