From e34d3af95cb99e5bdd04f2fba6f594db9064b1c9 Mon Sep 17 00:00:00 2001
From: Nouman Tahir <nouman.hawkdev@gmail.com>
Date: Sat, 16 Apr 2022 02:23:12 +0500
Subject: [PATCH] added theme change dropdown instead of toggle switch

---
 src/config/locales/en-US.json                 |  7 ++++++-
 src/constants/options/theme.ts                |  6 ++++++
 src/screens/settings/screen/settingsScreen.js | 14 +++++++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/constants/options/theme.ts

diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
index 95f89d32b..8e1b04100 100644
--- a/src/config/locales/en-US.json
+++ b/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"
diff --git a/src/constants/options/theme.ts b/src/constants/options/theme.ts
new file mode 100644
index 000000000..1cade55c0
--- /dev/null
+++ b/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}
+  ];
+  
\ No newline at end of file
diff --git a/src/screens/settings/screen/settingsScreen.js b/src/screens/settings/screen/settingsScreen.js
index f7b7df30a..be2fc826a 100644
--- a/src/screens/settings/screen/settingsScreen.js
+++ b/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({