Editor Theme Selection

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
 };

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>
         );
     }

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>
+    );
+}
+

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";

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;
 }

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;
     }

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"
             }
         }
         );