1 files changed, 59 insertions, 18 deletions

diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx
index 095e5b622..986b0b2fd 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -55,28 +55,68 @@ export default class CustomThemeChooser extends React.Component {
         const elements = [];
         let colors = '';
         Constants.THEME_ELEMENTS.forEach((element, index) => {
-            elements.push(
-                <div
-                    className='col-sm-4 form-group'
-                    key={'custom-theme-key' + index}
-                >
-                    <label className='custom-label'>{element.uiName}</label>
+            if (element.id === 'codeTheme') {
+                const codeThemeOptions = [];
+
+                element.themes.forEach((codeTheme, codeThemeIndex) => {
+                    codeThemeOptions.push(
+                        <option
+                            key={'code-theme-key' + codeThemeIndex}
+                            value={codeTheme.id}
+                        >
+                            {codeTheme.uiName}
+                        </option>
+                    );
+                });
+
+                elements.push(
                     <div
-                        className='input-group color-picker'
-                        id={element.id}
+                        className='col-sm-4 form-group'
+                        key={'custom-theme-key' + index}
                     >
-                        <input
-                            className='form-control'
-                            type='text'
-                            defaultValue={theme[element.id]}
-                            onChange={this.onInputChange}
-                        />
-                        <span className='input-group-addon'><i></i></span>
+                        <label className='custom-label'>{element.uiName}</label>
+                        <div
+                            className='input-group dropdown'
+                            id={element.id}
+                        >
+                            <select
+                                className='form-control'
+                                type='text'
+                                defaultValue={theme[element.id]}
+                                onChange={this.onInputChange}
+                            >
+                                {codeThemeOptions}
+                            </select>
+                            <img
+                                src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+                            />
+                        </div>
                     </div>
-                </div>
-            );
+                );
+            } else {
+                elements.push(
+                    <div
+                        className='col-sm-4 form-group'
+                        key={'custom-theme-key' + index}
+                    >
+                        <label className='custom-label'>{element.uiName}</label>
+                        <div
+                            className='input-group color-picker'
+                            id={element.id}
+                        >
+                            <input
+                                className='form-control'
+                                type='text'
+                                defaultValue={theme[element.id]}
+                                onChange={this.onInputChange}
+                            />
+                            <span className='input-group-addon'><i></i></span>
+                        </div>
+                    </div>
+                );
 
-            colors += theme[element.id] + ',';
+                colors += theme[element.id] + ',';
+            }
         });
 
         colors += theme.codeTheme;
@@ -87,6 +127,7 @@ export default class CustomThemeChooser extends React.Component {
                     {'Copy and paste to share theme colors:'}
                 </label>
                 <input
+                    readOnly='true'
                     type='text'
                     className='form-control'
                     value={colors}