fix(challenges): Add logic to toggle editor theme

Closes #16284

common/app/routes/Challenges/Output.jsx

@@ -10,8 +10,7 @@ const defaultOptions = {
   lineNumbers: false,
   lineWrapping: true,
   mode: 'javascript',
-  readOnly: 'nocursor',
-  theme: 'monokai'
+  readOnly: 'nocursor'
 };
 
 const propTypes = {

common/app/routes/Challenges/challenges.less

@@ -117,6 +117,10 @@
       caret-color:#ABABAB;
     }
   }
+  .@{ns}-log .CodeMirror {
+    background-color: #282a36;
+    color: #f8f8f2;
+  }
   .refresh-icon {
     color: @icon-light-gray;
   }

common/app/routes/Challenges/views/Modern/Editor.jsx

@@ -15,6 +15,8 @@ import {
   challengeMetaSelector
 } from '../../redux';
 
+import { themeSelector } from '../../../../redux';
+
 import { createFileSelector } from '../../../../files';
 
 const envProps = typeof window !== 'undefined' ? Object.keys(window) : [];
@@ -36,13 +38,16 @@ const options = {
 const mapStateToProps = createSelector(
   createFileSelector((_, { fileKey }) => fileKey || ''),
   challengeMetaSelector,
+  themeSelector,
   (
     file,
-    { mode }
+    { mode },
+    theme
   ) => ({
     content: file.contents || '// Happy Coding!',
     file: file,
-    mode: file.ext || mode || 'javascript'
+    mode: file.ext || mode || 'javascript',
+    theme
   })
 );
 
@@ -56,15 +61,18 @@ const propTypes = {
   executeChallenge: PropTypes.func.isRequired,
   fileKey: PropTypes.string,
   mode: PropTypes.string,
-  modernEditorUpdated: PropTypes.func.isRequired
+  modernEditorUpdated: PropTypes.func.isRequired,
+  theme: PropTypes.string
 };
 
 export class Editor extends PureComponent {
   createOptions = createSelector(
     state => state.executeChallenge,
     state => state.mode,
-    (executeChallenge, mode) => ({
+    state => state.cmTheme,
+    (executeChallenge, mode, cmTheme) => ({
       ...options,
+      theme: cmTheme,
       mode,
       // JSHint only works with javascript
       // we will need to switch to eslint to make this work with jsx
@@ -119,6 +127,7 @@ export class Editor extends PureComponent {
       fileKey,
       mode
     } = this.props;
+    const cmTheme = this.props.theme === 'default' ? 'default' : 'dracula';
     return (
       <div
         className={ `${ns}-editor` }
@@ -127,7 +136,7 @@ export class Editor extends PureComponent {
         <NoSSR onSSR={ <CodeMirrorSkeleton content={ content } /> }>
           <Codemirror
             onChange={ content => modernEditorUpdated(fileKey, content) }
-            options={ this.createOptions({ executeChallenge, mode }) }
+            options={ this.createOptions({ executeChallenge, mode, cmTheme }) }
             ref='editor'
             value={ content }
           />

common/app/routes/Challenges/views/classic/Editor.jsx

@@ -16,6 +16,8 @@ import {
   keySelector
 } from '../../redux';
 
+import { themeSelector } from '../../../../redux';
+
 import { filesSelector } from '../../../../files';
 
 const envProps = typeof window !== 'undefined' ? Object.keys(window) : [];
@@ -38,15 +40,18 @@ const mapStateToProps = createSelector(
   filesSelector,
   challengeMetaSelector,
   keySelector,
+  themeSelector,
   (
     files = {},
     { mode = 'javascript'},
-    key
+    key,
+    theme
   ) => ({
     content: files[key] && files[key].contents || '// Happy Coding!',
     file: files[key],
     fileKey: key,
-    mode
+    mode,
+    theme
   })
 );
 
@@ -60,15 +65,18 @@ const propTypes = {
   content: PropTypes.string,
   executeChallenge: PropTypes.func.isRequired,
   fileKey: PropTypes.string.isRequired,
-  mode: PropTypes.string
+  mode: PropTypes.string,
+  theme: PropTypes.string
 };
 
 export class Editor extends PureComponent {
   createOptions = createSelector(
     state => state.executeChallenge,
     state => state.mode,
-    (executeChallenge, mode) => ({
+    state => state.cmTheme,
+    (executeChallenge, mode, cmTheme) => ({
       ...options,
+      theme: cmTheme,
       mode,
       extraKeys: {
         Esc() {
@@ -120,6 +128,7 @@ export class Editor extends PureComponent {
       classicEditorUpdated,
       mode
     } = this.props;
+    const cmTheme = this.props.theme === 'default' ? 'default' : 'dracula';
     return (
       <div
         className={ `${ns}-editor` }
@@ -128,7 +137,7 @@ export class Editor extends PureComponent {
         <NoSSR onSSR={ <CodeMirrorSkeleton content={ content } /> }>
           <Codemirror
             onChange={ change => classicEditorUpdated(fileKey, change) }
-            options={ this.createOptions({ executeChallenge, mode }) }
+            options={ this.createOptions({ executeChallenge, mode, cmTheme }) }
             ref='editor'
             value={ content }
           />

common/app/routes/Challenges/views/classic/classic.less

@@ -16,26 +16,6 @@
   padding-right: 5px;
 }
 
-.night {
-  .@{ns}-editor .CodeMirror {
-    background-color:#242424;
-    color:#ABABAB;
-    &-gutters {
-      background-color:#242424;
-      color:#ABABAB;
-    }
-    .cm-bracket, .cm-tag {
-      color:#5CAFD6;
-    }
-    .cm-property, .cm-string {
-      color:#B5753A;
-    }
-    .cm-keyword, .cm-attribute {
-      color:#9BBBDC;
-    }
-  }
-}
-
 .@{ns}-editor {
   .max-element-height();
   width: 100%;

server/views/partials/react-stylesheets.jade

@@ -2,6 +2,7 @@ link(rel='stylesheet', type='text/css' href='/css/lato.css')
 link(rel='stylesheet', type='text/css' href='/css/ubuntu.css')
 link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')
 link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/codemirror.min.css')
+link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/dracula.min.css')
 link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/lint/lint.min.css')
 link(rel='stylesheet', href=rev('/css', 'main.css'))