more dark theme stuff

client/modules/App/App.js

@@ -1,12 +1,10 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import DevTools from './components/DevTools';
-import classNames from 'classnames';
 
 class App extends React.Component {
   constructor(props, context) {
     super(props, context);
-    console.log(props);
     this.state = { isMounted: false };
   }
 
@@ -15,14 +13,8 @@ class App extends React.Component {
   }
 
   render() {
-    const theme = this.props.route.theme;
-    const appClass = classNames({
-      app: true,
-      light: theme === 'light',
-      dark: theme === 'dark'
-    });
     return (
-      <div className={appClass}>
+      <div className="app">
         {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
         {this.props.children}
       </div>
@@ -31,10 +23,7 @@ class App extends React.Component {
 }
 
 App.propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.object
-  route: PropTypes.shape({
-    theme: PropTypes.string.isRequired
-  }).isRequired
 };
 
 export default connect()(App);

client/modules/IDE/pages/IDEView.js

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

client/routes.js

@@ -14,7 +14,7 @@ const checkAuth = (store) => {
 
 const routes = (store) =>
   (
-  <Route path="/" component={App} theme={store.getState().preferences.theme}>
+  <Route path="/" component={App}>
     <IndexRoute component={IDEView} onEnter={checkAuth(store)} />
     <Route path="/login" component={LoginView} />
     <Route path="/signup" component={SignupView} />

client/styles/abstracts/_placeholders.scss

@@ -111,10 +111,12 @@
 }
 
 %modal {
-	background-color: $light-modal-background-color;
+	@include themify() {
-	border: 1px solid $light-modal-border-color;
+		background-color: getThemifyVariable('modal-background-color');
+		border: 1px solid getThemifyVariable('modal-border-color');
+		box-shadow: 0 12px 12px getThemifyVariable('shadow-color');
+	}
 	border-radius: 2px;
-	box-shadow: 0 12px 12px $light-shadow-color;
 	z-index: 20;
 }
 

client/styles/base/_base.scss

@@ -13,22 +13,20 @@ body, input, button {
 	font-family: 'Avenir Next', Montserrat, sans-serif;
 }
 
-body {
-	background-color: $light-background-color;
-}
-
 .root-app, .app {
 	min-height: 100%;
 	height: 100%;
 }
 
 a {
+	@include themify() {
 		text-decoration: none;
-	color: $light-inactive-text-color;
+		color: getThemifyVariable('inactive-text-color');
 		cursor: pointer;
 		&:hover {
 			text-decoration: none;
-		color: $light-primary-text-color;
+			color: getThemifyVariable('primary-text-color');
+		}
 	}
 }
 

client/styles/layout/_ide.scss

@@ -1,8 +1,17 @@
 .ide {
+	height: 100%;
+  width: 100%;
+}
+
+.ide-content {
   display: flex;
   flex-direction: column;
   height: 100%;
   flex-wrap: wrap;
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+    background-color: getThemifyVariable('background-color');
+  }
 }
 
 .editor-preview-container {