a lot of dark theme fixes

client/modules/IDE/pages/IDEView.js

@@ -27,7 +27,6 @@ import SplitPane from 'react-split-pane';
 import Overlay from '../../App/components/Overlay';
 import SketchList from '../components/SketchList';
 import About from '../components/About';
-import classNames from 'classnames';
 
 class IDEView extends React.Component {
   constructor(props) {
@@ -62,6 +61,8 @@ class IDEView extends React.Component {
     this.props.router.setRouteLeaveHook(this.props.route, () => this.warnIfUnsavedChanges());
 
     window.onbeforeunload = () => this.warnIfUnsavedChanges();
+
+    document.body.className = this.props.preferences.theme;
   }
 
   componentWillUpdate(nextProps) {
@@ -76,6 +77,10 @@ class IDEView extends React.Component {
     if (nextProps.params.project_id && !this.props.params.project_id) {
       this.props.getProject(nextProps.params.project_id);
     }
+
+    if (nextProps.preferences.theme !== this.props.preferences.theme) {
+      document.body.className = nextProps.preferences.theme;
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -157,164 +162,157 @@ class IDEView extends React.Component {
   }
 
   render() {
-    let ideClass = classNames({
-      ide: true,
-      light: this.props.preferences.theme === 'light',
-      dark: this.props.preferences.theme === 'dark',
-    });
     return (
-      <div className={ideClass}>
-        <div className="ide-content">
-          {this.props.toast.isVisible && <Toast />}
-          <Nav
-            user={this.props.user}
-            newProject={this.props.newProject}
-            saveProject={this.props.saveProject}
-            exportProjectAsZip={this.props.exportProjectAsZip}
-            cloneProject={this.props.cloneProject}
-            project={this.props.project}
-            logoutUser={this.props.logoutUser}
-            stopSketch={this.props.stopSketch}
-            showShareModal={this.props.showShareModal}
-          />
-          <Toolbar
-            className="Toolbar"
-            isPlaying={this.props.ide.isPlaying}
-            startSketch={this.props.startSketch}
-            stopSketch={this.props.stopSketch}
-            startTextOutput={this.props.startTextOutput}
-            stopTextOutput={this.props.stopTextOutput}
-            projectName={this.props.project.name}
-            setProjectName={this.props.setProjectName}
-            showEditProjectName={this.props.showEditProjectName}
-            hideEditProjectName={this.props.hideEditProjectName}
-            openPreferences={this.props.openPreferences}
-            preferencesIsVisible={this.props.ide.preferencesIsVisible}
-            setTextOutput={this.props.setTextOutput}
-            owner={this.props.project.owner}
-            project={this.props.project}
-          />
-          <Preferences
-            isVisible={this.props.ide.preferencesIsVisible}
-            closePreferences={this.props.closePreferences}
-            fontSize={this.props.preferences.fontSize}
-            indentationAmount={this.props.preferences.indentationAmount}
-            setIndentation={this.props.setIndentation}
-            indentWithSpace={this.props.indentWithSpace}
-            indentWithTab={this.props.indentWithTab}
-            isTabIndent={this.props.preferences.isTabIndent}
-            setFontSize={this.props.setFontSize}
-            autosave={this.props.preferences.autosave}
-            setAutosave={this.props.setAutosave}
-            lintWarning={this.props.preferences.lintWarning}
-            setLintWarning={this.props.setLintWarning}
-            textOutput={this.props.preferences.textOutput}
-            setTextOutput={this.props.setTextOutput}
-            theme={this.props.preferences.theme}
-            setTheme={this.props.setTheme}
-          />
-          <div className="editor-preview-container">
+      <div className="ide">
+        {this.props.toast.isVisible && <Toast />}
+        <Nav
+          user={this.props.user}
+          newProject={this.props.newProject}
+          saveProject={this.props.saveProject}
+          exportProjectAsZip={this.props.exportProjectAsZip}
+          cloneProject={this.props.cloneProject}
+          project={this.props.project}
+          logoutUser={this.props.logoutUser}
+          stopSketch={this.props.stopSketch}
+          showShareModal={this.props.showShareModal}
+        />
+        <Toolbar
+          className="Toolbar"
+          isPlaying={this.props.ide.isPlaying}
+          startSketch={this.props.startSketch}
+          stopSketch={this.props.stopSketch}
+          startTextOutput={this.props.startTextOutput}
+          stopTextOutput={this.props.stopTextOutput}
+          projectName={this.props.project.name}
+          setProjectName={this.props.setProjectName}
+          showEditProjectName={this.props.showEditProjectName}
+          hideEditProjectName={this.props.hideEditProjectName}
+          openPreferences={this.props.openPreferences}
+          preferencesIsVisible={this.props.ide.preferencesIsVisible}
+          setTextOutput={this.props.setTextOutput}
+          owner={this.props.project.owner}
+          project={this.props.project}
+        />
+        <Preferences
+          isVisible={this.props.ide.preferencesIsVisible}
+          closePreferences={this.props.closePreferences}
+          fontSize={this.props.preferences.fontSize}
+          indentationAmount={this.props.preferences.indentationAmount}
+          setIndentation={this.props.setIndentation}
+          indentWithSpace={this.props.indentWithSpace}
+          indentWithTab={this.props.indentWithTab}
+          isTabIndent={this.props.preferences.isTabIndent}
+          setFontSize={this.props.setFontSize}
+          autosave={this.props.preferences.autosave}
+          setAutosave={this.props.setAutosave}
+          lintWarning={this.props.preferences.lintWarning}
+          setLintWarning={this.props.setLintWarning}
+          textOutput={this.props.preferences.textOutput}
+          setTextOutput={this.props.setTextOutput}
+          theme={this.props.preferences.theme}
+          setTheme={this.props.setTheme}
+        />
+        <div className="editor-preview-container">
+          <SplitPane
+            split="vertical"
+            defaultSize={this.sidebarSize}
+            ref="sidebarPane"
+            onDragFinished={this._handleSidebarPaneOnDragFinished}
+            allowResize={this.props.ide.sidebarIsExpanded}
+            minSize={20}
+          >
+            <Sidebar
+              files={this.props.files}
+              setSelectedFile={this.props.setSelectedFile}
+              newFile={this.props.newFile}
+              isExpanded={this.props.ide.sidebarIsExpanded}
+              expandSidebar={this.props.expandSidebar}
+              collapseSidebar={this.props.collapseSidebar}
+              showFileOptions={this.props.showFileOptions}
+              hideFileOptions={this.props.hideFileOptions}
+              deleteFile={this.props.deleteFile}
+              showEditFileName={this.props.showEditFileName}
+              hideEditFileName={this.props.hideEditFileName}
+              updateFileName={this.props.updateFileName}
+              projectOptionsVisible={this.props.ide.projectOptionsVisible}
+              openProjectOptions={this.props.openProjectOptions}
+              closeProjectOptions={this.props.closeProjectOptions}
+              newFolder={this.props.newFolder}
+            />
             <SplitPane
               split="vertical"
-              defaultSize={this.sidebarSize}
-              ref="sidebarPane"
-              onDragFinished={this._handleSidebarPaneOnDragFinished}
-              allowResize={this.props.ide.sidebarIsExpanded}
-              minSize={20}
+              defaultSize={'50%'}
+              onChange={() => (this.refs.overlay.style.display = 'block')}
+              onDragFinished={() => (this.refs.overlay.style.display = 'none')}
             >
-              <Sidebar
-                files={this.props.files}
-                setSelectedFile={this.props.setSelectedFile}
-                newFile={this.props.newFile}
-                isExpanded={this.props.ide.sidebarIsExpanded}
-                expandSidebar={this.props.expandSidebar}
-                collapseSidebar={this.props.collapseSidebar}
-                showFileOptions={this.props.showFileOptions}
-                hideFileOptions={this.props.hideFileOptions}
-                deleteFile={this.props.deleteFile}
-                showEditFileName={this.props.showEditFileName}
-                hideEditFileName={this.props.hideEditFileName}
-                updateFileName={this.props.updateFileName}
-                projectOptionsVisible={this.props.ide.projectOptionsVisible}
-                openProjectOptions={this.props.openProjectOptions}
-                closeProjectOptions={this.props.closeProjectOptions}
-                newFolder={this.props.newFolder}
-              />
               <SplitPane
-                split="vertical"
-                defaultSize={'50%'}
-                onChange={() => (this.refs.overlay.style.display = 'block')}
-                onDragFinished={() => (this.refs.overlay.style.display = 'none')}
+                split="horizontal"
+                primary="second"
+                defaultSize={this.consoleSize}
+                minSize={29}
+                ref="consolePane"
+                onDragFinished={this._handleConsolePaneOnDragFinished}
+                allowResize={this.props.ide.consoleIsExpanded}
               >
-                <SplitPane
-                  split="horizontal"
-                  primary="second"
-                  defaultSize={this.consoleSize}
-                  minSize={29}
-                  ref="consolePane"
-                  onDragFinished={this._handleConsolePaneOnDragFinished}
-                  allowResize={this.props.ide.consoleIsExpanded}
-                >
-                  <Editor
-                    lintWarning={this.props.preferences.lintWarning}
-                    lintMessages={this.props.editorAccessibility.lintMessages}
-                    updateLineNumber={this.props.updateLineNumber}
-                    updateLintMessage={this.props.updateLintMessage}
-                    clearLintMessage={this.props.clearLintMessage}
-                    file={this.props.selectedFile}
-                    updateFileContent={this.props.updateFileContent}
-                    fontSize={this.props.preferences.fontSize}
-                    indentationAmount={this.props.preferences.indentationAmount}
-                    isTabIndent={this.props.preferences.isTabIndent}
-                    files={this.props.files}
-                    lintMessages={this.props.editorAccessibility.lintMessages}
-                    lineNumber={this.props.editorAccessibility.lineNumber}
-                    editorOptionsVisible={this.props.ide.editorOptionsVisible}
-                    showEditorOptions={this.props.showEditorOptions}
-                    closeEditorOptions={this.props.closeEditorOptions}
-                    showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
-                    setUnsavedChanges={this.props.setUnsavedChanges}
-                    theme={this.props.preferences.theme}
-                  />
-                  <Console
-                    consoleEvent={this.props.ide.consoleEvent}
-                    isPlaying={this.props.ide.isPlaying}
-                    isExpanded={this.props.ide.consoleIsExpanded}
-                    expandConsole={this.props.expandConsole}
-                    collapseConsole={this.props.collapseConsole}
-                  />
-                </SplitPane>
-                <div>
-                  <div className="preview-frame-overlay" ref="overlay">
-                  </div>
-                  <div>
-                  {(() => {
-                    if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
-                      return (
-                        <TextOutput />
-                      );
-                    }
-                    return '';
-                  })()}
-                  </div>
-                  <PreviewFrame
-                    htmlFile={this.props.htmlFile}
-                    jsFiles={this.props.jsFiles}
-                    cssFiles={this.props.cssFiles}
-                    files={this.props.files}
-                    content={this.props.selectedFile.content}
-                    head={
-                      <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
-                    }
-                    isPlaying={this.props.ide.isPlaying}
-                    isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
-                    textOutput={this.props.preferences.textOutput}
-                    dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-                  />
-                </div>
+                <Editor
+                  lintWarning={this.props.preferences.lintWarning}
+                  lintMessages={this.props.editorAccessibility.lintMessages}
+                  updateLineNumber={this.props.updateLineNumber}
+                  updateLintMessage={this.props.updateLintMessage}
+                  clearLintMessage={this.props.clearLintMessage}
+                  file={this.props.selectedFile}
+                  updateFileContent={this.props.updateFileContent}
+                  fontSize={this.props.preferences.fontSize}
+                  indentationAmount={this.props.preferences.indentationAmount}
+                  isTabIndent={this.props.preferences.isTabIndent}
+                  files={this.props.files}
+                  lintMessages={this.props.editorAccessibility.lintMessages}
+                  lineNumber={this.props.editorAccessibility.lineNumber}
+                  editorOptionsVisible={this.props.ide.editorOptionsVisible}
+                  showEditorOptions={this.props.showEditorOptions}
+                  closeEditorOptions={this.props.closeEditorOptions}
+                  showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
+                  setUnsavedChanges={this.props.setUnsavedChanges}
+                  theme={this.props.preferences.theme}
+                />
+                <Console
+                  consoleEvent={this.props.ide.consoleEvent}
+                  isPlaying={this.props.ide.isPlaying}
+                  isExpanded={this.props.ide.consoleIsExpanded}
+                  expandConsole={this.props.expandConsole}
+                  collapseConsole={this.props.collapseConsole}
+                />
               </SplitPane>
+              <div>
+                <div className="preview-frame-overlay" ref="overlay">
+                </div>
+                <div>
+                {(() => {
+                  if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
+                    return (
+                      <TextOutput />
+                    );
+                  }
+                  return '';
+                })()}
+                </div>
+                <PreviewFrame
+                  htmlFile={this.props.htmlFile}
+                  jsFiles={this.props.jsFiles}
+                  cssFiles={this.props.cssFiles}
+                  files={this.props.files}
+                  content={this.props.selectedFile.content}
+                  head={
+                    <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+                  }
+                  isPlaying={this.props.ide.isPlaying}
+                  isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
+                  textOutput={this.props.preferences.textOutput}
+                  dispatchConsoleEvent={this.props.dispatchConsoleEvent}
+                />
+              </div>
             </SplitPane>
-          </div>
+          </SplitPane>
         </div>
         {(() => {
           if (this.props.ide.modalIsVisible) {

client/styles/abstracts/_variables.scss

@@ -29,6 +29,8 @@ $themes: (
     console-background-color: #eee,
     console-header-background-color: #d6d6d6,
     ide-border-color: #f4f4f4,
+    editor-gutter-color: #f7f7f7,
+    file-selected-color: #f4f4f4,
   ),
   dark: (
     primary-text-color: $white,
@@ -54,6 +56,8 @@ $themes: (
     console-header-background-color: #3f3f3f,
     console-header-color: #b5b5b5,
     ide-border-color: #949494,
+    editor-gutter-color: #363636,
+    file-selected-color: #404040,
   )
 );
 

client/styles/base/_base.scss

@@ -39,6 +39,9 @@ input {
 	// border-radius: 2px;
 	border: 1px solid $input-border-color;
 	padding: #{10 / $base-font-size}rem;
+	@include themify() {
+		color: $primary-text-color;
+	}
 }
 
 input[type="submit"] {

client/styles/components/_console.scss

@@ -1,7 +1,10 @@
 .preview-console {
 	@include themify() {
 		background: getThemifyVariable('console-background-color');
+		border-color: getThemifyVariable('ide-border-color');
 	}
+	border-left: 1px solid;
+	border-right: 1px solid;
 	width: 100%;
 	height: 100%;
 	z-index: 1000;

client/styles/components/_editor.scss

@@ -60,11 +60,19 @@
     background-color: getThemifyVariable('modal-background-color');
     border: 1px solid getThemifyVariable('modal-border-color');
     box-shadow: 0 12px 12px getThemifyVariable('shadow-color');
+    color: getThemifyVariable('primary-text-color');
   }
   border-radius: 2px;
   font-family: 'Avenir Next', Montserrat, sans-serif;
 }
 
+.CodeMirror-gutters {
+  @include themify() {
+    background-color: getThemifyVariable('editor-gutter-color');
+    border-color: getThemifyVariable('ide-border-color');
+  }
+}
+
 .editor__options-button {
   @include themify() {
     @extend %icon;

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

@@ -10,16 +10,20 @@
 //light gray: #f4f4f4
 //dark gray: #b5b5b5
 
+$p5-dark-lightbrown: #A67F59;
 $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-gray: #A0A0A0;
+$p5-dark-lightblue: #00A1D3;
+$p5-dark-darkblue: #2D7BB6;
+$p5-dark-white: #FDFDFD;
+$p5-dark-orange: #EE9900;
+$p5-dark-lightgray: #E0D7D1;
+$p5-dark-darkgray: #666666;
 
-$p5-dark-lightgray: #f4f4f4;
-$p5-dark-darkgray: #b5b5b5;
+$p5-dark-gutter: #f4f4f4;
+$p5-dark-number: #b5b5b5;
 $p5-dark-selected: rgba(45, 123, 182, 25);
 $p5-dark-activeline: rgb(207, 207, 207);
 
@@ -33,15 +37,15 @@ $p5-dark-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-dark .cm-def {
-  color: $p5-dark-blue;
+  color: $p5-dark-darkblue;
 }
 
 .cm-s-p5-dark .cm-string {
-  color: $p5-dark-blue;
+  color: $p5-dark-lightblue;
 }
 
 .cm-s-p5-dark .cm-string-2 {
-  color: $p5-dark-pink;
+  color: $p5-dark-orange;
 }
 
 .cm-s-p5-dark .cm-number {
@@ -53,7 +57,7 @@ $p5-dark-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-dark .cm-variable {
-  color: $p5-dark-blue;
+  color: $p5-dark-lightblue;
 }
 
 .cm-s-p5-dark .cm-variable-2 {
@@ -69,11 +73,11 @@ $p5-dark-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-dark .cm-operator {
-  color: $p5-dark-white;
+  color: $p5-dark-lightbrown;
 }
 
 .cm-s-p5-dark .cm-linenumber {
-  color: $p5-dark-darkgray;
+  color: $p5-dark-number;
 }
 
 .cm-s-p5-dark .CodeMirror-selected {
@@ -81,12 +85,12 @@ $p5-dark-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-background {
-  background-color: #F3F3F3;
+  background-color: #404040;
 }
 
 .cm-s-p5-dark .CodeMirror-activeline-gutter {
-  background-color: #ECECEC;
-  border-right: 1px solid #ddd;
+  background-color: #454545;
+  border-right: 1px solid #949494;
 }
 
 .cm-s-p5-dark .cm-error {
@@ -99,17 +103,17 @@ $p5-dark-activeline: rgb(207, 207, 207);
 }
 
 .cm-s-p5-dark .cm-qualifier {
-  color: $p5-dark-blue;
+  color: $p5-dark-lightblue;
 }
 
 .cm-s-p5-dark .cm-tag {
-  color: $p5-dark-brown;
+  color: $p5-dark-pink;
 }
 
 .cm-s-p5-dark .cm-builtin {
-  color: $p5-dark-blue;
+  color: $p5-dark-lightblue;
 }
 
 .cm-s-p5-dark .cm-attribute {
-  color: $p5-dark-darkblue;
+  color: $p5-dark-lightblue;
 }

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

@@ -13,7 +13,6 @@
 $p5-light-lightbrown: #A67F59;
 $p5-light-brown: #704F21;
 $p5-light-black: #333;
-$p5-light-blue: #0F9DD7;
 $p5-light-pink: #D9328F;
 $p5-light-gray: #A0A0A0;
 $p5-light-lightblue: #00A1D3;

client/styles/components/_resizer.scss

@@ -1,10 +1,12 @@
 .Resizer {
+    @include themify() {
+        background: getThemifyVariable('ide-border-color');
+    }
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    background: $ide-border-color;
-    opacity: .2;
     z-index: 1;
+    opacity: 0.02;
     -moz-background-clip: padding;
     -webkit-background-clip: padding;
     background-clip: padding-box;
@@ -16,7 +18,7 @@
 // }
 
 .Resizer.horizontal {
-    height: 11px;
+    height: 10px;
     margin: -5px 0;
     border-top: 5px solid rgba(255, 255, 255, 0);
     border-bottom: 5px solid rgba(255, 255, 255, 0);
@@ -30,7 +32,7 @@
 }
 
 .Resizer.vertical {
-    width: 11px;
+    width: 10px;
     margin: 0 -5px;
     border-left: 5px solid rgba(255, 255, 255, 0);
     border-right: 5px solid rgba(255, 255, 255, 0);

client/styles/components/_sidebar.scss

@@ -77,10 +77,9 @@
 .file-item__content {
   display: flex;
   position: relative;
-  padding: #{8 / $base-font-size}rem 0;
   .sidebar__file-item--selected > & {
     @include themify() {
-      background-color: map-get($theme-map, 'ide-border-color');
+      background-color: map-get($theme-map, 'file-selected-color');
     }
   }
   .sidebar--contracted & {
@@ -89,6 +88,7 @@
 }
 
 .sidebar__file-item-name {
+  padding: #{8 / $base-font-size}rem 0;
   .sidebar__file-item--editing & {
     display: none;
   }
@@ -97,6 +97,7 @@
 .sidebar__file-item-show-options {
   @include themify() {
     @extend %icon;
+    padding: #{8 / $base-font-size}rem 0;
   }
   display: none;
   position: absolute;
@@ -128,8 +129,7 @@
   display: none;
   padding: 0;
   border: 0;
-  background-color: transparent;
-  max-width: 90%;
+  width: calc(100% - #{100 / $base-font-size}rem);
   .sidebar__file-item--editing & {
     display: inline-block;
   }
@@ -170,6 +170,7 @@
 }
 
 .sidebar__folder-icon {
+  padding: #{8 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
   & g {
     @include themify() {
@@ -179,6 +180,7 @@
 }
 
 .sidebar__file-item-icon {
+  padding: #{8 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
   & g {
     @include themify() {

client/styles/components/_toolbar.scss

@@ -27,8 +27,10 @@
 .toolbar__preferences-button {
 	@include themify() {
 		@extend %toolbar-button;
+		line-height: #{50 / $base-font-size}rem;
 		&--selected {
 			@extend %toolbar-button--selected;
+			line-height: #{50 / $base-font-size}rem;
 		}
 	}
 	line-height: #{50 / $base-font-size}rem;

client/styles/layout/_ide.scss

@@ -1,10 +1,5 @@
 .ide {
-	height: 100%;
-  width: 100%;
-}
-
-.ide-content {
-  display: flex;
+	display: flex;
   flex-direction: column;
   height: 100%;
   flex-wrap: wrap;