diff --git a/package-lock.json b/package-lock.json
index 479f19e0..127a7350 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8277,7 +8277,7 @@
             }
         },
         "node_modules/debug": {
-            "resolved": "https://github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a"
+            "resolved": "git+ssh://git@github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a"
         },
         "node_modules/decamelize": {
             "version": "1.2.0",
@@ -8771,7 +8771,7 @@
             }
         },
         "node_modules/document-register-element": {
-            "resolved": "https://github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90"
+            "resolved": "git+ssh://git@github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90"
         },
         "node_modules/dom-converter": {
             "version": "0.2.0",
@@ -25608,7 +25608,7 @@
         },
         "node_modules/three-bmfont-text": {
             "version": "2.4.0",
-            "resolved": "https://github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733",
+            "resolved": "git+ssh://git@github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733",
             "integrity": "sha512-lIMa1n+QKNU1f/LZgtS1oUGpoop3MuVXrUr5ybZOUR3+Jk//zjqScnQpHml6MWyvZzL8A5/1Hd8Tsqd3M1kudA==",
             "license": "MIT",
             "dependencies": {
@@ -25623,7 +25623,7 @@
         },
         "node_modules/three-buffer-vertex-data": {
             "version": "1.1.0",
-            "resolved": "https://github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c",
+            "resolved": "git+ssh://git@github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c",
             "integrity": "sha512-ZPCCbGfueRzd2/YwH136UnVN+N11Mvxu7uPaEzIdtuk0m5HPs1LGXOM5hOkpxamjvqSC6MDJ3nd11grGi7sMKw==",
             "license": "MIT",
             "dependencies": {
@@ -34724,7 +34724,7 @@
             }
         },
         "debug": {
-            "version": "https://github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a",
+            "version": "git+ssh://git@github.com/ngokevin/debug.git#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a",
             "from": "debug@github:ngokevin/debug#noTimestamp"
         },
         "decamelize": {
@@ -35129,7 +35129,7 @@
             }
         },
         "document-register-element": {
-            "version": "https://github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90",
+            "version": "git+ssh://git@github.com/dmarcos/document-register-element.git#8ccc532b7f3744be954574caf3072a5fd260ca90",
             "from": "document-register-element@github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90"
         },
         "dom-converter": {
@@ -48643,7 +48643,7 @@
             "integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
         },
         "three-bmfont-text": {
-            "version": "https://github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733",
+            "version": "git+ssh://git@github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733",
             "integrity": "sha512-lIMa1n+QKNU1f/LZgtS1oUGpoop3MuVXrUr5ybZOUR3+Jk//zjqScnQpHml6MWyvZzL8A5/1Hd8Tsqd3M1kudA==",
             "from": "three-bmfont-text@github:dmarcos/three-bmfont-text#21d017046216e318362c48abd1a48bddfb6e0733",
             "requires": {
@@ -48657,7 +48657,7 @@
             }
         },
         "three-buffer-vertex-data": {
-            "version": "https://github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c",
+            "version": "git+ssh://git@github.com/dmarcos/three-buffer-vertex-data.git#69378fc58daf27d3b1d930df9f233473e4a4818c",
             "integrity": "sha512-ZPCCbGfueRzd2/YwH136UnVN+N11Mvxu7uPaEzIdtuk0m5HPs1LGXOM5hOkpxamjvqSC6MDJ3nd11grGi7sMKw==",
             "from": "three-buffer-vertex-data@dmarcos/three-buffer-vertex-data#69378fc58daf27d3b1d930df9f233473e4a4818c",
             "requires": {
diff --git a/src/actions/userActions.js b/src/actions/userActions.js
index 6c9be3ba..951d6437 100644
--- a/src/actions/userActions.js
+++ b/src/actions/userActions.js
@@ -6,6 +6,10 @@ export function updateFontSize(fontSize){
     return{ type: types.UPDATE_FONT_SIZE, fontSize };
 }
 
+export function updateTheme(theme) {
+    return { type: types.UPDATE_THEME, theme };
+}
+
 export function updateUserSettings(id,settings){
     return ()=>{
         if(id){
@@ -43,5 +47,6 @@ export default {
     updateFontSize,
     asyncUserSettings,
     syncUserSettings,
-    updateUserSettings
+    updateUserSettings,
+    updateTheme
 };
\ No newline at end of file
diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js
index 842f512b..627bb1dd 100644
--- a/src/components/editor/Editor.js
+++ b/src/components/editor/Editor.js
@@ -2,6 +2,12 @@ import React, { Component } from "react";
 import AceEditor from "react-ace";
 import "brace/mode/javascript";
 import "brace/theme/github";
+import "brace/theme/monokai";
+import "brace/theme/eclipse";
+import "brace/theme/xcode";
+import "brace/theme/dracula";
+import "brace/theme/gruvbox";
+
 import "brace/ext/searchbox";
 import "brace/ext/language_tools";
 
@@ -10,6 +16,7 @@ import KeyboardShortcut from "./KeyboardShortcut.js";
 import { browserType } from "../../utils/browserType";
 import FontSize from "./FontSize.js";
 import copy from "copy-to-clipboard";
+import ThemeSelector from "./Theme.js";
 
 /**
  * Editor is a React Component that create the Ace Editor in the DOM.
@@ -101,7 +108,8 @@ class Editor extends Component {
                     name="ace-editor"
                     // eslint-disable-next-line
                     ref="aceEditor"
-                    theme="github"
+                    theme={this.props.settings.theme}
+                    background="black"
                     commands={[{
                         name: "copyLine",
                         bindKey: {win: "Ctrl-L", mac: "Command-L"},
@@ -121,8 +129,13 @@ class Editor extends Component {
                     enableLiveAutocompletion={true}
                     onLoad={this.onLoad}
                 />
-                { browserType() === "desktop" ? <div><KeyboardShortcut/> 
-                    <FontSize userActions={this.props.userActions} settings={this.props.settings} refreshText={this.refreshText}/></div> : null }
+                { browserType() === "desktop" ? <div>
+                    <KeyboardShortcut/> 
+                    <FontSize userActions={this.props.userActions} settings={this.props.settings} refreshText={this.refreshText}/>
+                    <ThemeSelector userActions={this.props.userActions} settings={this.props.settings}/>
+                </div> : null }
+                
+
             </div>
         );
     }
diff --git a/src/components/editor/Theme.js b/src/components/editor/Theme.js
new file mode 100644
index 00000000..f517c867
--- /dev/null
+++ b/src/components/editor/Theme.js
@@ -0,0 +1,41 @@
+import React from "react";
+import {
+    Button,
+    Icon,
+    Select,
+    Tooltip,
+} from "@material-ui/core";
+import "../../css/KeyboardShortcut.css";
+export default function ThemeSelector(props) {
+    const handleThemeEditorUpdate = (e) => {
+        props.userActions.updateTheme(e.target.value);
+    };
+
+    const themes = [
+        "github", "eclipse", "xcode", "dracula", "gruvbox", "monokai"
+    ];
+
+    return (
+        <div className="theme-div">
+            <Tooltip title="Select Editor Theme">
+                <Button className="font-button"
+                    id="font-size"
+                    variant="contained"
+                    size="small"
+                    color="white"
+                >
+                    <Icon className="material-icons">format_color_fill</Icon>
+                    <Select
+                        className="theme-select"
+                        labelId="input-label"
+                        defaultValue="github"
+                        value={props.settings.themeColor}
+                        onChange={handleThemeEditorUpdate}>
+                        {themes.map(theme=>(<option value={theme}>{theme}</option>))}
+                    </Select>
+                </Button>
+            </Tooltip>
+        </div>
+    );
+}
+
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
index 3ff41bdc..5392cbee 100644
--- a/src/constants/ActionTypes.js
+++ b/src/constants/ActionTypes.js
@@ -50,5 +50,6 @@ export const DELETE_COLLECTION = "DELETE_COLLECTION";
 
 export const SYNC_USER_SETTINGS = "SYNC_USER_SETTINGS";
 export const UPDATE_FONT_SIZE = "UPDATE_FONT_SIZE";
+export const UPDATE_THEME= "UPDATE_THEME";
 
 export const LOAD_REF_EX = "LOAD_REF_EX";
diff --git a/src/css/KeyboardShortcut.css b/src/css/KeyboardShortcut.css
index 65b0437f..61b344f5 100644
--- a/src/css/KeyboardShortcut.css
+++ b/src/css/KeyboardShortcut.css
@@ -32,7 +32,21 @@
 
 .font {
     display: inline-block;
-    margin-left: 4px;
+    margin-left: 5px;
+}
+
+#form-control {
+    margin-top: 0;
+}
+
+.theme-div {
+    display: inline-block;
+    margin-left: 5px;
+    margin-top: 0;
+}
+
+.theme-div > button {
+    width: 140px;
 }
 
 .whole-keyboard {
@@ -43,4 +57,9 @@
 .select {
     color: white !important;
     margin-left: 5px;
+}
+
+.theme-select {
+    color: black !important;
+    margin-left: 5px;
 }
\ No newline at end of file
diff --git a/src/reducers/user.js b/src/reducers/user.js
index 7c8c954b..0580e70e 100644
--- a/src/reducers/user.js
+++ b/src/reducers/user.js
@@ -3,7 +3,8 @@ import * as types from "../constants/ActionTypes";
 const initial_state = {
     user: null,
     settings: {
-        fontSize: 12
+        fontSize: 12,
+        theme: "github",
     }
 };
 
@@ -43,6 +44,14 @@ export default function user(state = initial_state, action) {
                     fontSize: action.fontSize
                 }
             };
+        case types.UPDATE_THEME:
+            return{
+                ...state,
+                settings: {
+                    ...state.settings,
+                    theme: action.theme
+                }
+            };
         default:
             return state;
     }
diff --git a/src/tests/App.test.js b/src/tests/App.test.js
index d55bd5c6..a1c26ee4 100644
--- a/src/tests/App.test.js
+++ b/src/tests/App.test.js
@@ -56,7 +56,8 @@ const generateMockProps = () => {
         },
         user: null,
         settings: {
-            fontSize: 12
+            fontSize: 12,
+            theme: "github",
         },
         scene: {
             name: "",
@@ -281,7 +282,8 @@ describe("User Reducer", () => {
             {
                 user: null,
                 settings : {
-                    fontSize: 12
+                    fontSize: 12,
+                    theme: "github"
                 }
             }
         );
@@ -298,7 +300,8 @@ describe("User Reducer", () => {
             {
                 user: testUser,
                 settings:{
-                    fontSize: 12
+                    fontSize: 12,
+                    theme: "github"
                 }
             }
         );
@@ -312,7 +315,8 @@ describe("User Reducer", () => {
         ).toEqual({
             user: null,
             settings:{
-                fontSize: 12
+                fontSize: 12,
+                theme: "github"
             }
         }
         );