diff --git a/react/features/mobile/navigation/screenOptions.js b/react/features/mobile/navigation/screenOptions.js
index 642881cb6..72ce58de8 100644
--- a/react/features/mobile/navigation/screenOptions.js
+++ b/react/features/mobile/navigation/screenOptions.js
@@ -87,13 +87,14 @@ export const drawerScreenOptions = {
  * Drawer content options.
  */
 export const drawerContentOptions = {
-    drawerActiveBackgroundColor: BaseTheme.palette.ui12,
+    drawerActiveBackgroundColor: BaseTheme.palette.uiBackground,
     drawerActiveTintColor: BaseTheme.palette.screen01Header,
+    drawerInactiveTintColor: BaseTheme.palette.text02,
     drawerLabelStyle: {
         marginLeft: BaseTheme.spacing[2]
     },
     drawerStyle: {
-        backgroundColor: BaseTheme.palette.ui12,
+        backgroundColor: BaseTheme.palette.uiBackground,
         maxWidth: 400,
         width: '75%'
     }
@@ -106,7 +107,7 @@ export const welcomeScreenOptions = {
     ...drawerScreenOptions,
     drawerIcon: ({ focused }) => (
         <Icon
-            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
+            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
             size = { 20 }
             src = { IconHome } />
     ),
@@ -122,7 +123,7 @@ export const settingsScreenOptions = {
     ...drawerScreenOptions,
     drawerIcon: ({ focused }) => (
         <Icon
-            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
+            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
             size = { 20 }
             src = { IconSettings } />
     ),
@@ -138,7 +139,7 @@ export const termsAndPrivacyScreenOptions = {
     ...drawerScreenOptions,
     drawerIcon: ({ focused }) => (
         <Icon
-            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
+            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
             size = { 20 }
             src = { IconInfo } />
     ),
@@ -154,7 +155,7 @@ export const helpScreenOptions = {
     ...drawerScreenOptions,
     drawerIcon: ({ focused }) => (
         <Icon
-            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.field01Disabled }
+            color = { focused ? BaseTheme.palette.screen01Header : BaseTheme.palette.icon02 }
             size = { 20 }
             src = { IconHelp } />
     ),
diff --git a/react/features/welcome/components/native/settings/components/FormSectionAccordion.js b/react/features/welcome/components/native/settings/components/FormSectionAccordion.js
index e4eeb4bfe..bc13d498c 100644
--- a/react/features/welcome/components/native/settings/components/FormSectionAccordion.js
+++ b/react/features/welcome/components/native/settings/components/FormSectionAccordion.js
@@ -5,6 +5,7 @@ import { List } from 'react-native-paper';
 
 import { translate } from '../../../../../base/i18n';
 import { Icon, IconArrowDown, IconArrowUp } from '../../../../../base/icons';
+import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
 
 import styles from './styles';
 
@@ -64,15 +65,14 @@ function FormSectionAccordion({ accordion, children, expandable, label, style, t
                 accordion && <Icon
                     { ...props }
                     src = { expandSection ? IconArrowUp : IconArrowDown }
-                    style = { expandSection ? styles.sectionOpen : styles.sectionClose } /> }
+                    style = { styles.section } /> }
+            rippleColor = { BaseTheme.palette.uiBackground }
             style = { [
                 styles.formSectionTitle,
                 style
             ] }
             title = { t(label) }
-            titleStyle = {
-                expandSection || !expandable
-                    ? styles.formSectionTitleActive : styles.formSectionTitleInActive }>
+            titleStyle = { styles.formSectionTitleText }>
             { children }
         </List.Accordion>
     );
diff --git a/react/features/welcome/components/native/settings/components/SettingsView.js b/react/features/welcome/components/native/settings/components/SettingsView.js
index 03ac409b6..7235284e5 100644
--- a/react/features/welcome/components/native/settings/components/SettingsView.js
+++ b/react/features/welcome/components/native/settings/components/SettingsView.js
@@ -25,7 +25,11 @@ import { normalizeUserInputURL, isServerURLChangeEnabled } from '../../../../../
 
 import FormRow from './FormRow';
 import FormSectionAccordion from './FormSectionAccordion';
-import styles, { THUMB_COLOR } from './styles';
+import styles, {
+    DISABLED_TRACK_COLOR,
+    ENABLED_TRACK_COLOR,
+    THUMB_COLOR
+} from './styles';
 
 /**
  * Application information module.
@@ -184,6 +188,16 @@ class SettingsView extends AbstractSettingsView<Props, State> {
         } = this.state;
         const { palette } = this.props.theme;
 
+        const textInputTheme = {
+            colors: {
+                background: palette.ui01,
+                placeholder: palette.text01,
+                primary: palette.screen01Header,
+                underlineColor: 'transparent',
+                text: palette.text01
+            }
+        };
+
         return (
             <JitsiScreen
                 style = { styles.settingsViewContainer }>
@@ -201,12 +215,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             spellCheck = { false }
                             style = { styles.textInputContainer }
                             textContentType = { 'name' } // iOS only
-                            theme = {{
-                                colors: {
-                                    primary: palette.screen01Header,
-                                    underlineColor: 'transparent'
-                                }
-                            }}
+                            theme = { textInputTheme }
                             value = { displayName } />
                         <Divider style = { styles.fieldSeparator } />
                         <TextInput
@@ -220,12 +229,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             spellCheck = { false }
                             style = { styles.textInputContainer }
                             textContentType = { 'emailAddress' } // iOS only
-                            theme = {{
-                                colors: {
-                                    primary: palette.screen01Header,
-                                    underlineColor: 'transparent'
-                                }
-                            }}
+                            theme = { textInputTheme }
                             value = { email } />
                     </FormSectionAccordion>
                     <FormSectionAccordion
@@ -245,12 +249,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             spellCheck = { false }
                             style = { styles.textInputContainer }
                             textContentType = { 'URL' } // iOS only
-                            theme = {{
-                                colors: {
-                                    primary: palette.screen01Header,
-                                    underlineColor: 'transparent'
-                                }
-                            }}
+                            theme = { textInputTheme }
                             value = { serverURL } />
                         <Divider style = { styles.fieldSeparator } />
                         <FormRow
@@ -258,7 +257,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             <Switch
                                 onValueChange = { this._onStartAudioMutedChange }
                                 thumbColor = { THUMB_COLOR }
-                                trackColor = {{ true: palette.screen01Header }}
+                                trackColor = {{
+                                    false: DISABLED_TRACK_COLOR,
+                                    true: ENABLED_TRACK_COLOR
+                                }}
                                 value = { startWithAudioMuted } />
                         </FormRow>
                         <Divider style = { styles.fieldSeparator } />
@@ -266,7 +268,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             <Switch
                                 onValueChange = { this._onStartVideoMutedChange }
                                 thumbColor = { THUMB_COLOR }
-                                trackColor = {{ true: palette.screen01Header }}
+                                trackColor = {{
+                                    false: DISABLED_TRACK_COLOR,
+                                    true: ENABLED_TRACK_COLOR
+                                }}
                                 value = { startWithVideoMuted } />
                         </FormRow>
                     </FormSectionAccordion>
@@ -276,7 +281,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                         label = 'settingsView.buildInfoSection'>
                         <FormRow
                             label = 'settingsView.version'>
-                            <Text>
+                            <Text style = { styles.text }>
                                 {`${AppInfo.version} build ${AppInfo.buildNumber}`}
                             </Text>
                         </FormRow>
@@ -292,7 +297,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                                     <Switch
                                         onValueChange = { this._onDisableCallIntegration }
                                         thumbColor = { THUMB_COLOR }
-                                        trackColor = {{ true: palette.screen01Header }}
+                                        trackColor = {{
+                                            false: DISABLED_TRACK_COLOR,
+                                            true: ENABLED_TRACK_COLOR
+                                        }}
                                         value = { disableCallIntegration } />
                                 </FormRow>
                                 <Divider style = { styles.fieldSeparator } />
@@ -303,7 +311,9 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                             <Switch
                                 onValueChange = { this._onDisableP2P }
                                 thumbColor = { THUMB_COLOR }
-                                trackColor = {{ true: palette.screen01Header }}
+                                trackColor = {{
+                                    false: DISABLED_TRACK_COLOR,
+                                    true: ENABLED_TRACK_COLOR }}
                                 value = { disableP2P } />
                         </FormRow>
                         <Divider style = { styles.fieldSeparator } />
@@ -314,7 +324,10 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                                 <Switch
                                     onValueChange = { this._onDisableCrashReporting }
                                     thumbColor = { THUMB_COLOR }
-                                    trackColor = {{ true: palette.screen01Header }}
+                                    trackColor = {{
+                                        false: DISABLED_TRACK_COLOR,
+                                        true: ENABLED_TRACK_COLOR
+                                    }}
                                     value = { disableCrashReporting } />
                             </FormRow>
                         )}
diff --git a/react/features/welcome/components/native/settings/components/styles.js b/react/features/welcome/components/native/settings/components/styles.js
index 98b3f884e..4a8fef0dd 100644
--- a/react/features/welcome/components/native/settings/components/styles.js
+++ b/react/features/welcome/components/native/settings/components/styles.js
@@ -1,6 +1,8 @@
-import BaseTheme from '../../../../../base/ui/components/BaseTheme';
+import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
 export const ANDROID_UNDERLINE_COLOR = 'transparent';
 export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus;
+export const ENABLED_TRACK_COLOR = BaseTheme.palette.lobbySwitch01Active;
+export const DISABLED_TRACK_COLOR = BaseTheme.palette.ui02;
 export const THUMB_COLOR = BaseTheme.palette.field02;
 
 const TEXT_SIZE = 14;
@@ -14,6 +16,7 @@ export default {
      * Style for screen container.
      */
     settingsViewContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
         flex: 1
     },
 
@@ -63,7 +66,7 @@ export default {
      */
     fieldSeparator: {
         borderBottomWidth: 1,
-        borderColor: 'rgba(0, 0, 0, 0.1)'
+        borderColor: BaseTheme.palette.border02
     },
 
     /**
@@ -82,26 +85,17 @@ export default {
      * Style for the form section separator titles.
      */
     formSectionTitle: {
-        backgroundColor: BaseTheme.palette.section01,
+        backgroundColor: BaseTheme.palette.ui02,
         paddingBottom: 0,
         paddingTop: 0
     },
 
-    formSectionTitleActive: {
-        color: BaseTheme.palette.screen01Header
+    formSectionTitleText: {
+        color: BaseTheme.palette.text01
     },
 
-    formSectionTitleInActive: {
-        color: BaseTheme.palette.section01Inactive
-    },
-
-    sectionClose: {
-        color: BaseTheme.palette.section01Inactive,
-        fontSize: 14
-    },
-
-    sectionOpen: {
-        color: BaseTheme.palette.screen01Header,
+    section: {
+        color: BaseTheme.palette.icon01,
         fontSize: 14
     },
 
@@ -109,7 +103,7 @@ export default {
      * Global {@code Text} color for the components.
      */
     text: {
-        color: BaseTheme.palette.field01
+        color: BaseTheme.palette.text02
     },
 
     /**