diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js
index 76e6227bc..65a0ae1d0 100644
--- a/app/screens/channel/channel_base.js
+++ b/app/screens/channel/channel_base.js
@@ -20,6 +20,7 @@ import SafeAreaView from 'app/components/safe_area_view';
 import SettingsSidebar from 'app/components/sidebars/settings';
 
 import {preventDoubleTap} from 'app/utils/tap';
+import {setNavigatorStyles} from 'app/utils/theme';
 import PushNotifications from 'app/push_notifications';
 import EphemeralStore from 'app/store/ephemeral_store';
 import tracker from 'app/utils/time_tracker';
@@ -27,7 +28,6 @@ import telemetry from 'app/telemetry';
 import {
     goToScreen,
     showModalOverCurrentContext,
-    mergeNavigationOptions,
 } from 'app/actions/navigation';
 
 import LocalConfig from 'assets/config';
@@ -69,12 +69,7 @@ export default class ChannelBase extends PureComponent {
         this.postTextbox = React.createRef();
         this.keyboardTracker = React.createRef();
 
-        const options = {
-            layout: {
-                backgroundColor: props.theme.centerChannelBg,
-            },
-        };
-        mergeNavigationOptions(props.componentId, options);
+        setNavigatorStyles(props.componentId, props.theme);
 
         if (LocalConfig.EnableMobileClientUpgrade && !ClientUpgradeListener) {
             ClientUpgradeListener = require('app/components/client_upgrade_listener').default;
@@ -113,12 +108,9 @@ export default class ChannelBase extends PureComponent {
 
     componentWillReceiveProps(nextProps) {
         if (this.props.theme !== nextProps.theme) {
-            const options = {
-                layout: {
-                    backgroundColor: nextProps.theme.centerChannelBg,
-                },
-            };
-            mergeNavigationOptions(this.props.componentId, options);
+            EphemeralStore.allNavigationComponentIds.forEach((componentId) => {
+                setNavigatorStyles(componentId, nextProps.theme);
+            });
         }
 
         if (nextProps.currentTeamId && this.props.currentTeamId !== nextProps.currentTeamId) {
@@ -322,6 +314,12 @@ export default class ChannelBase extends PureComponent {
             </MainSidebar>
         );
     }
+
+    render() {
+        // Overriden in channel.android.js and channel.ios.js
+        // but defined here for channel_base.test.js
+        return; // eslint-disable-line no-useless-return
+    }
 }
 
 export const style = StyleSheet.create({
diff --git a/app/screens/channel/channel_base.test.js b/app/screens/channel/channel_base.test.js
new file mode 100644
index 000000000..7dc29d405
--- /dev/null
+++ b/app/screens/channel/channel_base.test.js
@@ -0,0 +1,77 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import EphemeralStore from 'app/store/ephemeral_store';
+import * as NavigationActions from 'app/actions/navigation';
+
+import ChannelBase from './channel_base';
+
+jest.mock('react-intl');
+
+describe('ChannelBase', () => {
+    const componentIds = ['component-1', 'component-2', 'component-3'];
+    const baseProps = {
+        actions: {
+            loadChannelsIfNecessary: jest.fn(),
+            loadProfilesAndTeamMembersForDMSidebar: jest.fn(),
+            selectDefaultTeam: jest.fn(),
+            selectInitialChannel: jest.fn(),
+            recordLoadTime: jest.fn(),
+            getChannelStats: jest.fn(),
+        },
+        componentId: componentIds[0],
+        theme: Preferences.THEMES.default,
+    };
+    const optionsForTheme = (theme) => {
+        return {
+            topBar: {
+                backButton: {
+                    color: theme.sidebarHeaderTextColor,
+                },
+                background: {
+                    color: theme.sidebarHeaderBg,
+                },
+                title: {
+                    color: theme.sidebarHeaderTextColor,
+                },
+                leftButtonColor: theme.sidebarHeaderTextColor,
+                rightButtonColor: theme.sidebarHeaderTextColor,
+            },
+            layout: {
+                backgroundColor: theme.centerChannelBg,
+            },
+        };
+    };
+
+    test('should call mergeNavigationOptions on all navigation components when theme changes', () => {
+        const mergeNavigationOptions = jest.spyOn(NavigationActions, 'mergeNavigationOptions');
+
+        componentIds.forEach((componentId) => {
+            EphemeralStore.addNavigationComponentId(componentId);
+        });
+
+        const wrapper = shallow(
+            <ChannelBase {...baseProps}/>,
+        );
+
+        const themeOptions = optionsForTheme(Preferences.THEMES.default);
+        expect(mergeNavigationOptions.mock.calls).toEqual([
+            [componentIds[0], themeOptions],
+        ]);
+        mergeNavigationOptions.mockClear();
+
+        wrapper.setProps({theme: Preferences.THEMES.mattermostDark});
+
+        const newThemeOptions = optionsForTheme(Preferences.THEMES.mattermostDark);
+        expect(mergeNavigationOptions.mock.calls).toEqual([
+            [componentIds[2], newThemeOptions],
+            [componentIds[1], newThemeOptions],
+            [componentIds[0], newThemeOptions],
+        ]);
+    });
+});
diff --git a/app/screens/settings/theme/theme.test.js b/app/screens/settings/theme/theme.test.js
index cbc658296..eea8a067b 100644
--- a/app/screens/settings/theme/theme.test.js
+++ b/app/screens/settings/theme/theme.test.js
@@ -14,116 +14,10 @@ import ThemeTile from './theme_tile';
 
 jest.mock('react-intl');
 
-const allowedThemes = [
-    {
-        type: 'Mattermost',
-        sidebarBg: '#145dbf',
-        sidebarText: '#ffffff',
-        sidebarUnreadText: '#ffffff',
-        sidebarTextHoverBg: '#4578bf',
-        sidebarTextActiveBorder: '#579eff',
-        sidebarTextActiveColor: '#ffffff',
-        sidebarHeaderBg: '#1153ab',
-        sidebarHeaderTextColor: '#ffffff',
-        onlineIndicator: '#06d6a0',
-        awayIndicator: '#ffbc42',
-        dndIndicator: '#f74343',
-        mentionBg: '#ffffff',
-        mentionColor: '#145dbf',
-        centerChannelBg: '#ffffff',
-        centerChannelColor: '#3d3c40',
-        newMessageSeparator: '#ff8800',
-        linkColor: '#2389d7',
-        buttonBg: '#166de0',
-        buttonColor: '#ffffff',
-        errorTextColor: '#fd5960',
-        mentionHighlightBg: '#ffe577',
-        mentionHighlightLink: '#166de0',
-        codeTheme: 'github',
-        key: 'default',
-    },
-    {
-        type: 'Organization',
-        sidebarBg: '#2071a7',
-        sidebarText: '#ffffff',
-        sidebarUnreadText: '#ffffff',
-        sidebarTextHoverBg: '#136197',
-        sidebarTextActiveBorder: '#7ab0d6',
-        sidebarTextActiveColor: '#ffffff',
-        sidebarHeaderBg: '#2f81b7',
-        sidebarHeaderTextColor: '#ffffff',
-        onlineIndicator: '#7dbe00',
-        awayIndicator: '#dcbd4e',
-        dndIndicator: '#ff6a6a',
-        mentionBg: '#fbfbfb',
-        mentionColor: '#2071f7',
-        centerChannelBg: '#f2f4f8',
-        centerChannelColor: '#333333',
-        newMessageSeparator: '#ff8800',
-        linkColor: '#2f81b7',
-        buttonBg: '#1dacfc',
-        buttonColor: '#ffffff',
-        errorTextColor: '#a94442',
-        mentionHighlightBg: '#f3e197',
-        mentionHighlightLink: '#2f81b7',
-        codeTheme: 'github',
-        key: 'organization',
-    },
-    {
-        type: 'Mattermost Dark',
-        sidebarBg: '#1b2c3e',
-        sidebarText: '#ffffff',
-        sidebarUnreadText: '#ffffff',
-        sidebarTextHoverBg: '#4a5664',
-        sidebarTextActiveBorder: '#66b9a7',
-        sidebarTextActiveColor: '#ffffff',
-        sidebarHeaderBg: '#1b2c3e',
-        sidebarHeaderTextColor: '#ffffff',
-        onlineIndicator: '#65dcc8',
-        awayIndicator: '#c1b966',
-        dndIndicator: '#e81023',
-        mentionBg: '#b74a4a',
-        mentionColor: '#ffffff',
-        centerChannelBg: '#2f3e4e',
-        centerChannelColor: '#dddddd',
-        newMessageSeparator: '#5de5da',
-        linkColor: '#a4ffeb',
-        buttonBg: '#4cbba4',
-        buttonColor: '#ffffff',
-        errorTextColor: '#ff6461',
-        mentionHighlightBg: '#984063',
-        mentionHighlightLink: '#a4ffeb',
-        codeTheme: 'solarized-dark',
-        key: 'mattermostDark',
-    },
-    {
-        type: 'Windows Dark',
-        sidebarBg: '#171717',
-        sidebarText: '#ffffff',
-        sidebarUnreadText: '#ffffff',
-        sidebarTextHoverBg: '#302e30',
-        sidebarTextActiveBorder: '#196caf',
-        sidebarTextActiveColor: '#ffffff',
-        sidebarHeaderBg: '#1f1f1f',
-        sidebarHeaderTextColor: '#ffffff',
-        onlineIndicator: '#399fff',
-        awayIndicator: '#c1b966',
-        dndIndicator: '#e81023',
-        mentionBg: '#0177e7',
-        mentionColor: '#ffffff',
-        centerChannelBg: '#1f1f1f',
-        centerChannelColor: '#dddddd',
-        newMessageSeparator: '#cc992d',
-        linkColor: '#0d93ff',
-        buttonBg: '#0177e7',
-        buttonColor: '#ffffff',
-        errorTextColor: '#ff6461',
-        mentionHighlightBg: '#784098',
-        mentionHighlightLink: '#a4ffeb',
-        codeTheme: 'monokai',
-        key: 'windows10',
-    },
-];
+const allowedThemes = Object.keys(Preferences.THEMES).map((key) => ({
+    key,
+    ...Preferences.THEMES[key],
+}));
 
 describe('Theme', () => {
     const baseProps = {