added theme change dropdown instead of toggle switch

src/config/locales/en-US.json

@@ -217,7 +217,7 @@
     "currency": "Currency",
     "language": "Language",
     "server": "Server",
-    "dark_theme": "Dark Theme",
+    "color_theme": "Color Theme",
     "push_notification": "Push Notification",
     "notification": {
       "follow": "Follow",
@@ -240,6 +240,11 @@
       "always_hide": "Always hide",
       "always_warn": "Always warn"
     },
+    "theme":{
+      "system": "System Defined",
+      "light": "Light",
+      "dark": "Dark"
+    },
     "feedback_success": "Email successfully open",
     "feedback_fail": "Email client could not open",
     "server_fail": "Server not available"

src/constants/options/theme.ts

@@ -0,0 +1,6 @@
+export default [
+    {key:'settings.theme.system', value: null},
+    {key:'settings.theme.light', value: false},
+    {key:'settings.theme.dark', value: true}
+  ];
+  

src/screens/settings/screen/settingsScreen.js

@@ -10,6 +10,7 @@ import { groomingServerName } from '../../../utils/settings';
 import LANGUAGE, { VALUE as LANGUAGE_VALUE } from '../../../constants/options/language';
 import CURRENCY, { VALUE as CURRENCY_VALUE } from '../../../constants/options/currency';
 import NSFW from '../../../constants/options/nsfw';
+import THEME_OPTIONS from '../../../constants/options/theme';
 
 // Components
 import { BasicHeader, SettingsItem, CollapsibleCard } from '../../../components';
@@ -21,6 +22,7 @@ const SettingsScreen = ({
   handleOnChange,
   intl,
   isDarkTheme,
+  themeSetting,
   isPinCodeOpen,
   isLoggedIn,
   isNotificationSettingsOpen,
@@ -118,13 +120,19 @@ const SettingsScreen = ({
           />
           <SettingsItem
             title={intl.formatMessage({
-              id: 'settings.dark_theme',
+              id: 'settings.color_theme',
             })}
-            type="toggle"
+            type="dropdown"
             actionType="theme"
-            isOn={isDarkTheme}
+            options={THEME_OPTIONS.map((item) =>
+              intl.formatMessage({
+                id: item.key,
+              }),
+            )}
+            selectedOptionIndex={THEME_OPTIONS.findIndex(item=>item.value===themeSetting)}
             handleOnChange={handleOnChange}
           />
+
           {!!isLoggedIn && (
             <SettingsItem
               title={intl.formatMessage({