Merge pull request #16551 from huyenltnguyen/fix/console-theme-in-night-mode

fix(ui): Add logic to toggle console theme

common/app/routes/Challenges/Output.jsx

@@ -1,10 +1,12 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import NoSSR from 'react-no-ssr';
 import Codemirror from 'react-codemirror';
 
 import ns from './ns.json';
 import CodeMirrorSkeleton from './Code-Mirror-Skeleton.jsx';
+import { themeSelector } from '../../redux';
 
 const defaultOptions = {
   lineNumbers: false,
@@ -13,19 +15,23 @@ const defaultOptions = {
   readOnly: 'nocursor'
 };
 
+const mapStateToProps = state => ({ theme: themeSelector(state) });
+
 const propTypes = {
   defaultOutput: PropTypes.string,
-  output: PropTypes.string
+  output: PropTypes.string,
+  theme: PropTypes.string
 };
 
-export default class Output extends PureComponent {
+export class Output extends PureComponent {
   render() {
     const { output, defaultOutput } = this.props;
+    const cmTheme = this.props.theme === 'default' ? 'default' : 'dracula';
     return (
       <div className={ `${ns}-log` }>
         <NoSSR onSSR={ <CodeMirrorSkeleton content={ output } /> }>
           <Codemirror
-            options={ defaultOptions }
+            options={{ ...defaultOptions, theme: cmTheme }}
             value={ output || defaultOutput }
           />
         </NoSSR>
@@ -36,3 +42,5 @@ export default class Output extends PureComponent {
 
 Output.displayName = 'Output';
 Output.propTypes = propTypes;
+
+export default connect(mapStateToProps)(Output);

common/app/routes/Challenges/challenges.less

@@ -88,6 +88,10 @@
   }
 }
 
+.@{ns}-log {
+  border: 1px solid @brand-primary;
+}
+
 .night {
   .@{ns}-instructions blockquote {
     background-color: #242424;
@@ -118,9 +122,8 @@
       caret-color:#ABABAB;
     }
   }
-  .@{ns}-log .CodeMirror {
-    background-color: #282a36;
-    color: #f8f8f2;
+  .@{ns}-log {
+    border: none;
   }
   .refresh-icon {
     color: @icon-light-gray;