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,14 +162,8 @@ 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">
-        <div className="ide-content">
         {this.props.toast.isVisible && <Toast />}
         <Nav
           user={this.props.user}
@@ -315,7 +314,6 @@ class IDEView extends React.Component {
             </SplitPane>
           </SplitPane>
         </div>
-        </div>
         {(() => {
           if (this.props.ide.modalIsVisible) {
             return (

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-gray: #A0A0A0;
-$p5-dark-darkblue: #318094;
+$p5-dark-lightblue: #00A1D3;
-$p5-dark-white: #FFFFFF;
+$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-gutter: #f4f4f4;
-$p5-dark-darkgray: #b5b5b5;
+$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;
+  background-color: #454545;
-  border-right: 1px solid #ddd;
+  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;
+  width: calc(100% - #{100 / $base-font-size}rem);
-  max-width: 90%;
   .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,9 +1,4 @@
 .ide {
-	height: 100%;
-  width: 100%;
-}
-
-.ide-content {
 	display: flex;
   flex-direction: column;
   height: 100%;