Add light theme to editor

embark-ui/src/components/FileExplorer.js

@@ -4,15 +4,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Treebeard, decorators} from 'react-treebeard';
 import classNames from 'classnames';
+import {DARK_THEME} from '../constants'
 
-const style = {
+const isDarkTheme= (theme) => theme === DARK_THEME;
+
+const style = (theme) => ({
   tree: {
     base: {
       height: '450px',
       overflowX: 'auto',
       listStyle: 'none',
-      backgroundColor: '#1C1C1C',
-      color: '#ffffff',
+      backgroundColor: isDarkTheme(theme) ? '#1C1C1C' : '#FFFFFF',
+      color: isDarkTheme(theme) ? '#FFFFFF' : '#000000',
       padding: '10px 0 0 10px',
       margin: 0,
     },
@@ -38,7 +41,7 @@ const style = {
         height: 7,
         width: 7,
         arrow: {
-          fill: '#FFFFFF',
+          fill: isDarkTheme(theme) ? '#FFFFFF' : '#000000',
           strokeWidth: 0
         }
       },
@@ -68,7 +71,7 @@ const style = {
       }
     }
   }
-};
+});
 
 
 const Header = ({style, node}) => {
@@ -212,7 +215,7 @@ class FileExplorer extends React.Component {
           data={this.data(this.props.files)}
           decorators={decorators}
           onToggle={this.onToggle.bind(this)}
-          style={style}
+          style={style(this.props.theme)}
         />
 
         <Label className="mb-0 pt-2 pr-2 pb-1 border-top text-right">
@@ -228,7 +231,8 @@ FileExplorer.propTypes = {
   files: PropTypes.array,
   fetchFile: PropTypes.func,
   showHiddenFiles: PropTypes.bool,
-  toggleShowHiddenFiles: PropTypes.func
+  toggleShowHiddenFiles: PropTypes.func,
+  theme: PropTypes.string
 };
 
 export default FileExplorer;

embark-ui/src/components/TextEditor.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import FontAwesomeIcon from 'react-fontawesome';
 import classNames from 'classnames';
 
+import {DARK_THEME} from '../constants';
 import './TextEditor.css';
 
 const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json'];
@@ -13,7 +14,7 @@ const GUTTER_GLYPH_MARGIN = 2;
 
 let editor;
 
-const initMonaco = (value) => {
+const initMonaco = (value, theme) => {
   let model;
   if (editor) {
     model = editor.getModel();
@@ -23,7 +24,6 @@ const initMonaco = (value) => {
     value,
     model
   });
-  monaco.editor.setTheme("vs-dark");
 };
 
 class TextEditor extends React.Component {
@@ -114,6 +114,11 @@ class TextEditor extends React.Component {
     this.setState({decorations: decorations});
   }
 
+  setTheme() {
+    const vsTheme = this.props.theme === DARK_THEME ? 'vs-dark' : 'vs';
+    monaco.editor.setTheme(vsTheme);
+  }
+
   componentDidUpdate(prevProps) {
     if (this.props.currentFile.content && this.props.currentFile.content !== prevProps.currentFile.content) {
       editor.setValue(this.props.currentFile.content);
@@ -124,6 +129,8 @@ class TextEditor extends React.Component {
     if (expectedDecorationsLength !== this.state.decorations.length || this.props.debuggerLine !== prevProps.debuggerLine) {
       this.updateDecorations();
     }
+
+    this.setTheme();
     this.updateLanguage();
     this.handleResize();
   }
@@ -132,14 +139,16 @@ class TextEditor extends React.Component {
     return (
       <ul className="list-inline m-0 p-2">
         {this.props.editorTabs.map(file => (
-          <li key={file.name} className={classNames("list-inline-item")}>
-            <a className={classNames({'text-body': file.name !== this.props.currentFile.name},
-              {'text-primary': file.name === this.props.currentFile.name}, "border-right", "p-2", "d-inline-block")}
-               href="#switch-tab" onClick={() => this.props.addEditorTabs(file)}>
+          <li key={file.name} className={classNames("m-1", "list-inline-item", "border-right")}>
+            <a
+              href="#switch-tab"
+              onClick={() => this.props.addEditorTabs(file)}
+              className={classNames('p-2', {'text-muted': !file.active},
+                                           {'text-primary': file.active})
+            }>
               {file.name}
-               <FontAwesomeIcon onClick={() => this.props.removeEditorTabs(file)} className="mx-1" name="close"/>
             </a>
-
+            <FontAwesomeIcon style={{cursor: 'pointer'}} onClick={() => this.props.removeEditorTabs(file)} className="mx-1" name="close"/>
           </li>
         ))}
       </ul>
@@ -164,7 +173,8 @@ TextEditor.propTypes = {
   debuggerLine: PropTypes.number,
   editorTabs: PropTypes.array,
   removeEditorTabs: PropTypes.func,
-  addEditorTabs: PropTypes.func
+  addEditorTabs: PropTypes.func,
+  theme: PropTypes.string
 };
 
 export default TextEditor;

embark-ui/src/containers/FileExplorerContainer.js

@@ -5,7 +5,7 @@ import {files as filesAction, file as fileAction} from "../actions";
 
 import FileExplorer from '../components/FileExplorer';
 import DataWrapper from "../components/DataWrapper";
-import {getFiles} from "../reducers/selectors";
+import {getFiles, getTheme} from "../reducers/selectors";
 
 class FileExplorerContainer extends Component {
   componentDidMount() {
@@ -14,15 +14,19 @@ class FileExplorerContainer extends Component {
 
   render() {
     return (
-        <DataWrapper shouldRender={this.props.files.length > 0} {...this.props} render={({files, fetchFile, showHiddenFiles, toggleShowHiddenFiles}) => (
-          <FileExplorer files={files} fetchFile={fetchFile} showHiddenFiles={showHiddenFiles} toggleShowHiddenFiles={toggleShowHiddenFiles} />
+        <DataWrapper shouldRender={this.props.files.length > 0} {...this.props} render={({files, fetchFile, showHiddenFiles, toggleShowHiddenFiles, theme}) => (
+          <FileExplorer files={files}
+                        fetchFile={fetchFile}
+                        showHiddenFiles={showHiddenFiles}
+                        toggleShowHiddenFiles={toggleShowHiddenFiles}
+                        theme={theme} />
         )} />
     );
   }
 }
 
 function mapStateToProps(state) {
-  return {files: getFiles(state)};
+  return {files: getFiles(state), theme: getTheme(state)};
 }
 
 FileExplorerContainer.propTypes = {
@@ -31,6 +35,7 @@ FileExplorerContainer.propTypes = {
   fetchFile: PropTypes.func,
   showHiddenFiles: PropTypes.bool,
   toggleShowHiddenFiles: PropTypes.func,
+  theme: PropTypes.string
 };
 
 export default connect(

embark-ui/src/containers/TextEditorContainer.js

@@ -9,7 +9,7 @@ import {
   toggleBreakpoint
 } from '../actions';
 
-import {getBreakpointsByFilename, getDebuggerLine, getEditorTabs} from '../reducers/selectors';
+import {getBreakpointsByFilename, getDebuggerLine, getEditorTabs, getTheme} from '../reducers/selectors';
 
 class TextEditorContainer extends React.Component {
   componentDidMount() {
@@ -26,7 +26,8 @@ class TextEditorContainer extends React.Component {
                   removeEditorTabs={this.props.removeEditorTabs}
                   addEditorTabs={this.props.addEditorTabs}
                   debuggerLine={this.props.debuggerLine}
-                  onFileContentChange={this.props.onFileContentChange} />
+                  onFileContentChange={this.props.onFileContentChange}
+                  theme={this.props.theme} />
     );
   }
 }
@@ -35,7 +36,8 @@ function mapStateToProps(state, props) {
   const breakpoints = getBreakpointsByFilename(state, props.currentFile.name);
   const editorTabs = getEditorTabs(state);
   const debuggerLine = getDebuggerLine(state);
-  return {breakpoints, editorTabs, debuggerLine};
+  const theme = getTheme(state);
+  return {breakpoints, editorTabs, debuggerLine, theme};
 }
 
 TextEditorContainer.propTypes = {
@@ -48,7 +50,8 @@ TextEditorContainer.propTypes = {
   removeEditorTabs: PropTypes.func,
   addEditorTabs: PropTypes.func,
   debuggerLine: PropTypes.number,
-  editorTabs: PropTypes.array
+  editorTabs: PropTypes.array,
+  theme: PropTypes.string
 };
 
 export default connect(