added theme change dropdown instead of toggle switch

This commit is contained in:
Nouman Tahir 2022-04-16 02:23:12 +05:00
parent 061d9fb827
commit e34d3af95c
3 changed files with 23 additions and 4 deletions

View File

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

View File

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

View File

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