sfgdsfgd

Stack.tsx

@@ -38,6 +38,7 @@ import {
 } from "./slices/accounts/accountsSlice";
 import { selectSite } from "./slices/site/siteSlice";
 import { useAppSelector } from "./store";
+import ThemeSelectionScreen from "./components/screens/settings/Appearance/ThemeSelectionScreen";
 
 const FeedStack = createNativeStackNavigator();
 
@@ -343,6 +344,13 @@ function CommunityStackScreen() {
           title: "Edit Account",
         }}
       />
+      <CommunityStack.Screen
+        name="ThemeSelection"
+        component={ThemeSelectionScreen}
+        options={{
+          title: "Theme",
+        }}
+      />
     </CommunityStack.Navigator>
   );
 }

Start.tsx

@@ -17,7 +17,7 @@ import { selectSettings } from "./slices/settings/settingsSlice";
 import { getUnreadCount } from "./slices/site/siteActions";
 import { useAppDispatch, useAppSelector } from "./store";
 import getFontScale from "./theme/fontSize";
-import { brownTheme } from "./theme/theme";
+import { darkTheme } from "./theme/theme";
 import { ThemeOptionsMap } from "./theme/themeOptions";
 
 const logError = (e, info) => {
@@ -40,7 +40,7 @@ function Start() {
   const dispatch = useAppDispatch();
   const accountsLoaded = useAppSelector(selectAccountsLoaded);
   const { theme, fontSize, isSystemTextSize } = useAppSelector(selectSettings);
-  const [selectedTheme, setSelectedTheme] = useState<any>(brownTheme);
+  const [selectedTheme, setSelectedTheme] = useState<any>(darkTheme);
 
   const appState = useRef(AppState.currentState);
 

components/screens/settings/Appearance/ThemeSelectionScreen.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Alert, LayoutAnimation, StyleSheet, Switch } from "react-native";
+import { getBuildNumber, getVersion } from "react-native-device-info";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import Slider from "@react-native-community/slider";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { Badge, Box, HStack, ScrollView, Text, useTheme } from "native-base";
+import { Section, TableView } from "react-native-tableview-simple";
+import { IconCheck } from "tabler-icons-react-native";
+import { deleteLog, sendLog } from "../../../../helpers/LogHelper";
+import { selectAccounts } from "../../../../slices/accounts/accountsSlice";
+import { setSetting } from "../../../../slices/settings/settingsActions";
+import { selectSettings } from "../../../../slices/settings/settingsSlice";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { ThemeOptionsArr } from "../../../../theme/themeOptions";
+import CCell from "../../../ui/table/CCell";
+import CSection from "../../../ui/table/CSection";
+import { HapticOptionsArr } from "../../../../types/haptics/hapticOptions";
+
+function ThemeSelectionScreen({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<any>;
+}) {
+  const accounts = useAppSelector(selectAccounts);
+
+  const dispatch = useAppDispatch();
+  const theme = useTheme();
+  const { showActionSheetWithOptions } = useActionSheet();
+
+  const {
+    theme: currentTheme,
+    fontSize,
+    isSystemTextSize,
+  } = useAppSelector(selectSettings);
+
+  const onChange = (key: string, value: any) => {
+    dispatch(setSetting({ [key]: value }));
+  };
+
+  return (
+    <ScrollView backgroundColor={theme.colors.app.bg} flex={1}>
+      <TableView style={styles.table}>
+        <Section header="App Theme" roundedCorners hideSurroundingSeparators>
+          {ThemeOptionsArr.map((themeName) => (
+            <CCell
+              cellStyle="RightDetail"
+              title={themeName}
+              subti
+              cellAccessoryView={
+                currentTheme === themeName && (
+                  <IconCheck color={theme.colors.app.accent} />
+                )
+              }
+              backgroundColor={theme.colors.app.fg}
+              titleTextColor={theme.colors.app.textPrimary}
+              rightDetailColor={theme.colors.app.textSecondary}
+            />
+          ))}
+        </Section>
+      </TableView>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  table: {
+    marginHorizontal: 15,
+  },
+});
+
+export default ThemeSelectionScreen;

components/screens/settings/SettingsIndexScreen.tsx

@@ -147,6 +147,15 @@ function SettingsIndexScreen({
         </Section>
 
         <Section header="APPEARANCE" roundedCorners hideSurroundingSeparators>
+          <CCell
+            cellStyle="Basic"
+            title="Themes"
+            accessory="DisclosureIndicator"
+            onPress={() => navigation.push("ThemeSelection")}
+            backgroundColor={theme.colors.app.fg}
+            titleTextColor={theme.colors.app.textPrimary}
+            rightDetailColor={theme.colors.app.textSecondary}
+          />
           <CCell
             cellStyle="RightDetail"
             title="Theme"