Light Theme

css/common.css

@@ -5,6 +5,21 @@ html {
 body {
   background-color: #2d2d30;
   color: #ccc;
+  transition: all 2s;
+}
+
+a {
+  color: mediumpurple;
+  text-decoration: underline;
+}
+
+.light-theme {
+  background-color: #eee;
+  color: #333;
+}
+
+.light-theme a {
+  color: blue;
 }
 
 .half-screen {
@@ -25,29 +40,12 @@ body {
   height: 95vh;
 }
 
-textarea {
-  width: 100%;
-  height: 100%;
-  min-width: 250px;
-  background-color: #1e1e1e;
-  border: none;
-  color: #ccc;
-  font-size: 1.2rem;
-  padding: 10px;
-  font-family: Consolas, monospace;
-}
-
-::placeholder {
-  color: #818180;
-}
-
-.left h1 {
-  /* padding-left: 20px; */
+#text-editor-container {
+  transition: all 2s;
 }
 
 .instructions {
   padding-right: 20px;
-  /* padding-left: 20px; */
   font-size: 1.2rem;
 }
 
@@ -65,30 +63,32 @@ textarea {
     padding: 1rem;
 }
 
-a {
-  color: mediumpurple;
-  text-decoration: underline;
-}
-
 .btn-container {
   display: flex;
-  /* margin-left: 20px; */
 }
 
-.btn {
+.btn,
+.light-theme .btn {
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #555;
-  border: 1px #000 solid;
+  /* border: 1px #000 solid; */
+  border: none;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   color: #eee;
   font-size: 1.5rem;
   cursor: pointer;
   font-family: monospace;
+  transition: all 2s;
+}
+
+.light-theme .btn {
+  background-color: #fff;
+  color: #000;
 }
 
 .contributing p {

index.html

@@ -25,6 +25,9 @@ <h1>Speech Programmer</h1>
             Clear Code
           </button>
           <a class="btn readme" href='./readme.html' target="_blank">Readme</a>
+          <button class="btn" id="changeThemeButton" onClick="changeTheme(event)">
+            Change Theme
+          </button>
       </div>
 
       <div class="contributing">

js/buttonFunctions.js

@@ -24,3 +24,15 @@ function startStopButton(event) {
         recognition.stop();
     }
 }
+
+// function to switch between light and dark themes
+function changeTheme(event) {
+
+  // add light-theme css to body
+  document.body.classList.toggle('light-theme');
+
+  // change theme of monaco editor with a delay
+  setTimeout(function() {
+    programTextArea._themeService.getTheme().id === 'vs vs' ? monaco.editor.setTheme('vs-dark') : monaco.editor.setTheme('vs-light');
+  }, 1000);
+}

js/monacoEditor.js

@@ -20,8 +20,8 @@ require(["vs/editor/editor.main"], function () {
         theme: 'vs-dark',
         formatOnType: true,
         formatOnPaste: true,
+        automaticLayout: true,
       });
 
-
       programTextArea = editor;
 });