PG - Theme dark/light created

Playground/css/index.css

@@ -22,6 +22,12 @@ body {
     background-repeat: no-repeat;
     background-position: 50%;
 }
+.wrapper .gutter.dark {
+    background-color: #333;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
 .wrapper .gutter:hover {
     cursor: ew-resize;
 }
@@ -66,6 +72,9 @@ body {
     user-select: none;
     position: relative;
 }
+.navbar.dark {
+    background-color: #333;
+}
 .navbar .title {
     height: 60px;
     padding-left: 10px;
@@ -100,6 +109,7 @@ body {
     font-size: 0.85em;
     border-radius: 3px;
 }
+
 .navbar .button i {
     margin-left: 10px;
 }
@@ -139,11 +149,20 @@ body {
     text-align: center;
     color: #15A4FA;
 }
+
 .navbar .select .toDisplay .option:hover {
     cursor: pointer;
     background-color: #d9d9d9;
 }
 
+.navbar .select .toDisplay .option.dark {
+    background-color: #333;
+    color: white;
+}
+.navbar .select .toDisplay .option.dark:hover {
+    background-color: #555;
+}
+
 .navbar .select .toDisplayBig {
     border: 1px solid #7283a0;
     border-radius: 5px;
@@ -159,6 +178,12 @@ body {
     display: none;
     
 }
+
+.navbar .select .toDisplayBig.dark {
+    background-color: #333;    
+    color:white;
+}
+
 .navbar .select .toDisplayBig ul {
     column-count: 3;        
     padding:0;
@@ -173,11 +198,20 @@ body {
     cursor: pointer;
     background-color: #d9d9d9;
 }
+.navbar .select .toDisplayBig ul li.dark:hover {
+    background-color: #555;
+}
+
+
 .navbar .select .toDisplayBig a {
     text-decoration: none;
     color: #15A4FA;
 }
 
+.navbar .select .toDisplayBig a.dark {
+    color: white;
+}
+
 
 
 .navbar .check:after {
@@ -228,6 +262,9 @@ body {
     position:relative;
     font-family: 'Montserrat';
 }
+.navbarBottom.dark {
+    background-color: #333;
+}
 
 .navbarBottom #statusBar {
     line-height:30px;

Playground/index.html

@@ -91,8 +91,8 @@
             </div>
             <div class="button select">Theme
                 <div class="toDisplay">
-                    <div class="option">Dark</div>
-                    <div class="option">Light</div>
+                    <div class="option" id="darkTheme">Dark</div>
+                    <div class="option" id="lightTheme">Light</div>
                 </div>
             </div>
 

Playground/js/index.js

@@ -1,5 +1,8 @@
 (function () {
     var jsEditor;
+    var fontSize = 14;
+
+    var elementToTheme = ['.wrapper .gutter', '.navbar', '.navbar .select .toDisplay .option', '.navbar .select .toDisplayBig', '.navbar .select .toDisplayBig a', '.navbar .select .toDisplayBig ul li', '.navbarBottom'];
 
     var run = function () {
         var blockEditorChange = false;
@@ -463,6 +466,7 @@
 
         // Fonts
         setFontSize = function (size) {
+            fontSize = size;
             document.querySelector(".view-lines").style.fontSize = size + "px";
             document.getElementById("currentFontSize").innerHTML = "Font: " + size;
         };
@@ -499,6 +503,37 @@
             }
         }
 
+        /**
+         * Toggle the dark theme
+         */
+        var toggleTheme = function (theme) {
+            // Monaco
+            let oldCode = jsEditor.getValue();
+            jsEditor.dispose();
+            jsEditor = monaco.editor.create(document.getElementById('jsEditor'), {
+                value: "",
+                language: "javascript",
+                lineNumbers: true,
+                tabSize: "auto",
+                insertSpaces: "auto",
+                roundedSelection: true,
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                readOnly: false,
+                theme: "vs-" + theme,
+                contextmenu: false
+            });
+            jsEditor.setValue(oldCode);
+            setFontSize(fontSize);
+
+            for (var obj of elementToTheme) {
+                let domObjArr = document.querySelectorAll(obj);
+                for (let domObj of domObjArr) {
+                    domObj.classList.add(theme);
+                }
+            }
+        }
+
         var toggleDebug = function () {
             var debugButton = document.getElementById("debugButton");
             var scene = engine.scenes[0];
@@ -528,6 +563,9 @@
         document.getElementById("editorButton").addEventListener("click", toggleEditor);
         document.getElementById("debugButton").addEventListener("click", toggleDebug);
         document.getElementById("metadataButton").addEventListener("click", toggleMetadata);
+        document.getElementById("darkTheme").addEventListener("click", toggleTheme.bind(this, 'dark'));
+        document.getElementById("lightTheme").addEventListener("click", toggleTheme.bind(this, 'light'));
+        // document.getElementById("lightTheme").addEventListener("click", toggleLightTheme);
 
         //Navigation Overwrites
         var exitPrompt = function (e) {