PG - Theme finished

Playground/css/index.css

@@ -22,10 +22,11 @@ body {
     background-repeat: no-repeat;
     background-position: 50%;
 }
+.wrapper .gutter.light {
+    background-color: #f7f7f7;
+}
 .wrapper .gutter.dark {
     background-color: #333;
-    background-repeat: no-repeat;
-    background-position: 50%;
 }
 
 .wrapper .gutter:hover {
@@ -63,7 +64,6 @@ body {
 .navbar {
     height: 60px;
     width: 100%;
-    background-color: #efefef;
     font-family: "Montserrat";
     font-weight: 400;
     -webkit-user-select: none;
@@ -75,6 +75,9 @@ body {
 .navbar.dark {
     background-color: #333;
 }
+.navbar.light {
+    background-color: #efefef;
+}
 .navbar .title {
     height: 60px;
     padding-left: 10px;
@@ -145,12 +148,10 @@ body {
     height: 35px;
     line-height: 35px;
     padding: 0px 5px 0px 5px;
-    background-color: white;
     text-align: center;
-    color: #15A4FA;
 }
 
-.navbar .select .toDisplay .option:hover {
+.navbar .select .toDisplay .option.light:hover {
     cursor: pointer;
     background-color: #d9d9d9;
 }
@@ -159,7 +160,12 @@ body {
     background-color: #333;
     color: white;
 }
+.navbar .select .toDisplay .option.light {
+    background-color: white;
+    color: #15A4FA;
+}
 .navbar .select .toDisplay .option.dark:hover {
+    cursor: pointer;
     background-color: #555;
 }
 
@@ -171,7 +177,6 @@ body {
     top: 32px;
     width:550px;
     max-height:350px;
-    background-color: white;
     right:0;
     position:absolute;
     font-size:0.8em;
@@ -179,6 +184,11 @@ body {
     
 }
 
+.navbar .select .toDisplayBig.light {
+    background-color: white;    
+    color: #15A4FA;
+}
+
 .navbar .select .toDisplayBig.dark {
     background-color: #333;    
     color:white;
@@ -196,6 +206,8 @@ body {
 
 .navbar .select .toDisplayBig ul li:hover {
     cursor: pointer;
+}
+.navbar .select .toDisplayBig ul li.light:hover {
     background-color: #d9d9d9;
 }
 .navbar .select .toDisplayBig ul li.dark:hover {
@@ -205,13 +217,16 @@ body {
 
 .navbar .select .toDisplayBig a {
     text-decoration: none;
-    color: #15A4FA;
 }
 
 .navbar .select .toDisplayBig a.dark {
     color: white;
 }
 
+.navbar .select .toDisplayBig a.light {
+    color: #15A4FA;
+}
+
 
 
 .navbar .check:after {
@@ -257,7 +272,6 @@ body {
 .navbarBottom {
     height:30px;
     width:100%;
-    background-color: #efefef;
     line-height:30px;
     position:relative;
     font-family: 'Montserrat';
@@ -265,6 +279,9 @@ body {
 .navbarBottom.dark {
     background-color: #333;
 }
+.navbarBottom.light {
+    background-color: #efefef;
+}
 
 .navbarBottom #statusBar {
     line-height:30px;

Playground/js/index.js

@@ -508,6 +508,13 @@
          */
         var toggleTheme = function (theme) {
             // Monaco
+            var vsTheme;
+            if (theme == 'dark') {
+                vsTheme = 'vs-dark'
+            } else {
+                vsTheme = 'vs'
+            }
+
             let oldCode = jsEditor.getValue();
             jsEditor.dispose();
             jsEditor = monaco.editor.create(document.getElementById('jsEditor'), {
@@ -520,7 +527,7 @@
                 scrollBeyondLastLine: false,
                 automaticLayout: true,
                 readOnly: false,
-                theme: "vs-" + theme,
+                theme: vsTheme,
                 contextmenu: false
             });
             jsEditor.setValue(oldCode);
@@ -529,9 +536,14 @@
             for (var obj of elementToTheme) {
                 let domObjArr = document.querySelectorAll(obj);
                 for (let domObj of domObjArr) {
+                    domObj.classList.remove('light');
+                    domObj.classList.remove('dark');
                     domObj.classList.add(theme);
                 }
             }
+
+            localStorage.setItem("bjs-playground-theme", theme);
+
         }
 
         var toggleDebug = function () {
@@ -565,7 +577,10 @@
         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);
+
+        // Restore theme
+        var theme = localStorage.getItem("bjs-playground-theme") || 'light';
+        toggleTheme(theme);
 
         //Navigation Overwrites
         var exitPrompt = function (e) {