more half finished theme stuff

client/modules/App/App.js

@@ -1,10 +1,12 @@
 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 };
   }
 
@@ -13,8 +15,14 @@ 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="app">
+      <div className={appClass}>
         {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
         {this.props.children}
       </div>
@@ -23,7 +31,10 @@ 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,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) {
@@ -157,13 +156,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">
         {this.props.toast.isVisible && <Toast />}
         <Nav
           user={this.props.user}

client/routes.js

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

client/styles/abstracts/_mixins.scss

@@ -3,13 +3,12 @@
     .#{$theme} & {
       // Define theme color
       $theme-map : (
-          color-alpha: blue
       ) !global;
       
       @each $key, $submap in $map {
         $value: map-fetch($themes, $theme '#{$key}');
         $theme-map: map-merge($theme-map, ($key: $value)) !global;
-      }
+      } 
       
       @content;
       

client/styles/abstracts/_placeholders.scss

@@ -93,25 +93,21 @@
 	}
 }
 
-%fake-link {
-	color: $light-inactive-text-color;
-	cursor: pointer;
-	&:hover {
-		color: $light-primary-text-color;
-	}
-}
-
 %preference-option {
-	background-color: $light-button-background-color;
+	@include themify() {
-	color: $light-inactive-text-color;
+		background-color: transparent;
+		color: getThemifyVariable('inactive-text-color');
+		&:hover {
+			color: getThemifyVariable('primary-text-color');
+		}
+	}
 	font-size: #{12 / $base-font-size}rem;
 	cursor: pointer;
 	text-align: left;
 	margin-bottom: #{5 / $base-font-size}rem;
-	border: 0px;
+	border: 0;
-	&:hover {
+	padding: 0;
-		color: $light-primary-text-color;
+	list-style-type: none;
-	}
 }
 
 %modal {

client/styles/base/_base.scss

@@ -7,8 +7,10 @@ html, body {
 }
 
 body, input, button {
+	@include themify() {
+		color: getThemifyVariable('primary-text-color');
+	}
 	font-family: 'Avenir Next', Montserrat, sans-serif;
-	color: $light-primary-text-color;
 }
 
 body {

client/styles/components/_github-button.scss

@@ -1,10 +1,6 @@
 .github-button {
   @include themify() {
     @extend %button;
-    width: #{300 / $base-font-size}rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     & path {
       color: getThemifyVariable('primary-text-color');
     }
@@ -16,6 +12,10 @@
       border-color: getThemifyVariable('secondary-text-color');
     }
   }
+  width: #{300 / $base-font-size}rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .github-icon {

client/styles/components/_nav.scss

@@ -16,10 +16,6 @@
 	border-bottom: 2px dashed;
 }
 
-.nav__save, .nav__new {
-	@extend %fake-link;
-}
-
 .nav__item {
 	& + & {
 		margin-left: #{20 / $base-font-size}rem;

client/styles/components/_preferences.scss

@@ -88,17 +88,16 @@
 }
 
 .preference__option {
-	@extend %preference-option;
+	@include themify() {
-	list-style-type: none;
+		@extend %preference-option;
-	padding: 0;
+	}
-	color: $light-inactive-text-color;
 }
 
 .preference__preview-button {
-	@extend %preference-option;
+	@include themify() {
-	padding: 0;
+		@extend %preference-option;
-	padding-left: #{110 / $base-font-size}rem;
+		padding-left: #{110 / $base-font-size}rem;
-	outline: none;
+	}
 }
 
 .preference__options {
@@ -108,7 +107,10 @@
 }
 
 .preference__radio-button:checked + .preference__option {
-    color: $light-primary-text-color;
+	@include themify() {	
+		//for some reason this won't work for getThemifyVariable
+	  color: map-get($theme-map, 'primary-text-color');
+	}
 }
 
 .preference--hidden {

client/styles/components/_toolbar.scss

@@ -1,13 +1,13 @@
 .toolbar__play-button {
 	@include themify() {
 		@extend %toolbar-button;
-		margin-right: #{15 / $base-font-size}rem;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
-		& span {
+	}
-			padding-left: #{2 / $base-font-size}rem;
+	margin-right: #{15 / $base-font-size}rem;
-		}
+	& span {
+		padding-left: #{2 / $base-font-size}rem;
 	}
 }
 
@@ -27,12 +27,12 @@
 .toolbar__preferences-button {
 	@include themify() {
 		@extend %toolbar-button;
-		line-height: #{50 / $base-font-size}rem;
-		margin-left: auto;
 		&--selected {
 			@extend %toolbar-button--selected;
 		}
 	}
+	line-height: #{50 / $base-font-size}rem;
+	margin-left: auto;
 }
 
 .toolbar__logo {