diff --git a/packages/learn/src/templates/Challenges/classic/Editor.js b/packages/learn/src/templates/Challenges/classic/Editor.js
index c70ccde5d9..c22cb69a55 100644
--- a/packages/learn/src/templates/Challenges/classic/Editor.js
+++ b/packages/learn/src/templates/Challenges/classic/Editor.js
@@ -5,6 +5,8 @@ import { connect } from 'react-redux';
 import MonacoEditor from 'react-monaco-editor';
 
 import { executeChallenge, updateFile } from '../redux';
+import { userSelector } from '../../../redux/app';
+import { createSelector } from 'reselect';
 
 const propTypes = {
   contents: PropTypes.string,
@@ -12,10 +14,14 @@ const propTypes = {
   executeChallenge: PropTypes.func.isRequired,
   ext: PropTypes.string,
   fileKey: PropTypes.string,
+  theme: PropTypes.string,
   updateFile: PropTypes.func.isRequired
 };
 
-const mapStateToProps = () => ({});
+const mapStateToProps = createSelector(
+  userSelector,
+  ({ theme = 'default' }) => ({ theme })
+);
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
@@ -93,16 +99,18 @@ class Editor extends PureComponent {
   }
 
   render() {
-    const { contents, ext } = this.props;
+    const { contents, ext, theme, fileKey } = this.props;
+    const editorTheme = theme === 'night' ? 'vs-dark' : 'vs';
     return (
       <div className='classic-editor editor'>
         <base href='/' />
         <MonacoEditor
           editorDidMount={::this.editorDidMount}
+          key={`${editorTheme}-${fileKey}`}
           language={modeMap[ext]}
           onChange={::this.onChange}
           options={this.options}
-          theme='vs'
+          theme={editorTheme}
           value={contents}
         />
       </div>