fixed appending errors in draw(), changed error color

client/constants.js

@@ -81,6 +81,7 @@ export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL';
 export const SHOW_TOAST = 'SHOW_TOAST';
 export const HIDE_TOAST = 'HIDE_TOAST';
 export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
+export const SET_THEME = 'SET_THEME';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
 

client/images/play.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16px" height="16px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>play</title>
     <!-- <desc>Created with Sketch.</desc> -->

client/modules/IDE/actions/preferences.js

@@ -136,3 +136,11 @@ export function setTextOutput(value) {
     }
   };
 }
+
+export function setTheme(value) {
+  return {
+    type: ActionTypes.SET_THEME,
+    value
+  };
+}
+

client/modules/IDE/components/Editor.js

@@ -39,7 +39,7 @@ class Editor extends React.Component {
     this.beep = new Audio(beepUrl);
     this.widgets = [];
     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,
@@ -115,6 +115,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() {
@@ -140,6 +144,7 @@ class Editor extends React.Component {
   checkForInfiniteLoop(callback) {
     const prevIsplaying = this.props.isPlaying;
     let infiniteLoop = false;
+    let prevLine;
     this.props.stopSketch();
     this.props.resetInfiniteLoops();
 
@@ -155,14 +160,17 @@ class Editor extends React.Component {
     loopProtect.alias = 'protect';
 
     loopProtect.hit = (line) => {
-      this.props.detectInfiniteLoops();
+      if (line !== prevLine) {
-      infiniteLoop = true;
+        this.props.detectInfiniteLoops();
-      callback(infiniteLoop, prevIsplaying);
+        infiniteLoop = true;
-      const msg = document.createElement('div');
+        callback(infiniteLoop, prevIsplaying);
-      const loopError = `line ${line}: This loop is taking too long to run.`;
+        const msg = document.createElement('div');
-      msg.appendChild(document.createTextNode(loopError));
+        const loopError = `line ${line}: This loop is taking too long to run.`;
-      msg.className = 'lint-error';
+        msg.appendChild(document.createTextNode(loopError));
-      this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true }));
+        msg.className = 'lint-error';
+        this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true }));
+        prevLine = line;
+      }
     };
 
     const processed = loopProtect(this.props.file.content);
