add light and dark codemirrir themes

client/modules/IDE/components/Editor.js

@@ -37,7 +37,7 @@ class Editor extends React.Component {
   componentDidMount() {
     this.beep = new Audio(beepUrl);
     this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
-      theme: 'p5-widget',
+      theme: `p5-${this.props.theme}`,
       value: this.props.file.content,
       lineNumbers: true,
       styleActiveLine: true,
@@ -106,6 +106,10 @@ class Editor extends React.Component {
         this._cm.setOption('mode', 'htmlmixed');
       }
     }
+
+    if (this.props.theme !== prevProps.theme) {
+      this._cm.setOption('theme', `p5-${this.props.theme}`);
+    }
   }
 
   componentWillUnmount() {
@@ -191,7 +195,8 @@ Editor.propTypes = {
   showEditorOptions: PropTypes.func.isRequired,
   closeEditorOptions: PropTypes.func.isRequired,
   showKeyboardShortcutModal: PropTypes.func.isRequired,
-  setUnsavedChanges: PropTypes.func.isRequired
+  setUnsavedChanges: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequired,
 };
 
 export default Editor;

client/modules/IDE/pages/IDEView.js

@@ -274,6 +274,7 @@ class IDEView extends React.Component {
                     closeEditorOptions={this.props.closeEditorOptions}
                     showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
                     setUnsavedChanges={this.props.setUnsavedChanges}
+                    theme={this.props.preferences.theme}
                   />
                   <Console
                     consoleEvent={this.props.ide.consoleEvent}

client/styles/components/_p5-dark-codemirror-theme.scss

@@ -0,0 +1,115 @@
+// brown: #6C4D13
+// black: #333
+// blue: #0F9DD7
+// pink: #D9328F
+// gray: #999999
+// dark blue: #318094
+// white: #fdfdfd
+
+//numbers
+//light gray: #f4f4f4
+//dark gray: #b5b5b5
+
+$p5-dark-brown: #6C4D13;
+$p5-dark-black: #333;
+$p5-dark-blue: #0F9DD7;
+$p5-dark-pink: #D9328F;
+$p5-dark-gray: #999999;
+$p5-dark-darkblue: #318094;
+$p5-dark-white: #FFFFFF;
+
+$p5-dark-lightgray: #f4f4f4;
+$p5-dark-darkgray: #b5b5b5;
+$p5-dark-selected: rgba(45, 123, 182, 25);
+$p5-dark-activeline: rgb(207, 207, 207);
+
+.cm-s-p5-dark {
+  background-color: $p5-dark-black;
+  color: $p5-dark-white;
+}
+
+.cm-s-p5-dark .cm-comment {
+  color: $p5-dark-gray;
+}
+
+.cm-s-p5-dark .cm-def {
+  color: $p5-dark-blue;
+}
+
+.cm-s-p5-dark .cm-string {
+  color: $p5-dark-blue;
+}
+
+.cm-s-p5-dark .cm-string-2 {
+  color: $p5-dark-pink;
+}
+
+.cm-s-p5-dark .cm-number {
+  color: $p5-dark-pink;
+}
+
+.cm-s-p5-dark .cm-keyword {
+  color: $p5-dark-brown;
+}
+
+.cm-s-p5-dark .cm-variable {
+  color: $p5-dark-blue;
+}
+
+.cm-s-p5-dark .cm-variable-2 {
+  color: $p5-dark-white;
+}
+
+.cm-s-p5-dark .cm-property {
+  color: $p5-dark-white;
+}
+
+.cm-s-p5-dark .cm-atom {
+  color: $p5-dark-pink;
+}
+
+.cm-s-p5-dark .cm-operator {
+  color: $p5-dark-white;
+}
+
+.cm-s-p5-dark .cm-linenumber {
+  color: $p5-dark-darkgray;
+}
+
+.cm-s-p5-dark .CodeMirror-selected {
+  background-color: $p5-dark-selected;
+}
+
+.cm-s-p5-dark .CodeMirror-activeline-background {
+  background-color: #F3F3F3;
+}
+
+.cm-s-p5-dark .CodeMirror-activeline-gutter {
+  background-color: #ECECEC;
+  border-right: 1px solid #ddd;
+}
+
+.cm-s-p5-dark .cm-error {
+  color: #f00;
+}
+
+.cm-s-p5-dark .CodeMirror-matchingbracket {
+  outline: 1px solid $p5-dark-darkgray;
+  color: black !important;
+}
+
+.cm-s-p5-dark .cm-qualifier {
+  color: $p5-dark-blue;
+}
+
+.cm-s-p5-dark .cm-tag {
+  color: $p5-dark-brown;
+}
+
+.cm-s-p5-dark .cm-builtin {
+  color: $p5-dark-blue;
+}
+
+.cm-s-p5-dark .cm-attribute {
+  color: $p5-dark-darkblue;
+}

client/styles/components/_p5-light-codemirror-theme.scss

@@ -23,93 +23,93 @@ $p5-light-darkgray: #b5b5b5;
 $p5-light-selected: rgba(45, 123, 182, 25);
 $p5-light-activeline: rgb(207, 207, 207);
 
-.cm-s-p5-widget {
+.cm-s-p5-light {
   background-color: $p5-light-white;
   color: $p5-light-black;
 }
 
-.cm-s-p5-widget .cm-comment {
+.cm-s-p5-light .cm-comment {
   color: $p5-light-gray;
 }
 
-.cm-s-p5-widget .cm-def {
+.cm-s-p5-light .cm-def {
   color: $p5-light-blue;
 }
 
-.cm-s-p5-widget .cm-string {
+.cm-s-p5-light .cm-string {
   color: $p5-light-blue;
 }
 
-.cm-s-p5-widget .cm-string-2 {
+.cm-s-p5-light .cm-string-2 {
   color: $p5-light-pink;
 }
 
-.cm-s-p5-widget .cm-number {
+.cm-s-p5-light .cm-number {
   color: $p5-light-pink;
 }
 
-.cm-s-p5-widget .cm-keyword {
+.cm-s-p5-light .cm-keyword {
   color: $p5-light-brown;
 }
 
-.cm-s-p5-widget .cm-variable {
+.cm-s-p5-light .cm-variable {
   color: $p5-light-blue;
 }
 
-.cm-s-p5-widget .cm-variable-2 {
+.cm-s-p5-light .cm-variable-2 {
   color: $p5-light-black;
 }
 
-.cm-s-p5-widget .cm-property {
+.cm-s-p5-light .cm-property {
   color: $p5-light-black;
 }
 
-.cm-s-p5-widget .cm-atom {
+.cm-s-p5-light .cm-atom {
   color: $p5-light-pink;
 }
 
-.cm-s-p5-widget .cm-operator {
+.cm-s-p5-light .cm-operator {
   color: $p5-light-black;
 }
 
-.cm-s-p5-widget .cm-linenumber {
+.cm-s-p5-light .cm-linenumber {
   color: $p5-light-darkgray;
 }
 
-.cm-s-p5-widget .CodeMirror-selected {
+.cm-s-p5-light .CodeMirror-selected {
   background-color: $p5-light-selected;
 }
 
-.cm-s-p5-widget .CodeMirror-activeline-background {
+.cm-s-p5-light .CodeMirror-activeline-background {
   background-color: #F3F3F3;
 }
 
-.cm-s-p5-widget .CodeMirror-activeline-gutter {
+.cm-s-p5-light .CodeMirror-activeline-gutter {
   background-color: #ECECEC;
   border-right: 1px solid #ddd;
 }
 
-.cm-s-p5-widget .cm-error {
+.cm-s-p5-light .cm-error {
   color: #f00;
 }
 
-.cm-s-p5-widget .CodeMirror-matchingbracket {
+.cm-s-p5-light .CodeMirror-matchingbracket {
   outline: 1px solid $p5-light-darkgray;
   color: black !important;
 }
 
-.cm-s-p5-widget .cm-qualifier {
+.cm-s-p5-light .cm-qualifier {
   color: $p5-light-blue;
 }
 
-.cm-s-p5-widget .cm-tag {
+.cm-s-p5-light .cm-tag {
   color: $p5-light-brown;
 }
 
-.cm-s-p5-widget .cm-builtin {
+.cm-s-p5-light .cm-builtin {
   color: $p5-light-blue;
 }
 
-.cm-s-p5-widget .cm-attribute {
+.cm-s-p5-light .cm-attribute {
   color: $p5-light-darkblue;
 }

client/styles/main.scss

@@ -11,7 +11,8 @@
 @import 'vendors/lint';
 @import 'vendors/dropzone';
 
-@import 'components/p5-widget-codemirror-theme';
+@import 'components/p5-light-codemirror-theme';
+@import 'components/p5-dark-codemirror-theme';
 @import 'components/editor';
 @import 'components/nav';
 @import 'components/toolbar';