diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 44b3f45448..095e5b6226 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -40,11 +40,12 @@ export default class CustomThemeChooser extends React.Component {
         const theme = {type: 'custom'};
         let index = 0;
         Constants.THEME_ELEMENTS.forEach((element) => {
-            if (index < colors.length) {
+            if (index < colors.length - 1) {
                 theme[element.id] = colors[index];
             }
             index++;
         });
+        theme.codeTheme = colors[colors.length - 1];
 
         this.props.updateTheme(theme);
     }
@@ -78,6 +79,8 @@ export default class CustomThemeChooser extends React.Component {
             colors += theme[element.id] + ',';
         });
 
+        colors += theme.codeTheme;
+
         const pasteBox = (
             <div className='col-sm-12'>
                 <label className='custom-label'>
diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx
index e94894a1d9..7b4b54e272 100644
--- a/web/react/components/user_settings/user_settings_appearance.jsx
+++ b/web/react/components/user_settings/user_settings_appearance.jsx
@@ -100,7 +100,9 @@ export default class UserSettingsAppearance extends React.Component {
         );
     }
     updateTheme(theme) {
-        theme.codeTheme = this.state.theme.codeTheme;
+        if (!theme.codeTheme) {
+            theme.codeTheme = this.state.theme.codeTheme;
+        }
         this.setState({theme});
         Utils.applyTheme(theme);
     }