@@ -193,7 +201,7 @@ class Editor extends React.Component {
         </body>
       </html>`);
     doc.close();
-    callback(infiniteLoop, prevIsplaying);
+    callback(infiniteLoop, prevIsplaying, prevLine);
   }
 
   _cm: CodeMirror.Editor
@@ -265,7 +273,8 @@ Editor.propTypes = {
   resetInfiniteLoops: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   startSketch: PropTypes.func.isRequired,
-  isPlaying: PropTypes.bool.isRequired
+  isPlaying: PropTypes.bool.isRequired,
+  theme: PropTypes.string.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/Preferences.js

@@ -165,6 +165,33 @@ class Preferences extends React.Component {
             <label htmlFor="autosave-off" className="preference__option">Off</label>
           </div>
         </div>
+        <div className="preference">
+          <h4 className="preference__title">Theme</h4>
+          <div className="preference__options">
+            <input
+              type="radio"
+              onChange={() => this.props.setTheme('light')}
+              aria-label="light theme on"
+              name="light theme"
+              id="light-theme-on"
+              className="preference__radio-button"
+              value="light"
+              checked={this.props.theme === 'light'}
+            />
+            <label htmlFor="light-theme-on" className="preference__option">Light</label>
+            <input
+              type="radio"
+              onChange={() => this.props.setTheme('dark')}
+              aria-label="dark theme on"
+              name="dark theme"
+              id="dark-theme-on"
+              className="preference__radio-button"
+              value="dark"
+              checked={this.props.theme === 'dark'}
+            />
+            <label htmlFor="dark-theme-on" className="preference__option">Dark</label>
+          </div>
+        </div>
         <div className="preference">
           <h4 className="preference__title">Lint Warning Sound</h4>
           <div className="preference__options">
@@ -249,7 +276,9 @@ Preferences.propTypes = {
   textOutput: PropTypes.bool.isRequired,
   setTextOutput: PropTypes.func.isRequired,
   lintWarning: PropTypes.bool.isRequired,
-  setLintWarning: PropTypes.func.isRequired
+  setLintWarning: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequired,
+  setTheme: PropTypes.func.isRequired
 };
 
 export default Preferences;

client/modules/IDE/pages/IDEView.js

@@ -61,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) {
@@ -75,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) {
@@ -203,6 +209,8 @@ class IDEView extends React.Component {
           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
@@ -271,6 +279,7 @@ class IDEView extends React.Component {
                   stopSketch={this.props.stopSketch}
                   startSketch={this.props.startSketch}
                   isPlaying={this.props.ide.isPlaying}
+                  theme={this.props.preferences.theme}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -443,7 +452,8 @@ IDEView.propTypes = {
     isTabIndent: PropTypes.bool.isRequired,
     autosave: PropTypes.bool.isRequired,
     lintWarning: PropTypes.bool.isRequired,
-    textOutput: PropTypes.bool.isRequired
+    textOutput: PropTypes.bool.isRequired,
+    theme: PropTypes.string.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
@@ -503,7 +513,8 @@ IDEView.propTypes = {
     setRouteLeaveHook: PropTypes.func
   }).isRequired,
   route: PropTypes.object.isRequired,
-  setUnsavedChanges: PropTypes.func.isRequired
+  setUnsavedChanges: PropTypes.func.isRequired,
+  setTheme: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/preferences.js

@@ -6,7 +6,8 @@ const initialState = {
   isTabIndent: true,
   autosave: true,
   lintWarning: false,
-  textOutput: false
+  textOutput: false,
+  theme: 'light'
 };
 
 const preferences = (state = initialState, action) => {
@@ -31,6 +32,8 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, { textOutput: action.value });
     case ActionTypes.SET_PREFERENCES:
       return action.preferences;
+    case ActionTypes.SET_THEME:
+      return Object.assign({}, state, { theme: action.value });
     default:
       return state;
   }

client/styles/abstracts/_functions.scss

@@ -0,0 +1,26 @@
+@function map-fetch($map, $keys) {
+  $key: nth($keys, 1);
+  $length: length($keys);
+  $value: map-get($map, $key);
+  
+  
+  @if $value != null {
+    @if $length > 1 {
+      $rest: ();
+      
+      @for $i from 2 through $length {
+        $rest: append($rest, nth($keys, $i))
+      }
+      
+      @return map-fetch($value, $rest);
+    } @else {
+      @return $value;
+    }
+  } @else {
+    @return false;
+  }
+}
+
+@function getThemifyVariable($key) {
+  @return map-get($theme-map, $key);
+}

client/styles/abstracts/_mixins.scss

@@ -0,0 +1,19 @@
+@mixin themify ($themes: $themes) {
+  @each $theme, $map in $themes {
+    .#{$theme} & {
+      // Define theme color
+      $theme-map : (
+      ) !global;
+      
+      @each $key, $submap in $map {
+        $value: map-fetch($themes, $theme '#{$key}');
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      } 
+      
+      @content;
+      
+      // reset theme color to null
+      $theme-map: null !global;
+    }
+  }
+}

client/styles/abstracts/_placeholders.scss

@@ -1,116 +1,122 @@
 %toolbar-button {
-	display: inline-block;
+	@include themify() {
-	height: #{44 / $base-font-size}rem;
+		display: inline-block;
-	width: #{44 / $base-font-size}rem;
+		height: #{44 / $base-font-size}rem;
-	text-align: center;
+		width: #{44 / $base-font-size}rem;
-	border-radius: 100%;
+		text-align: center;
-	line-height: #{46 / $base-font-size}rem;
+		border-radius: 100%;
-	cursor: pointer;
+		line-height: #{46 / $base-font-size}rem;
-	border: none;
+		cursor: pointer;
-	outline: none;
+		border: none;
-	background-color: $light-button-background-color;
+		outline: none;
-	color: $light-button-color;
+		background-color: getThemifyVariable('toolbar-button-background-color');
-	& g {
+		color: getThemifyVariable('toolbar-button-color');
-		fill: $light-toolbar-button-color;
-	}
-	&:hover {
-		background-color: $light-button-background-hover-color;
-		color: $light-button-hover-color;
-
 		& g {
-			fill: $light-button-hover-color;
+			fill: getThemifyVariable('toolbar-button-color');
 		}
+		&:hover {
+			background-color: getThemifyVariable('button-background-hover-color');
+			color: getThemifyVariable('button-hover-color');
+
+			& g {
+				fill: getThemifyVariable('button-hover-color');
+			}
+		}
+		&--selected {
+	    background-color: getThemifyVariable('button-background-hover-color');
+	    & g {
+	        fill: getThemifyVariable('button-hover-color');
+	    }
+	  }
 	}
-	&--selected {
-    background-color: $light-button-background-hover-color;
-    & g {
-        fill: $light-button-hover-color;
-    }
-  }
 }
 
 %icon {
+	@include themify() {
+		color: getThemifyVariable('icon-color');
+		& g {
+			fill: getThemifyVariable('icon-color');
+		}
+		&:hover {
+			color: getThemifyVariable('icon-hover-color');
+			& g {
+				opacity: 1;
+				fill: getThemifyVariable('icon-hover-color');
+			}
+		}
+	}
 	background-color: transparent;
 	border: none;
 	cursor: pointer;
 	padding: 0;
-	color: $light-icon-color;
-	& g {
-		fill: $light-icon-color;
-	}
-	&:hover {
-		color: $light-icon-hover-color;
-		& g {
-			opacity: 1;
-			fill: $light-icon-hover-color;
-		}
-	}
 }
 
 %button {
-	background-color: $light-button-background-color;
+	@include themify() {
-	color: $light-button-color;
+		background-color: getThemifyVariable('button-background-color');
-	cursor: pointer;
+		color: getThemifyVariable('button-color');
-	border: 1px solid $light-button-border-color;
+		cursor: pointer;
-	border-radius: 2px;
+		border: 1px solid getThemifyVariable('button-border-color');
-	padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+		border-radius: 2px;
-	&:hover {
+		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
-		border-color: $light-button-background-hover-color;
+		&:hover {
-		background-color: $light-button-background-hover-color;
+			border-color: getThemifyVariable('button-background-hover-color');
-		color: $light-button-hover-color;
+			background-color: getThemifyVariable('button-background-hover-color');
-	}
+			color: getThemifyVariable('button-hover-color');
-	&:active {
+		}
-		border-color: $light-button-background-active-color;
+		&:active {
-		background-color: $light-button-background-active-color;
+			border-color: getThemifyVariable('button-background-active-color');
-		color: $light-button-active-color;
+			background-color: getThemifyVariable('button-background-active-color');
+			color: getThemifyVariable('button-active-color');
+		}
 	}
 }
 
 %preferences-button {
 	@extend %toolbar-button;
-	color: $light-primary-text-color;
+	@include themify() {
-	background-color: $light-modal-button-background-color;
+		color: getThemifyVariable('primary-text-color');
-	padding: 0;
+		background-color: getThemifyVariable('modal-button-background-color');
-	margin-bottom: #{28 / $base-font-size}rem;
+		padding: 0;
-	line-height: #{50 / $base-font-size}rem;
+		margin-bottom: #{28 / $base-font-size}rem;
-	& g {
+		line-height: #{50 / $base-font-size}rem;
-		fill: $light-primary-text-color;
-	}
-	&:hover {
-		background-color: $light-button-background-hover-color;
-		color: $light-button-hover-color;
 		& g {
-			fill: $light-button-hover-color;
+			fill: getThemifyVariable('primary-text-color');
+		}
+		&:hover {
+			background-color: getThemifyVariable('button-background-hover-color');
+			color: getThemifyVariable('button-hover-color');
+			& g {
+				fill: getThemifyVariable('button-hover-color');
+			}
 		}
 	}
 }
 
-%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 {
-	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/abstracts/_variables.scss

@@ -5,49 +5,70 @@ $p5js-pink: #ed225d;
 $white: #fff;
 $black: #000;
 
-$light-primary-text-color: #333;
+$themes: (
-$light-secondary-text-color: #6b6b6b;
+  light: (
-$light-inactive-text-color: #b5b5b5;
+    primary-text-color: #333,
-$light-background-color: #fdfdfd;
+    secondary-text-color: #6b6b6b,
+    inactive-text-color: #b5b5b5,
+    background-color: #fdfdfd,
+    button-background-color: #f4f4f4,
+    button-color: $black,
+    button-border-color: #979797,
+    toolbar-button-color: $p5js-pink,
+    toolbar-button-background-color: #f4f4f4,
+    button-background-hover-color: $p5js-pink,
+    button-background-active-color: #f10046,
+    button-hover-color: $white,
+    button-active-color: $white,
+    modal-background-color: #f4f4f4,
+    modal-button-background-color: #e6e6e6,
+    modal-border-color: #B9D0E1,
+    icon-color: #8b8b8b,
+    icon-hover-color: #333,
+    shadow-color: rgba(0, 0, 0, 0.16),
+    console-background-color: #eee,
+    console-header-background-color: #d6d6d6,
+    console-header-color: #b1b1b1,
+    ide-border-color: #f4f4f4,
+    editor-gutter-color: #f7f7f7,
+    file-selected-color: #f4f4f4,
+    input-text-color: #333,
+    input-border-color: #979797,
+  ),
+  dark: (
+    primary-text-color: $white,
+    secondary-text-color: #c2c2c2,
+    inactive-text-color: #7d7d7d,
+    background-color: #333,
+    button-background-color: $white,
+    button-color: $black,
+    button-border-color: #979797,
+    toolbar-button-color: $p5js-pink,
+    toolbar-button-background-color: #424242,
+    button-background-hover-color: $p5js-pink,
+    button-background-active-color: #f10046,
+    button-hover-color: $white,
+    button-active-color: $white,
+    modal-background-color: #444,
+    modal-button-background-color: #5f5f5f,
+    modal-border-color: #949494,
+    icon-color: #a9a9a9,
+    icon-hover-color: $white,
+    shadow-color: rgba(0, 0, 0, 0.16),
+    console-background-color: #4f4f4f,
+    console-header-background-color: #3f3f3f,
+    console-header-color: #b5b5b5,
+    ide-border-color: #949494,
+    editor-gutter-color: #363636,
+    file-selected-color: #404040,
+    input-text-color: #333,
+    input-border-color: #979797,
+  )
+);
 
-$light-button-background-color: #f4f4f4;
+$console-warn-color: #ffbe05;
-$light-button-color: $black;
+$console-error-color: #ff5f52;
-$light-button-border-color: #979797;
-$light-toolbar-button-color: $p5js-pink;
-$light-button-background-hover-color: $p5js-pink;
-$light-button-background-active-color: #f10046;
-$light-button-hover-color: $white;
-$light-button-active-color: $white;
-$light-modal-background-color: #f4f4f4;
-$light-modal-button-background-color: #e6e6e6;
-$light-modal-border-color: #B9D0E1;
-$light-icon-color: #8b8b8b;
-$light-icon-hover-color: $light-primary-text-color;
-$light-shadow-color: rgba(0, 0, 0, 0.16);
 
 $toast-background-color: #979797;
 $toast-text-color: $white;
 
-$dark-primary-text-color: $white;
-$dark-secondary-text-color: #c2c2c2;
-$dark-inactive-color: #7d7d7d;
-$dark-background-color: #333;
-
-$dark-button-background-color: $white;
-$dark-button-color: $black;
-$dark-toolbar-button-color: $p5js-pink;
-$dark-button-background-hover-color: $p5js-pink;
-$dark-button-background-active-color: #f10046;
-$dark-button-hover-color: $white;
-$dark-button-active-color: $white;
-
-$ide-border-color: #f4f4f4;
-$editor-selected-line-color: #f3f3f3;
-$input-border-color: #979797;
-
-$console-light-background-color: #eee;
-$console-header-background-color: #d6d6d6;
-$console-header-color: #b1b1b1;
-$console-warn-color: #ffbe05;
-$console-error-color: #ff5f52;
-

client/styles/base/_base.scss

@@ -7,12 +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 {
-	background-color: $light-background-color;
 }
 
 .root-app, .app {
@@ -21,12 +19,14 @@ body {
 }
 
 a {
-	text-decoration: none;
+	@include themify() {
-	color: $light-inactive-text-color;
-	cursor: pointer;
-	&:hover {
 		text-decoration: none;
-		color: $light-primary-text-color;
+		color: getThemifyVariable('inactive-text-color');
+		cursor: pointer;
+		&:hover {
+			text-decoration: none;
+			color: getThemifyVariable('primary-text-color');
+		}
 	}
 }
 
@@ -36,13 +36,18 @@ input, button {
 
 input {
 	padding: #{5 / $base-font-size}rem;
-	// border-radius: 2px;
+	border: 1px solid;
-	border: 1px solid $input-border-color;
 	padding: #{10 / $base-font-size}rem;
+	@include themify() {
+		color: getThemifyVariable('input-text-color');
+		border-color: getThemifyVariable('input-border-color');
+	}
 }
 
 input[type="submit"] {
-	@extend %button;
+	@include themify() {
+		@extend %button;
+	}
 }
 
 h2 {

client/styles/components/_about.scss

@@ -12,7 +12,9 @@
 }
 
 .about__exit-button {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }
 
 .about__copy {

client/styles/components/_console.scss

@@ -1,7 +1,12 @@
 .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%;
-	background: $console-light-background-color;
 	z-index: 1000;
 	overflow: hidden;
 	display: flex;
@@ -14,7 +19,9 @@
 
 	// assign styles to different types of console messages
 	.preview-console__log {
-		color: $dark-secondary-text-color;
+		@include themify(){
+			color: getThemifyVariable('secondary-text-color');
+		}
 		flex: 1 0 auto;
 	}
 
@@ -30,8 +37,10 @@
 }
 
 .preview-console__header {
-	background-color: $console-header-background-color;
+	@include themify() {
-	color: $console-header-color;
+		background-color: getThemifyVariable('console-header-background-color');
+		color: getThemifyVariable('console-header-color');
+	}
 	padding: #{5 / $base-font-size}rem;
 	display: flex;
 	justify-content: space-between;
@@ -51,14 +60,18 @@
 }
 
 .preview-console__collapse {
-	@extend %icon;
+	@include themify() {
+		@extend %icon;
+	}
 	.preview-console--collapsed & {
 		display: none;
 	}
 }
 
 .preview-console__expand {
-	@extend %icon;
+	@include themify() {
+		@extend %icon;
+	}
 	display: none;
 	.preview-console--collapsed & {
 		display: inline-block;

client/styles/components/_editor.scss

@@ -1,7 +1,9 @@
 .CodeMirror {
-	font-family: Inconsolata, monospace;
+  @include themify() {
-	height: 100%;
+  	border: 1px solid getThemifyVariable('ide-border-color');
-	border: 1px solid $ide-border-color;
+  }
+  font-family: Inconsolata, monospace;
+  height: 100%;
 }
 
 .CodeMirror-linenumbers {
@@ -54,15 +56,27 @@
 }
 
 .CodeMirror-lint-tooltip {
-  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');
+    color: getThemifyVariable('primary-text-color');
+  }
   border-radius: 2px;
-  box-shadow: 0 12px 12px $light-shadow-color;
+  font-family: 'Avenir Next', Montserrat, sans-serif;
-  font-family: Montserrat, sans-serif;
+}
+
+.CodeMirror-gutters {
+  @include themify() {
+    background-color: getThemifyVariable('editor-gutter-color');
+    border-color: getThemifyVariable('ide-border-color');
+  }
 }
 
 .editor__options-button {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
   position: absolute;
   top: #{5 / $base-font-size}rem;
   right: #{5 / $base-font-size}rem;
@@ -85,7 +99,7 @@
 .lint-error {
   font-family: Inconsolata, monospace;
   font-size: 100%;
-  background: #FFBEC1;
+  background: rgba($console-error-color, 0.3);
-  color: red;
+  color: $console-error-color;
   padding: 2px 5px 3px;
 }

client/styles/components/_github-button.scss

@@ -1,19 +1,21 @@
 .github-button {
-  @extend %button;
+  @include themify() {
+    @extend %button;
+    & path {
+      color: getThemifyVariable('primary-text-color');
+    }
+    &:hover path, &:active path {
+      fill: $white;
+    }
+    &:hover, &:active {
+      background-color: getThemifyVariable('secondary-text-color');
+      border-color: getThemifyVariable('secondary-text-color');
+    }
+  }
   width: #{300 / $base-font-size}rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  & path {
-    color: $light-primary-text-color;
-  }
-  &:hover path, &:active path {
-    fill: $white;
-  }
-  &:hover, &:active {
-    background-color: $light-secondary-text-color;
-    border-color: $light-secondary-text-color
-  }
 }
 
 .github-icon {

client/styles/components/_modal.scss

@@ -21,7 +21,9 @@
 }
 
 .modal__exit-button {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }
 
 .modal__header {
@@ -88,7 +90,9 @@
 }
 
 .keyboard-shortcuts__close {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }
 
 .keyboard-shortcut-item {

client/styles/components/_nav.scss

@@ -8,16 +8,14 @@
 }
 
 .nav__items-left, .nav__items-right {
+	@include themify() {
+		border-bottom: 2px dashed map-get($theme-map, 'inactive-text-color');
+	}
 	list-style: none;
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
 	padding: #{5 / $base-font-size}rem #{10 / $base-font-size}rem;
-	border-bottom: 2px dashed;
-}
-
-.nav__save, .nav__new {
-	@extend %fake-link;
 }
 
 .nav__item {
@@ -25,21 +23,24 @@
 		margin-left: #{20 / $base-font-size}rem;
 	}
 	position: relative;
-	&:hover .nav__dropdown {
-		display: flex;
-	}
 }
 
 .nav__dropdown {
-	display: none;
+	@include themify() {
-	position: absolute;
+		background-color: map-get($theme-map, 'background-color');
-	flex-direction: column;
+		border: 1px solid map-get($theme-map, 'ide-border-color');
-	background-color: $light-background-color;
+	}
-	padding: #{10 / $base-font-size}rem;
+	@extend %hidden-element;
-	left: #{-10 / $base-font-size}rem;
-	border: 1px solid $ide-border-color;
 	& li + li {
 		margin-top: #{10 / $base-font-size}rem;
 	}
 	width: #{140 / $base-font-size}rem;
+	.nav__item:hover & {
+		display: flex;
+		position: absolute;
+		flex-direction: column;
+		padding: #{10 / $base-font-size}rem;
+		left: #{-10 / $base-font-size}rem;
+		height: auto;
+	}
 }

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

@@ -0,0 +1,119 @@
+// brown: #6C4D13
+// black: #333
+// blue: #0F9DD7
+// pink: #D9328F
+// gray: #999999
+// dark blue: #318094
+// white: #fdfdfd
+
+//numbers
+//light gray: #f4f4f4
+//dark gray: #b5b5b5
+
+$p5-dark-lightbrown: #A67F59;
+$p5-dark-brown: #6C4D13;
+$p5-dark-black: #333;
+$p5-dark-pink: #D9328F;
+$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-gutter: #f4f4f4;
+$p5-dark-number: #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-darkblue;
+}
+
+.cm-s-p5-dark .cm-string {
+  color: $p5-dark-lightblue;
+}
+
+.cm-s-p5-dark .cm-string-2 {
+  color: $p5-dark-orange;
+}
+
+.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-lightblue;
+}
+
+.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-lightbrown;
+}
+
+.cm-s-p5-dark .cm-linenumber {
+  color: $p5-dark-number;
+}
+
+.cm-s-p5-dark .CodeMirror-selected {
+  background-color: $p5-dark-selected;
+}
+
+.cm-s-p5-dark .CodeMirror-activeline-background {
+  background-color: #404040;
+}
+
+.cm-s-p5-dark .CodeMirror-activeline-gutter {
+  background-color: #454545;
+  border-right: 1px solid #949494;
+}
+
+.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-lightblue;
+}
+
+.cm-s-p5-dark .cm-tag {
+  color: $p5-dark-pink;
+}
+
+.cm-s-p5-dark .cm-builtin {
+  color: $p5-dark-lightblue;
+}
+
+.cm-s-p5-dark .cm-attribute {
+  color: $p5-dark-lightblue;
+}

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

@@ -0,0 +1,118 @@
+// brown: #6C4D13
+// black: #333
+// blue: #0F9DD7
+// pink: #D9328F
+// gray: #999999
+// dark blue: #318094
+// white: #fdfdfd
+
+//numbers
+//light gray: #f4f4f4
+//dark gray: #b5b5b5
+
+$p5-light-lightbrown: #A67F59;
+$p5-light-brown: #704F21;
+$p5-light-black: #333;
+$p5-light-pink: #D9328F;
+$p5-light-gray: #A0A0A0;
+$p5-light-lightblue: #00A1D3;
+$p5-light-darkblue: #2D7BB6;
+$p5-light-white: #FDFDFD;
+$p5-light-orange: #EE9900;
+$p5-light-lightgray: #E0D7D1;
+$p5-light-darkgray: #666666;
+
+$p5-light-gutter: #f4f4f4;
+$p5-light-number: #b5b5b5;
+$p5-light-selected: rgba(45, 123, 182, 25);
+$p5-light-activeline: rgb(207, 207, 207);
+
+.cm-s-p5-light {
+  background-color: $p5-light-white;
+  color: $p5-light-black;
+}
+
+.cm-s-p5-light .cm-comment {
+  color: $p5-light-gray;
+}
+
+.cm-s-p5-light .cm-def {
+  color: $p5-light-darkblue;
+}
+
+.cm-s-p5-light .cm-string {
+  color: $p5-light-lightblue;
+}
+
+.cm-s-p5-light .cm-string-2 {
+  color: $p5-light-orange;
+}
+
+.cm-s-p5-light .cm-number {
+  color: $p5-light-pink;
+}
+
+.cm-s-p5-light .cm-keyword {
+  color: $p5-light-brown;
+}
+
+.cm-s-p5-light .cm-variable {
+  color: $p5-light-lightblue;
+}
+
+.cm-s-p5-light .cm-variable-2 {
+  color: $p5-light-black;
+}
+
+.cm-s-p5-light .cm-property {
+  color: $p5-light-black;
+}
+
+.cm-s-p5-light .cm-atom {
+  color: $p5-light-pink;
+}
+
+.cm-s-p5-light .cm-operator {
+  color: $p5-light-lightbrown;
+}
+
+.cm-s-p5-light .cm-linenumber {
+  color: $p5-light-number;
+}
+
+.cm-s-p5-light .CodeMirror-selected {
+  background-color: $p5-light-selected;
+}
+
+.cm-s-p5-light .CodeMirror-activeline-background {
+  background-color: #F3F3F3;
+}
+
+.cm-s-p5-light .CodeMirror-activeline-gutter {
+  background-color: #ECECEC;
+}
+
+.cm-s-p5-light .cm-error {
+  color: #f00;
+}
+
+.cm-s-p5-light .CodeMirror-matchingbracket {
+  outline: 1px solid $p5-light-number;
+  color: black !important;
+}
+
+.cm-s-p5-light .cm-qualifier {
+  color: $p5-light-lightblue;
+}
+
+.cm-s-p5-light .cm-tag {
+  color: $p5-light-pink;
+}
+
+.cm-s-p5-light .cm-builtin {
+  color: $p5-light-lightblue;
+}
+
+.cm-s-p5-light .cm-attribute {
+  color: $p5-light-lightblue;
+}

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

@@ -1,40 +0,0 @@
-:root {
-  --light-gray: #A0A0A0;
-  --dark-gray: #666;
-  --almost-black: #222;
-  --dark-brown: #704F21;
-  --light-brown: #a67f59;
-  --pinkish: #DC3787; /* not p5 pink, but related */
-  --dark-blueish: #00A1D3;
-}
-
-.cm-s-p5-widget span { color: var(--dark-gray); }
-
-.cm-s-p5-widget span.cm-meta { color: var(--dark-gray); }
-.cm-s-p5-widget span.cm-keyword { line-height: 1em; color: var(--dark-brown); }
-.cm-s-p5-widget span.cm-atom { color: var(--pinkish); }
-.cm-s-p5-widget span.cm-number { color: var(--pinkish); }
-.cm-s-p5-widget span.cm-def { color: var(--dark-blueish); }
-.cm-s-p5-widget span.cm-variable { color: var(--dark-blueish); }
-.cm-s-p5-widget span.cm-variable-2 { color: var(--almost-black); }
-.cm-s-p5-widget span.cm-variable-3 { color: var(--almost-black); }
-.cm-s-p5-widget span.cm-property { color: var(--almost-black); }
-.cm-s-p5-widget span.cm-operator { color: var(--light-brown); }
-.cm-s-p5-widget span.cm-comment { color: var(--light-gray); }
-.cm-s-p5-widget span.cm-string { color: var(--dark-blueish); }
-.cm-s-p5-widget span.cm-string-2 { color: var(--dark-blueish); }
-
-.cm-s-p5-widget span.cm-error { color: #f00; }
-
-.cm-s-p5-widget .CodeMirror-activeline-background { background-color: #e8f2ff; }
-// .cm-s-p5-widget .CodeMirror-activeline-gutter { background-color: #e8f2ff; }
-.cm-s-p5-widget .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }
-
-/* These styles don't seem to be set by CodeMirror's javascript mode. */
-
-.cm-s-p5-widget span.cm-qualifier { color: #555; }
-.cm-s-p5-widget span.cm-builtin { color: #30a; }
-.cm-s-p5-widget span.cm-bracket { color: #cc7; }
-.cm-s-p5-widget span.cm-tag { color: #170; }
-.cm-s-p5-widget span.cm-attribute { color: #00c; }
-.cm-s-p5-widget span.cm-link { color: #219; }

client/styles/components/_preferences.scss

@@ -13,7 +13,9 @@
 }
 
 .preferences__exit-button {
-	@extend %icon;
+	@include themify() {
+		@extend %icon;
+	}
 	padding-top: #{5 / $base-font-size}rem;
 }
 
@@ -37,7 +39,9 @@
 	flex-wrap: wrap;
 	padding-bottom: #{12 / $base-font-size}rem;
 	& + & {
-  	border-top: 2px dashed $light-button-border-color;
+		@include themify() {
+	  	border-top: 2px dashed getThemifyVariable('button-border-color');
+	  }
 	}
 }
 
@@ -47,31 +51,38 @@
 }
 
 .preference__subtitle {
+	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+	}
 	width: 100%;
 	margin-bottom: #{10 / $base-font-size}rem;
 	margin-top: 0;
-	color: $light-inactive-text-color;
 }
 
 .preference__value {
-	border: 2px solid $light-button-border-color;
+	@include themify() {
+		border: 2px solid getThemifyVariable('button-border-color');
+		background-color: getThemifyVariable('button-background-color');
+		color: getThemifyVariable('input-text-color');
+	}
 	text-align: center;
 	border-radius: 0%;
 	width: #{48 / $base-font-size}rem;
 	height: #{44 / $base-font-size}rem;
 	margin: 0 #{28 / $base-font-size}rem;
 	padding: 0;
-	background-color: $light-button-background-color;
 }
 
 .preference__label {
+	@include themify() {
+		color: getThemifyColor('inactive-text-color');
+		&:hover {
+			color: getThemifyColor('inactive-text-color');
+		}
+	}
 	margin: 0;
 	line-height: #{20 / $base-font-size}rem;
-	color: $light-inactive-text-color;
 	font-size: #{9 / $base-font-size}rem;
-	&:hover {
-		color: $light-inactive-text-color;
-	}
 }
 
 .preference__vertical-list {
@@ -86,17 +97,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 {
@@ -106,7 +116,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/_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

@@ -1,8 +1,10 @@
 .sidebar__header {
+  @include themify() {
+    border-top: 1px solid map-get($theme-map, 'ide-border-color');
+  }
   padding: #{10 / $base-font-size}rem #{6 / $base-font-size}rem;
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid $ide-border-color;
   align-items: center;
   height: #{47 / $base-font-size}rem;
 }
@@ -18,18 +20,19 @@
 }
 
 .sidebar__add {
-  @extend %icon;
+  @include themify() {
-  cursor: pointer;
+    @extend %icon;
-  // height: #{26 / $base-font-size}rem;
+  }
-  // margin-right: #{16 / $base-font-size}rem;
-  // font-size: #{24 / $base-font-size}rem;
   .sidebar--contracted & {
     display: none;
   }
 }
 
 .sidebar__file-list {
-  border-top: 1px solid $ide-border-color;
+  @include themify() {
+    border-color: getThemifyVariable('ide-border-color')
+  }
+  border-top: 1px solid;
   .sidebar--contracted & {
     display: none;
   }
@@ -41,13 +44,15 @@
 
 .sidebar__file-item {
   font-size: #{16 / $base-font-size}rem;
-  color: $light-inactive-text-color;
   cursor: pointer;
-  &:hover > .file-item__content .sidebar__file-item-name {
+  @include themify() {
-    color: $light-primary-text-color;
+    color: map-get($theme-map, 'inactive-text-color');
-  }
+    &:hover > .file-item__content .sidebar__file-item-name {
-  &:hover > .file-item__content .sidebar__file-item-icon g {
+      color: map-get($theme-map, 'primary-text-color');
-    fill: $light-primary-text-color;
+    }
+    &:hover > .file-item__content .sidebar__file-item-icon g {
+      fill: map-get($theme-map, 'primary-text-color');
+    }
   }
 }
 
@@ -75,9 +80,10 @@
 .file-item__content {
   display: flex;
   position: relative;
-  padding: #{8 / $base-font-size}rem 0;
   .sidebar__file-item--selected > & {
-    background-color: $ide-border-color;
+    @include themify() {
+      background-color: map-get($theme-map, 'file-selected-color');
+    }
   }
   .sidebar--contracted & {
     display: none;
@@ -85,13 +91,17 @@
 }
 
 .sidebar__file-item-name {
+  padding: #{8 / $base-font-size}rem 0;
   .sidebar__file-item--editing & {
     display: none;
   }
 }
 
 .sidebar__file-item-show-options {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+    padding: #{8 / $base-font-size}rem 0;
+  }
   display: none;
   position: absolute;
   right: #{26 / $base-font-size}rem;
@@ -102,6 +112,9 @@
 
 .sidebar__file-item-options {
   @extend %modal;
+  @include themify() {
+    background-color: getThemeColor('modal-background-color');
+  }
   position: absolute;
   top: 95%;
   left: 77%;
@@ -109,7 +122,6 @@
   display: none;
   z-index: 100;
   padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
-  background-color: $light-modal-background-color;
   z-index: 100;
   .sidebar__file-item--open > .file-item__content & {
     display: block;
@@ -120,27 +132,16 @@
   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;
   }
 }
 
-.sidebar__contract {
-  @extend %icon;
-  margin-left: #{10 / $base-font-size}rem;
-  height: #{14 / $base-font-size}rem;
-  & svg {
-    height: #{14 / $base-font-size}rem;
-  }
-  .sidebar--contracted & {
-    display: none;
-  }
-}
-
 .sidebar__expand {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
   height: #{14 / $base-font-size}rem;
   & svg {
     height: #{14 / $base-font-size}rem;
@@ -151,6 +152,20 @@
   }
 }
 
+.sidebar__contract {
+  @include themify() {
+    @extend %icon;
+  }
+  margin-left: #{10 / $base-font-size}rem;
+  height: #{14 / $base-font-size}rem;
+  & svg {
+    height: #{14 / $base-font-size}rem;
+  }
+  .sidebar--contracted & {
+    display: none;
+  }
+}
+
 .sidebar__icons {
   display: flex;
   align-items: center;
@@ -158,14 +173,23 @@
 }
 
 .sidebar__folder-icon {
+  padding: #{8 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
   & g {
-    fill: $light-primary-text-color;
+    @include themify() {
+      fill: map-get($theme-map, 'primary-text-color');
+    }
   }
 }
 
 .sidebar__file-item-icon {
+  padding: #{8 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
+  & g {
+    @include themify() {
+      fill: getThemifyVariable('inactive-text-color');
+    }
+  }
 }
 
 .sidebar__file-item-closed {
@@ -178,6 +202,7 @@
 
 .sidebar__file-item-open {
   @extend .sidebar__file-item-icon;
+  display: inline-block;
   .sidebar__file-item--closed & {
     display: none;
   }

client/styles/components/_sketch-list.scss

@@ -30,5 +30,7 @@
 }
 
 .sketch-list__exit-button {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
 }

client/styles/components/_toast.scss

@@ -10,7 +10,10 @@
 }
 
 .toast__close {
-  @extend %icon;
+  @include themify() {
+    @extend %icon;
+  }
+  color: $toast-text-color;
   & g {
     fill: $toast-text-color; 
   }

client/styles/components/_toolbar.scss

@@ -1,9 +1,11 @@
 .toolbar__play-button {
-	@extend %toolbar-button;
+	@include themify() {
-	margin-right: #{15 / $base-font-size}rem;
+		@extend %toolbar-button;
-	&--selected {
+		&--selected {
-		@extend %toolbar-button--selected;
+			@extend %toolbar-button--selected;
+		}
 	}
+	margin-right: #{15 / $base-font-size}rem;
 	& span {
 		padding-left: #{2 / $base-font-size}rem;
 	}
@@ -14,23 +16,25 @@
 }
 
 .toolbar__stop-button {
-	@extend %toolbar-button;
+	@include themify() {
-	&--selected {
+		@extend %toolbar-button;
-		@extend %toolbar-button--selected;
+		&--selected {
+			@extend %toolbar-button--selected;
+		}
 	}
 }
 
 .toolbar__preferences-button {
-	@extend %toolbar-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;
 	margin-left: auto;
-	&--selected {
-		@extend %toolbar-button--selected;
-	}
-}
-
-.toolbar__shortcut-button {
-
 }
 
 .toolbar__logo {
@@ -44,6 +48,9 @@
 }
 
 .toolbar__project-name-container {
+	@include themify() {
+		border-color: getThemifyVariable('inactive-text-color');
+	}
 	border-left: 2px dashed;
 	margin-left: #{10 / $base-font-size}rem;
 	padding-left: #{10 / $base-font-size}rem;
@@ -53,14 +60,13 @@
 }
 
 .toolbar__project-name {
-	color: $light-inactive-text-color;
+	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+		&:hover {
+		color: getThemifyVariable('primary-text-color');
+		}
+	}
 	cursor: pointer;
-	&:hover {
-		color: $light-primary-text-color;
-	}
-	&:focus {
-		color: $light-inactive-text-color;
-	}
 
 	.toolbar__project-name-container--editing & {
 		display: none;

client/styles/layout/_ide.scss

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

client/styles/main.scss

@@ -1,4 +1,6 @@
 @import 'abstracts/variables';
+@import 'abstracts/functions';
+@import 'abstracts/mixins';
 @import 'abstracts/placeholders';
 
 @import 'base/reset';
@@ -9,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';

server/models/user.js

@@ -15,7 +15,8 @@ const userSchema = new Schema({
     isTabIndent: { type: Boolean, default: false },
     autosave: { type: Boolean, default: true },
     lintWarning: { type: Boolean, default: false },
-    textOutput: { type: Boolean, default: false }
+    textOutput: { type: Boolean, default: false },
+    theme: { type: String, default: 'light' }
   }
 }, { timestamps: true });