Base dark theme implementation

components/data-label/data-label.jsx

@@ -1,6 +1,7 @@
 import { DateTime } from "luxon";
 import React from "react";
-import { Text, View } from "react-native";
+import { View } from "react-native";
+import { Text } from "react-native-paper";
 
 export default function DataLabelComponent({
   label,
@@ -17,7 +18,7 @@ export default function DataLabelComponent({
   const { key, ...rest } = restProps;
   return (
     <View key={key} {...rest} style={{ margin: 4, ...restProps.style }}>
-      <Text style={{ color: "slategray" }}>{label}</Text>
+      <Text>{label}</Text>
       <Text>{theContent}</Text>
     </View>
   );

components/error/error-display.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { Text } from "react-native";
-import { Button, Card } from "react-native-paper";
+
+import { Button, Card, Text } from "react-native-paper";
 
 export default function ErrorDisplay({ errorMessage, error, onDismiss }) {
   const { t } = useTranslation();
@@ -14,11 +14,11 @@ export default function ErrorDisplay({ errorMessage, error, onDismiss }) {
             error ||
             "An unknown error has occured."}
         </Text>
-      {onDismiss ? (
-        <Card.Actions>
-          <Button onPress={onDismiss}>{t("general.labels.dismiss")}</Button>
-        </Card.Actions>
-      ) : null}
+        {onDismiss ? (
+          <Card.Actions>
+            <Button onPress={onDismiss}>{t("general.labels.dismiss")}</Button>
+          </Card.Actions>
+        ) : null}
       </Card.Content>
     </Card>
   );

components/job-documents/job-documents.jsx

@@ -6,12 +6,11 @@ import {
   FlatList,
   Image,
   RefreshControl,
-  Text,
   TouchableOpacity,
   View,
 } from "react-native";
 import ImageView from "react-native-image-viewing";
-import { ActivityIndicator } from "react-native-paper";
+import { ActivityIndicator, Text } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import env from "../../env";

components/job-notes/job-notes.jsx

@@ -5,8 +5,8 @@ import { useGlobalSearchParams } from "expo-router";
 import { DateTime } from "luxon";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, RefreshControl, Text, View } from "react-native";
-import { ActivityIndicator, Card } from "react-native-paper";
+import { FlatList, RefreshControl, View } from "react-native";
+import { ActivityIndicator, Card, Text } from "react-native-paper";
 import ErrorDisplay from "../error/error-display";
 
 export default function JobNotes() {

components/job-tombstone/job-tombstone.jsx

@@ -3,14 +3,8 @@ import { useQuery } from "@apollo/client";
 import { useLocalSearchParams } from "expo-router";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import {
-  RefreshControl,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-import { ActivityIndicator, Card, useTheme } from "react-native-paper";
+import { RefreshControl, ScrollView, StyleSheet, View } from "react-native";
+import { ActivityIndicator, Card, Text, useTheme } from "react-native-paper";
 import DataLabelComponent from "../data-label/data-label";
 
 export default function JobTombstone() {
@@ -82,14 +76,9 @@ export default function JobTombstone() {
             />
             <DataLabelComponent
               label={t("objects.jobs.fields.vehicle")}
-              content={
-                <View>
-                  <Text>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
-                    job.v_model_desc || ""
-                  }`}</Text>
-                  <Text>{job.v_vin}</Text>
-                </View>
-              }
+              content={`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
+                job.v_model_desc || ""
+              } - ${job.v_vin}`}
             />
           </View>
           <View style={localStyles.twoColumnCardColumn}>

components/jobs-list/job-list-item.jsx

@@ -58,9 +58,7 @@ function JobListItemComponent({ openImagePicker, item }) {
           style={[
             styles.glassCard,
             {
-              backgroundColor: theme.dark
-                ? "rgba(30,30,30,0.55)"
-                : "rgba(255,255,255,0.55)",
+              backgroundColor: theme.colors.primaryContainer,
               borderColor: theme.colors.outlineVariant,
             },
           ]}

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

components/theme-selector/theme-selector.tsx

@@ -0,0 +1,37 @@
+import { setTheme } from "@/redux/user/user.actions";
+import { selectTheme } from "@/redux/user/user.selectors";
+import React from "react";
+import { SegmentedButtons } from "react-native-paper";
+import { useDispatch, useSelector } from "react-redux";
+
+/**
+ * Example component showing how to use the useTheme hook
+ * and how to dispatch theme changes
+ */
+export const ThemeSelector = () => {
+  const dispatch = useDispatch();
+
+  const currentTheme = useSelector(selectTheme);
+
+  const handleThemeChange = (theme: "light" | "dark" | "system") => {
+    dispatch(setTheme(theme));
+  };
+
+  return (
+    <SegmentedButtons
+      value={currentTheme}
+      onValueChange={handleThemeChange}
+      buttons={[
+        {
+          value: "light",
+          label: "Light",
+        },
+        {
+          value: "dark",
+          label: "Dark",
+        },
+        { value: "system", label: "System" },
+      ]}
+    />
+  );
+};

components/upload-progress/upload-progress.jsx

@@ -1,5 +1,4 @@
 import { clearUploadError } from "@/redux/photos/photos.actions";
-import theme from "@/util/theme";
 import { formatBytes } from "@/util/uploadUtils";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, View } from "react-native";
@@ -92,7 +91,7 @@ const styles = StyleSheet.create({
     display: "flex",
     marginLeft: 12,
     marginRight: 12,
-    backgroundColor: theme.colors.elevation.level3,
+    //backgroundColor: theme.colors.elevation.level3,
     borderRadius: 20,
     paddingTop: 12,
     shadowColor: "#000",