diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 778c74c23a..55242ca7fb 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -22,6 +22,15 @@ export default class CustomThemeChooser extends React.Component {
         });
         $('.color-picker').on('changeColor', this.onPickerChange);
     }
+    componentDidUpdate() {
+        const theme = this.props.theme;
+        Constants.THEME_ELEMENTS.forEach((element) => {
+            if (theme.hasOwnProperty(element.id) && element.id !== 'codeTheme') {
+                $('#' + element.id).data('colorpicker').color.setColor(theme[element.id]);
+                $('#' + element.id).colorpicker('update');
+            }
+        });
+    }
     onPickerChange(e) {
         const theme = this.props.theme;
         theme[e.target.id] = e.color.toHex();
@@ -101,7 +110,7 @@ export default class CustomThemeChooser extends React.Component {
                             <select
                                 className='form-control'
                                 type='text'
-                                defaultValue={theme[element.id]}
+                                value={theme[element.id]}
                                 onChange={this.onInputChange}
                             >
                                 {codeThemeOptions}
@@ -134,7 +143,7 @@ export default class CustomThemeChooser extends React.Component {
                             <input
                                 className='form-control'
                                 type='text'
-                                defaultValue={theme[element.id]}
+                                value={theme[element.id]}
                                 onChange={this.onInputChange}
                             />
                             <span className='input-group-addon'><i></i></span>