diff --git a/react/features/base/dialog/components/native/styles.js b/react/features/base/dialog/components/native/styles.js
index 320f1a091..44fdf3c26 100644
--- a/react/features/base/dialog/components/native/styles.js
+++ b/react/features/base/dialog/components/native/styles.js
@@ -263,11 +263,12 @@ ColorSchemeRegistry.register('Dialog', {
     },
 
     text: {
-        ...brandedDialogText
+        ...brandedDialogText,
+        color: BaseTheme.palette.text01
     },
 
     topBorderContainer: {
-        borderTopColor: schemeColor('border'),
+        borderTopColor: BaseTheme.palette.dividerColor,
         borderTopWidth: 1
     }
 });
diff --git a/react/features/base/ui/Tokens.js b/react/features/base/ui/Tokens.js
index ad8b8726c..c66faaf27 100644
--- a/react/features/base/ui/Tokens.js
+++ b/react/features/base/ui/Tokens.js
@@ -36,6 +36,7 @@ export const colors = {
     surface12: '#AAAAAA',
     surface13: '#495258',
     surface14: '#555555',
+    surface15: '#474747',
 
     success04: '#189B55',
     success05: '#1EC26A',
@@ -69,6 +70,8 @@ export const colorMap = {
     ui05: 'surface06',
     ui12: 'surface11',
     ui13: 'surface14',
+    ui14: 'surface15',
+    ui15: 'surface12',
 
     // Primary buttons
     action01: 'primary05',
@@ -201,6 +204,9 @@ export const colorMap = {
     // Color for the section divider
     dividerColor: 'surface12',
 
+    // Color for indicator
+    indicatorColor: 'surface12',
+
     // Background for high-contrast input fields on hover
     field02Hover: 'primary09',
 
@@ -260,6 +266,9 @@ export const colorMap = {
     // Color for disabled tab
     tab01Disabled: 'disabled01',
 
+    // Color for enabled lobby mode switch
+    lobbySwitch01Active: 'success04',
+
     // Color for disabled video switch
     video01Disabled: 'disabled01',
 
diff --git a/react/features/chat/components/native/ChatInputBar.js b/react/features/chat/components/native/ChatInputBar.js
index c20baf996..370c21787 100644
--- a/react/features/chat/components/native/ChatInputBar.js
+++ b/react/features/chat/components/native/ChatInputBar.js
@@ -5,6 +5,7 @@ import { Platform, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { translate } from '../../../base/i18n';
 import { Icon, IconChatSend } from '../../../base/icons';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 import styles from './styles';
 
@@ -82,7 +83,9 @@ class ChatInputBar extends Component<Props, State> {
                     onFocus = { this._onFocused(true) }
                     onSubmitEditing = { this._onSubmit }
                     placeholder = { this.props.t('chat.fieldPlaceHolder') }
+                    placeholderTextColor = { BaseTheme.palette.text03 }
                     returnKeyType = 'send'
+                    selectionColor = { BaseTheme.palette.text03 }
                     style = { styles.inputField }
                     value = { this.state.message } />
                 {
diff --git a/react/features/chat/components/native/styles.js b/react/features/chat/components/native/styles.js
index 80e46d6d0..587f821cc 100644
--- a/react/features/chat/components/native/styles.js
+++ b/react/features/chat/components/native/styles.js
@@ -60,7 +60,7 @@ export default {
     },
 
     inputField: {
-        color: 'rgb(28, 32, 37)',
+        color: BaseTheme.palette.text01,
         flex: 1,
         height: 48
     },
@@ -95,7 +95,7 @@ export default {
     },
 
     sendButtonIcon: {
-        color: ColorPalette.darkGrey,
+        color: BaseTheme.palette.icon01,
         fontSize: 22
     },
 
@@ -124,6 +124,7 @@ export default {
     },
 
     chatContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
         flex: 1
     },
 
@@ -165,7 +166,7 @@ ColorSchemeRegistry.register('Chat', {
     },
 
     emptyComponentText: {
-        color: BaseTheme.palette.ui05,
+        color: BaseTheme.palette.text03,
         textAlign: 'center'
     },
 
diff --git a/react/features/invite/components/add-people-dialog/native/styles.js b/react/features/invite/components/add-people-dialog/native/styles.js
index 52da72c1f..1279bed00 100644
--- a/react/features/invite/components/add-people-dialog/native/styles.js
+++ b/react/features/invite/components/add-people-dialog/native/styles.js
@@ -11,6 +11,7 @@ export const ICON_SIZE = 15;
 export default {
 
     addPeopleContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
         flex: 1
     },
 
@@ -75,7 +76,7 @@ export default {
     },
 
     itemText: {
-        color: DARK_GREY,
+        color: BaseTheme.palette.text01,
         fontSize: 14,
         fontWeight: 'normal'
     },
@@ -104,14 +105,14 @@ export default {
     },
 
     selectedIcon: {
-        color: DARK_GREY,
+        color: BaseTheme.palette.icon01,
         fontSize: 20,
         marginRight: BoxModel.margin,
         padding: 2
     },
 
     separator: {
-        borderBottomColor: LIGHT_GREY,
+        borderBottomColor: BaseTheme.palette.dividerColor,
         borderBottomWidth: 1,
         marginLeft: 85
     },
@@ -146,7 +147,7 @@ export default {
     },
 
     unselectIcon: {
-        color: LIGHT_GREY,
+        color: BaseTheme.palette.ui01,
         fontSize: 16,
         left: AVATAR_SIZE / -3,
         position: 'relative',
diff --git a/react/features/invite/components/dial-in-summary/native/styles.js b/react/features/invite/components/dial-in-summary/native/styles.js
index 8fcd6aec6..9e30f66cd 100644
--- a/react/features/invite/components/dial-in-summary/native/styles.js
+++ b/react/features/invite/components/dial-in-summary/native/styles.js
@@ -1,10 +1,10 @@
 // @flow
 
-import { ColorPalette } from '../../../../base/styles';
+import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
-export const INDICATOR_COLOR = ColorPalette.lightGrey;
+export const INDICATOR_COLOR = BaseTheme.palette.indicatorColor;
 
-const WV_BACKGROUND = 'rgb(71, 71, 71)';
+const WV_BACKGROUND = BaseTheme.palette.ui14;
 
 export default {
 
@@ -15,7 +15,7 @@ export default {
 
     indicatorWrapper: {
         alignItems: 'center',
-        backgroundColor: ColorPalette.white,
+        backgroundColor: BaseTheme.palette.ui12,
         height: '100%',
         justifyContent: 'center'
     },
diff --git a/react/features/lobby/components/native/LobbyModeSwitch.js b/react/features/lobby/components/native/LobbyModeSwitch.js
index b59517564..86efd355c 100644
--- a/react/features/lobby/components/native/LobbyModeSwitch.js
+++ b/react/features/lobby/components/native/LobbyModeSwitch.js
@@ -6,11 +6,7 @@ import { Switch, View } from 'react-native';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
 
-import styles, {
-    ENABLED_THUMB_COLOR,
-    ENABLED_TRACK_COLOR,
-    DISABLED_THUMB_COLOR
-} from './styles';
+import styles, { ENABLED_TRACK_COLOR, THUMB_COLOR } from './styles';
 
 /**
  * The type of the React {@code Component} props of {@link LobbyModeSwitch}.
@@ -44,11 +40,7 @@ function LobbyModeSwitch(
             <Switch
                 onValueChange = { onToggleLobbyMode }
                 style = { styles.lobbySwitchIcon }
-                thumbColor = {
-                    lobbyEnabled
-                        ? ENABLED_THUMB_COLOR
-                        : DISABLED_THUMB_COLOR
-                }
+                thumbColor = { THUMB_COLOR }
                 trackColor = {{ true: ENABLED_TRACK_COLOR }}
                 value = { lobbyEnabled } />
         </View>
diff --git a/react/features/lobby/components/native/styles.js b/react/features/lobby/components/native/styles.js
index 2a41bc55d..f7b4e8423 100644
--- a/react/features/lobby/components/native/styles.js
+++ b/react/features/lobby/components/native/styles.js
@@ -4,16 +4,15 @@ import BaseTheme from '../../../base/ui/components/BaseTheme';
 
 const SECONDARY_COLOR = BaseTheme.palette.border04;
 
-export const ENABLED_THUMB_COLOR = BaseTheme.palette.action04;
-export const ENABLED_TRACK_COLOR = BaseTheme.palette.screen01Header;
-export const DISABLED_THUMB_COLOR = BaseTheme.palette.icon04;
+export const ENABLED_TRACK_COLOR = BaseTheme.palette.lobbySwitch01Active;
+export const THUMB_COLOR = BaseTheme.palette.field02;
 
 export default {
     button: {
         alignItems: 'center',
         borderRadius: 4,
-        marginVertical: 4,
-        paddingVertical: 8
+        marginVertical: BaseTheme.spacing[1],
+        paddingVertical: BaseTheme.spacing[2]
     },
 
     contentWrapper: {
@@ -33,7 +32,7 @@ export default {
         fontSize: 18,
         fontWeight: 'bold',
         margin: 'auto',
-        marginVertical: 24,
+        marginVertical: BaseTheme.spacing[3],
         textAlign: 'center'
     },
 
diff --git a/react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigationContainer.js b/react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigationContainer.js
index f8817fa43..7690c5131 100644
--- a/react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigationContainer.js
+++ b/react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigationContainer.js
@@ -8,6 +8,7 @@ import {
     getClientHeight,
     getClientWidth
 } from '../../../../../base/modal/components/functions.native';
+import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
 import { Chat } from '../../../../../chat';
 import { PollsPane } from '../../../../../polls/components';
 import { screen } from '../../../routes';
@@ -28,7 +29,10 @@ const ChatAndPollsNavigationContainer = () => {
                 width: clientWidth
             }}
             screenOptions = {{
-                ...chatTabBarOptions
+                ...chatTabBarOptions,
+                tabBarStyle: {
+                    backgroundColor: BaseTheme.palette.ui01
+                }
             }}>
             <ChatTab.Screen
                 component = { Chat }
diff --git a/react/features/mobile/navigation/screenOptions.js b/react/features/mobile/navigation/screenOptions.js
index 537956739..642881cb6 100644
--- a/react/features/mobile/navigation/screenOptions.js
+++ b/react/features/mobile/navigation/screenOptions.js
@@ -185,7 +185,7 @@ export const chatTabBarOptions = {
     tabBarLabelStyle: {
         fontSize: BaseTheme.typography.labelRegular.fontSize
     },
-    tabBarInactiveTintColor: BaseTheme.palette.field02Disabled,
+    tabBarInactiveTintColor: BaseTheme.palette.text01,
     tabBarIndicatorStyle: {
         backgroundColor: BaseTheme.palette.screen01Header
     }
diff --git a/react/features/polls/components/native/PollAnswer.js b/react/features/polls/components/native/PollAnswer.js
index ba0b076d5..b2ce5436a 100644
--- a/react/features/polls/components/native/PollAnswer.js
+++ b/react/features/polls/components/native/PollAnswer.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { Switch, Text, View } from 'react-native';
 import { Button } from 'react-native-paper';
 
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import { BUTTON_MODES } from '../../../chat/constants';
 import { isSubmitAnswerDisabled } from '../../functions';
 import AbstractPollAnswer from '../AbstractPollAnswer';
@@ -38,21 +39,26 @@ const PollAnswer = (props: AbstractProps) => {
                             /* eslint-disable react/jsx-no-bind */
                             onValueChange = { state => setCheckbox(index, state) }
                             value = { checkBoxStates[index] } />
-                        <Text>{answer.name}</Text>
+                        <Text style = { chatStyles.switchLabel }>{answer.name}</Text>
                     </View>
                 ))}
             </View>
             <View style = { chatStyles.buttonRow }>
                 <Button
-                    color = '#3D3D3D'
+                    color = { BaseTheme.palette.action02 }
                     mode = { BUTTON_MODES.CONTAINED }
                     onPress = { changingVote ? skipChangeVote : skipAnswer }
                     style = { chatStyles.pollCreateButton } >
                     {t('polls.answer.skip')}
                 </Button>
                 <Button
-                    color = '#17a0db'
+                    color = { BaseTheme.palette.screen01Header }
                     disabled = { isSubmitAnswerDisabled(checkBoxStates) }
+                    labelStyle = {
+                        isSubmitAnswerDisabled(checkBoxStates)
+                            ? chatStyles.pollSendDisabledLabel
+                            : chatStyles.pollSendLabel
+                    }
                     mode = { BUTTON_MODES.CONTAINED }
                     onPress = { submitAnswer }
                     style = { chatStyles.pollCreateButton } >
diff --git a/react/features/polls/components/native/PollCreate.js b/react/features/polls/components/native/PollCreate.js
index 6b37ebe3a..c073a0c48 100644
--- a/react/features/polls/components/native/PollCreate.js
+++ b/react/features/polls/components/native/PollCreate.js
@@ -5,6 +5,7 @@ import { View, TextInput, FlatList, TouchableOpacity } from 'react-native';
 import { Button } from 'react-native-paper';
 
 import { Icon, IconClose } from '../../../base/icons';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import { BUTTON_MODES } from '../../../chat/constants';
 import { CHAR_LIMIT } from '../../constants';
 import AbstractPollCreate from '../AbstractPollCreate';
@@ -12,6 +13,7 @@ import type { AbstractProps } from '../AbstractPollCreate';
 
 import { chatStyles, dialogStyles } from './styles';
 
+
 const PollCreate = (props: AbstractProps) => {
 
 
@@ -111,11 +113,14 @@ const PollCreate = (props: AbstractProps) => {
                     onChangeText = { text => setAnswer(index, text) }
                     onKeyPress = { ev => onAnswerKeyDown(index, ev) }
                     placeholder = { t('polls.create.answerPlaceholder', { index: index + 1 }) }
+                    placeholderTextColor = { BaseTheme.palette.text03 }
                     ref = { input => registerFieldRef(index, input) }
+                    selectionColor = { BaseTheme.palette.text03 }
                     style = { dialogStyles.field }
                     value = { answers[index] } />
 
-                {answers.length > 2
+                {
+                    answers.length > 2
                     && createIconButton(IconClose, () => removeAnswer(index))
                 }
             </View>
@@ -132,6 +137,8 @@ const PollCreate = (props: AbstractProps) => {
                     onChangeText = { setQuestion }
                     onSubmitEditing = { onQuestionKeyDown }
                     placeholder = { t('polls.create.questionPlaceholder') }
+                    placeholderTextColor = { BaseTheme.palette.text03 }
+                    selectionColor = { BaseTheme.palette.text03 }
                     style = { dialogStyles.question }
                     value = { question } />
                 <FlatList
@@ -143,7 +150,7 @@ const PollCreate = (props: AbstractProps) => {
                     renderItem = { renderListItem } />
                 <View style = { chatStyles.pollCreateButtonsContainer }>
                     <Button
-                        color = '#3D3D3D'
+                        color = { BaseTheme.palette.action02 }
                         mode = { BUTTON_MODES.CONTAINED }
                         onPress = { () => {
                             // adding and answer
@@ -156,7 +163,7 @@ const PollCreate = (props: AbstractProps) => {
                     <View
                         style = { chatStyles.buttonRow }>
                         <Button
-                            color = '#3D3D3D'
+                            color = { BaseTheme.palette.action02 }
                             mode = { BUTTON_MODES.CONTAINED }
                             onPress = { () => setCreateMode(false) }
                             style = { chatStyles.pollCreateButton } >
@@ -164,8 +171,13 @@ const PollCreate = (props: AbstractProps) => {
                         </Button>
 
                         <Button
-                            color = '#17a0db'
+                            color = { BaseTheme.palette.screen01Header }
                             disabled = { isSubmitDisabled }
+                            labelStyle = {
+                                isSubmitDisabled
+                                    ? chatStyles.pollSendDisabledLabel
+                                    : chatStyles.pollSendLabel
+                            }
                             mode = { BUTTON_MODES.CONTAINED }
                             onPress = { onSubmit }
                             style = { chatStyles.pollCreateButton } >
diff --git a/react/features/polls/components/native/PollResults.js b/react/features/polls/components/native/PollResults.js
index d29f91adb..188616f0b 100644
--- a/react/features/polls/components/native/PollResults.js
+++ b/react/features/polls/components/native/PollResults.js
@@ -65,7 +65,11 @@ const PollResults = (props: AbstractProps) => {
                     { voters && voterCount > 0
                     && <View style = { resultsStyles.voters }>
                         {voters.map(({ id, name: voterName }) =>
-                            <Text key = { id }>{ voterName }</Text>
+                            (<Text
+                                key = { id }
+                                style = { resultsStyles.voter }>
+                                { voterName }
+                            </Text>)
                         )}
                     </View>}
                 </View>
diff --git a/react/features/polls/components/native/PollsList.js b/react/features/polls/components/native/PollsList.js
index e26c6d43c..5863db74f 100644
--- a/react/features/polls/components/native/PollsList.js
+++ b/react/features/polls/components/native/PollsList.js
@@ -31,10 +31,14 @@ const PollsList = () => {
 
     return (
         <>
-            {listPolls.length === 0
+            {
+                listPolls.length === 0
             && <Text style = { chatStyles.noPollText } >
-                {t('polls.results.empty')}
-            </Text>}
+                {
+                    t('polls.results.empty')
+                }
+            </Text>
+            }
             <FlatList
                 data = { listPolls }
                 extraData = { listPolls }
diff --git a/react/features/polls/components/native/styles.js b/react/features/polls/components/native/styles.js
index 79c9cc3c4..23bc4abe0 100644
--- a/react/features/polls/components/native/styles.js
+++ b/react/features/polls/components/native/styles.js
@@ -1,7 +1,7 @@
 // @flow
 
 import { ColorPalette, createStyleSheet } from '../../../base/styles';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export const answerStyles = createStyleSheet({
     question: {
@@ -21,6 +21,7 @@ export const answerStyles = createStyleSheet({
 
 export const dialogStyles = createStyleSheet({
     question: {
+        color: BaseTheme.palette.text01,
         fontSize: 16,
         fontWeight: 'bold',
         marginVertical: 4
@@ -31,6 +32,7 @@ export const dialogStyles = createStyleSheet({
     },
 
     field: {
+        color: BaseTheme.palette.text01,
         borderBottomWidth: 1,
         borderColor: ColorPalette.blue,
         fontSize: 14,
@@ -85,6 +87,10 @@ export const resultsStyles = createStyleSheet({
         marginVertical: 4
     },
 
+    voter: {
+        color: BaseTheme.palette.text01
+    },
+
     answerContainer: {
         marginVertical: 2,
         maxWidth: '100%'
@@ -96,6 +102,7 @@ export const resultsStyles = createStyleSheet({
     },
 
     answer: {
+        color: BaseTheme.palette.text01,
         flexShrink: 1
     },
 
@@ -124,7 +131,7 @@ export const chatStyles = createStyleSheet({
 
     noPollText: {
         flex: 1,
-        color: BaseTheme.palette.ui05,
+        color: BaseTheme.palette.text03,
         textAlign: 'center',
         paddingTop: '8%'
     },
@@ -155,6 +162,14 @@ export const chatStyles = createStyleSheet({
         marginHorizontal: 8
     },
 
+    pollSendLabel: {
+        color: BaseTheme.palette.text01
+    },
+
+    pollSendDisabledLabel: {
+        color: BaseTheme.palette.text03
+    },
+
     buttonRow: {
         flexDirection: 'row'
     },
@@ -169,6 +184,11 @@ export const chatStyles = createStyleSheet({
         padding: 6
     },
 
+    switchLabel: {
+        color: BaseTheme.palette.text01,
+        marginLeft: BaseTheme.spacing[2]
+    },
+
     pollCreateAddButton: {
         margin: BaseTheme.spacing[2]
     },
@@ -189,6 +209,7 @@ export const chatStyles = createStyleSheet({
     },
 
     PollPaneContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
         flex: 1
     },
 
diff --git a/react/features/recording/components/LiveStream/native/StreamKeyForm.js b/react/features/recording/components/LiveStream/native/StreamKeyForm.js
index 792a87b1d..5fbea74df 100644
--- a/react/features/recording/components/LiveStream/native/StreamKeyForm.js
+++ b/react/features/recording/components/LiveStream/native/StreamKeyForm.js
@@ -69,6 +69,7 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
                     onChangeText = { this._onInputChange }
                     placeholder = { t('liveStreaming.enterStreamKey') }
                     placeholderTextColor = { PLACEHOLDER_COLOR }
+                    selectionColor = { PLACEHOLDER_COLOR }
                     style = { [
                         _dialogStyles.text,
                         styles.streamKeyInput
diff --git a/react/features/recording/components/LiveStream/native/styles.js b/react/features/recording/components/LiveStream/native/styles.js
index 605f012c4..22de44d5d 100644
--- a/react/features/recording/components/LiveStream/native/styles.js
+++ b/react/features/recording/components/LiveStream/native/styles.js
@@ -1,11 +1,7 @@
 // @flow
 
-import {
-    BoxModel,
-    ColorPalette,
-    createStyleSheet
-} from '../../../../base/styles';
-import BaseTheme from '../../../../base/ui/components/BaseTheme';
+import { BoxModel, createStyleSheet } from '../../../../base/styles';
+import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
 /**
  * Opacity of the TouchableHighlight.
@@ -15,12 +11,12 @@ export const ACTIVE_OPACITY = 0.3;
 /**
  * Color for the key input field placeholder.
  */
-export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
+export const PLACEHOLDER_COLOR = BaseTheme.palette.text03;
 
 /**
  * Underlay of the TouchableHighlight.
  */
-export const TOUCHABLE_UNDERLAY = ColorPalette.lightGrey;
+export const TOUCHABLE_UNDERLAY = BaseTheme.palette.action03Focus;
 
 /**
  * The styles of the React {@code Components} of LiveStream.
@@ -61,12 +57,13 @@ export default createStyleSheet({
      * Container for the live stream screen.
      */
     startLiveStreamContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
         justifyContent: 'center',
-        marginHorizontal: BaseTheme.spacing[2],
-        marginTop: BaseTheme.spacing[3]
+        paddingHorizontal: BaseTheme.spacing[2],
+        paddingTop: BaseTheme.spacing[3]
     },
 
     /**
@@ -81,8 +78,9 @@ export default createStyleSheet({
      */
     streamKeyInput: {
         alignSelf: 'stretch',
-        borderColor: ColorPalette.lightGrey,
+        borderColor: BaseTheme.palette.border02,
         borderBottomWidth: 1,
+        color: BaseTheme.palette.text01,
         fontSize: 14,
         height: 40,
         marginBottom: 5,
@@ -125,14 +123,14 @@ export default createStyleSheet({
      * Additional style for the selected item.
      */
     streamKeyPickerItemHighlight: {
-        backgroundColor: ColorPalette.darkGrey
+        backgroundColor: BaseTheme.palette.ui13
     },
 
     /**
      * Overall wrapper for the picker.
      */
     streamKeyPickerWrapper: {
-        borderColor: ColorPalette.lightGrey,
+        borderColor: BaseTheme.palette.dividerColor,
         borderRadius: 3,
         borderWidth: 1,
         flexDirection: 'column'
@@ -146,6 +144,7 @@ export default createStyleSheet({
     },
 
     text: {
+        color: BaseTheme.palette.text01,
         fontSize: 14,
         textAlign: 'left'
     },
@@ -154,6 +153,6 @@ export default createStyleSheet({
      * A different colored text to indicate information needing attention.
      */
     warningText: {
-        color: ColorPalette.Y200
+        color: BaseTheme.palette.warning02
     }
 });
diff --git a/react/features/recording/components/Recording/StartRecordingDialogContent.js b/react/features/recording/components/Recording/StartRecordingDialogContent.js
index a4e20686f..f28e5aecd 100644
--- a/react/features/recording/components/Recording/StartRecordingDialogContent.js
+++ b/react/features/recording/components/Recording/StartRecordingDialogContent.js
@@ -20,13 +20,13 @@ import {
     Text
 } from '../../../base/react';
 import { connect } from '../../../base/redux';
-import { ColorPalette, StyleType } from '../../../base/styles';
+import { StyleType } from '../../../base/styles';
 import { authorizeDropbox, updateDropboxToken } from '../../../dropbox';
 import { isVpaasMeeting } from '../../../jaas/functions';
 import { RECORDING_TYPES } from '../../constants';
 import { getRecordingDurationEstimation } from '../../functions';
 
-import { DROPBOX_LOGO, ICON_CLOUD, JITSI_LOGO } from './styles';
+import { DROPBOX_LOGO, ICON_CLOUD, JITSI_LOGO, TRACK_COLOR } from './styles';
 
 type Props = {
 
@@ -206,7 +206,7 @@ class StartRecordingDialogContent extends Component<Props> {
                     onValueChange
                         = { onSharingSettingChanged }
                     style = { styles.switch }
-                    trackColor = {{ false: ColorPalette.lightGrey }}
+                    trackColor = {{ false: TRACK_COLOR }}
                     value = { sharingSetting } />
             </Container>
         );
@@ -236,7 +236,7 @@ class StartRecordingDialogContent extends Component<Props> {
                         disabled = { isValidating }
                         onValueChange = { this._onRecordingServiceSwitchChange }
                         style = { styles.switch }
-                        trackColor = {{ false: ColorPalette.lightGrey }}
+                        trackColor = {{ false: TRACK_COLOR }}
                         value = { this.props.selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE } />
                 ) : null;
 
@@ -317,7 +317,7 @@ class StartRecordingDialogContent extends Component<Props> {
                     disabled = { isValidating }
                     onValueChange = { this._onDropboxSwitchChange }
                     style = { styles.switch }
-                    trackColor = {{ false: ColorPalette.lightGrey }}
+                    trackColor = {{ false: TRACK_COLOR }}
                     value = { this.props.selectedRecordingService
                         === RECORDING_TYPES.DROPBOX } />
             );
@@ -434,12 +434,20 @@ class StartRecordingDialogContent extends Component<Props> {
                     className = 'logged-in-panel'
                     style = { styles.loggedIn }>
                     <Container>
-                        <Text style = { styles.text }>
+                        <Text
+                            style = { [
+                                styles.text,
+                                styles.recordingText
+                            ] }>
                             { t('recording.loggedIn', { userName }) }
                         </Text>
                     </Container>
                     <Container>
-                        <Text style = { styles.text }>
+                        <Text
+                            style = { [
+                                styles.text,
+                                styles.recordingText
+                            ] }>
                             {
                                 t('recording.availableSpace', {
                                     spaceLeft,
diff --git a/react/features/recording/components/Recording/styles.native.js b/react/features/recording/components/Recording/styles.native.js
index 2e99cfff0..b40657c41 100644
--- a/react/features/recording/components/Recording/styles.native.js
+++ b/react/features/recording/components/Recording/styles.native.js
@@ -2,11 +2,13 @@
 
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import { BoxModel } from '../../../base/styles';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 export const DROPBOX_LOGO = require('../../../../../images/dropboxLogo_square.png');
 export const ICON_CLOUD = require('../../../../../images/icon-cloud.png');
 export const JITSI_LOGO = require('../../../../../images/jitsiLogo_square.png');
+export const TRACK_COLOR = BaseTheme.palette.ui15;
+
 
 // XXX The "standard" {@code BoxModel.padding} has been deemed insufficient in
 // the special case(s) of the recording feature below.
@@ -17,12 +19,13 @@ export default {
      * Container for the StartRecordingDialog screen.
      */
     startRecodingContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
         justifyContent: 'center',
-        marginHorizontal: BaseTheme.spacing[2],
-        marginTop: BaseTheme.spacing[3]
+        paddingHorizontal: BaseTheme.spacing[3],
+        paddingTop: BaseTheme.spacing[3]
     },
 
     /**
@@ -66,6 +69,10 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
         height: BaseTheme.spacing[4]
     },
 
+    recordingText: {
+        color: BaseTheme.palette.text01
+    },
+
     signButton: {
         backgroundColor: BaseTheme.palette.screen01Header,
         color: BaseTheme.palette.ui12,
diff --git a/react/features/recording/components/Recording/styles.web.js b/react/features/recording/components/Recording/styles.web.js
index 4a0d76ae1..f21d74844 100644
--- a/react/features/recording/components/Recording/styles.web.js
+++ b/react/features/recording/components/Recording/styles.web.js
@@ -1,5 +1,7 @@
 // XXX CSS is used on Web, JavaScript styles are use only for mobile. Export an
 // (empty) object so that styles[*] statements on Web don't trigger errors.
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+
 export default {};
 
 export const DROPBOX_LOGO = 'images/dropboxLogo_square.png';
@@ -7,3 +9,5 @@ export const DROPBOX_LOGO = 'images/dropboxLogo_square.png';
 export const ICON_CLOUD = 'images/icon-cloud.png';
 
 export const JITSI_LOGO = 'images/jitsiLogo_square.png';
+
+export const TRACK_COLOR = BaseTheme.palette.ui15;
diff --git a/react/features/security/components/security-dialog/native/SecurityDialog.js b/react/features/security/components/security-dialog/native/SecurityDialog.js
index a133294e8..75e77fe6b 100644
--- a/react/features/security/components/security-dialog/native/SecurityDialog.js
+++ b/react/features/security/components/security-dialog/native/SecurityDialog.js
@@ -186,7 +186,7 @@ class SecurityDialog extends PureComponent<Props, State> {
         return (
             <View style = { styles.lobbyModeContainer }>
                 <View style = { styles.lobbyModeContent } >
-                    <Text>
+                    <Text style = { styles.lobbyModeText }>
                         { t('lobby.enableDialogText') }
                     </Text>
                     <View style = { styles.lobbyModeSection }>
@@ -229,7 +229,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                 <>
                     <TouchableRipple
                         onPress = { this._onCancel }
-                        rippleColor = { BaseTheme.palette.field02 } >
+                        rippleColor = { BaseTheme.palette.ui01 } >
                         <Text style = { styles.passwordSetupButton }>
                             { t('dialog.Remove') }
                         </Text>
@@ -238,7 +238,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                         _password
                         && <TouchableRipple
                             onPress = { this._onCopy }
-                            rippleColor = { BaseTheme.palette.field02 } >
+                            rippleColor = { BaseTheme.palette.ui01 } >
                             <Text style = { styles.passwordSetupButton }>
                                 { t('dialog.copy') }
                             </Text>
@@ -251,14 +251,14 @@ class SecurityDialog extends PureComponent<Props, State> {
                 <>
                     <TouchableRipple
                         onPress = { this._onCancel }
-                        rippleColor = { BaseTheme.palette.field02 } >
+                        rippleColor = { BaseTheme.palette.ui01 } >
                         <Text style = { styles.passwordSetupButton }>
                             { t('dialog.Cancel') }
                         </Text>
                     </TouchableRipple>
                     <TouchableRipple
                         onPress = { this._onSubmit }
-                        rippleColor = { BaseTheme.palette.field02 } >
+                        rippleColor = { BaseTheme.palette.ui01 } >
                         <Text style = { styles.passwordSetupButton }>
                             { t('dialog.add') }
                         </Text>
@@ -270,7 +270,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                 <TouchableRipple
                     disabled = { !_isModerator }
                     onPress = { this._onAddPassword }
-                    rippleColor = { BaseTheme.palette.field02 } >
+                    rippleColor = { BaseTheme.palette.ui01 } >
                     <Text style = { styles.passwordSetupButton }>
                         { t('info.addPassword') }
                     </Text>
@@ -287,7 +287,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                         </Text>
                         <TouchableRipple
                             onPress = { this._onCancel }
-                            rippleColor = { BaseTheme.palette.field02 } >
+                            rippleColor = { BaseTheme.palette.ui01 } >
                             <Text style = { styles.passwordSetupButton }>
                                 { t('dialog.Remove') }
                             </Text>
@@ -303,7 +303,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                         <TouchableRipple
                             disabled = { !_isModerator }
                             onPress = { this._onAddPassword }
-                            rippleColor = { BaseTheme.palette.field02 } >
+                            rippleColor = { BaseTheme.palette.ui01 } >
                             <Text style = { styles.passwordSetupButton }>
                                 { t('info.addPassword') }
                             </Text>
@@ -316,7 +316,7 @@ class SecurityDialog extends PureComponent<Props, State> {
         return (
             <View
                 style = { styles.passwordContainer } >
-                <Text>
+                <Text style = { styles.passwordContainerText }>
                     { t('security.about') }
                 </Text>
                 <View
@@ -370,7 +370,7 @@ class SecurityDialog extends PureComponent<Props, State> {
                         onChangeText = { this._onChangeText }
                         placeholder = { t('lobby.passwordField') }
                         placeholderTextColor = { BaseTheme.palette.text03 }
-                        selectionColor = { BaseTheme.palette.action03Active }
+                        selectionColor = { BaseTheme.palette.text03 }
                         style = { styles.passwordInput }
                         underlineColorAndroid = { FIELD_UNDERLINE }
                         value = { passwordInputValue }
diff --git a/react/features/security/components/security-dialog/native/styles.js b/react/features/security/components/security-dialog/native/styles.js
index f09a45b82..59c1134c5 100644
--- a/react/features/security/components/security-dialog/native/styles.js
+++ b/react/features/security/components/security-dialog/native/styles.js
@@ -8,8 +8,8 @@ import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 export default {
 
     securityDialogContainer: {
-        flex: 1,
-        marginTop: BaseTheme.spacing[4]
+        backgroundColor: BaseTheme.palette.ui01,
+        flex: 1
     },
 
     headerCloseButton: {
@@ -18,7 +18,8 @@ export default {
 
     lobbyModeContainer: {
         borderBottomColor: BaseTheme.palette.border01,
-        borderBottomWidth: 1
+        borderBottomWidth: 1,
+        marginTop: BaseTheme.spacing[4]
     },
 
     lobbyModeContent: {
@@ -26,7 +27,12 @@ export default {
         marginBottom: BaseTheme.spacing[4]
     },
 
+    lobbyModeText: {
+        color: BaseTheme.palette.text01
+    },
+
     lobbyModeLabel: {
+        color: BaseTheme.palette.text01,
         fontWeight: 'bold',
         marginTop: BaseTheme.spacing[2]
     },
@@ -43,6 +49,10 @@ export default {
         marginTop: BaseTheme.spacing[4]
     },
 
+    passwordContainerText: {
+        color: BaseTheme.palette.text01
+    },
+
     passwordContainerControls: {
         alignItems: 'center',
         flexDirection: 'row',
@@ -56,17 +66,19 @@ export default {
     },
 
     savedPasswordLabel: {
+        color: BaseTheme.palette.text01,
         fontWeight: 'bold'
     },
 
     savedPassword: {
-        color: BaseTheme.palette.text06
+        color: BaseTheme.palette.text01
     },
 
     passwordInput: {
         borderColor: BaseTheme.palette.action03Active,
         borderRadius: BaseTheme.spacing[1],
         borderWidth: 2,
+        color: BaseTheme.palette.text01,
         height: BaseTheme.spacing[6],
         marginTop: BaseTheme.spacing[2],
         paddingLeft: BaseTheme.spacing[1],
@@ -87,12 +99,12 @@ export default {
     },
 
     passwordSetRemotelyText: {
-        color: BaseTheme.palette.text06,
+        color: BaseTheme.palette.text01,
         marginTop: 22
     },
 
     passwordSetRemotelyTextDisabled: {
-        color: BaseTheme.palette.text03,
+        color: BaseTheme.palette.text02,
         marginTop: 22
     }
 };
diff --git a/react/features/speaker-stats/components/native/styles.js b/react/features/speaker-stats/components/native/styles.js
index 8fc937707..563c7949a 100644
--- a/react/features/speaker-stats/components/native/styles.js
+++ b/react/features/speaker-stats/components/native/styles.js
@@ -6,7 +6,7 @@ export default {
         flex: 1,
         height: 'auto',
         paddingHorizontal: BaseTheme.spacing[3],
-        backgroundColor: BaseTheme.palette.ui02
+        backgroundColor: BaseTheme.palette.ui01
     },
     speakerStatsItemContainer: {
         flexDirection: 'row',