Base dark theme implementation

components/settings/settings.jsx

@@ -11,6 +11,7 @@ import { Button, Card, Divider, List, Text } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { ThemeSelector } from "../theme-selector/theme-selector";
 import UploadDeleteSwitch from "./upload-delete-switch";
 
 const mapStateToProps = createStructuredSelector({
@@ -24,6 +25,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(Tab);
 
 function Tab({ bodyshop, currentUser }) {
   const { t } = useTranslation();
+
   const handleClearStorage = () => {
     Alert.alert(
       "Clear Local Cache",
@@ -47,7 +49,7 @@ function Tab({ bodyshop, currentUser }) {
   };
 
   return (
-    <SafeAreaView>
+    <SafeAreaView style={{ flex: 1 }}>
       <ScrollView contentContainerStyle={styles.container}>
         <Text variant="headlineMedium" style={styles.title}>
           Settings
@@ -59,7 +61,6 @@ function Tab({ bodyshop, currentUser }) {
             <List.Section>
               <View style={styles.inlineRow}>
                 <Text style={styles.switchLabel}>
-                  {" "}
                   {t("mediabrowser.labels.deleteafterupload")}
                 </Text>
                 <UploadDeleteSwitch />
@@ -97,6 +98,18 @@ function Tab({ bodyshop, currentUser }) {
           </Card.Actions>
         </Card>
 
+        <Card style={styles.section}>
+          <Card.Title title="Theme" />
+          <Card.Content>
+            <List.Section>
+              <View style={styles.inlineRow}>
+                <ThemeSelector />
+              </View>
+            </List.Section>
+          </Card.Content>
+          <Card.Actions></Card.Actions>
+        </Card>
+
         <Card style={styles.section}>
           <Card.Content>
             <Text style={styles.paragraph}>