added dark mode and margin changes

codeeditor-app/app.html

@@ -6,6 +6,6 @@
         <code-editor style="min-width: 50%; max-width: 50%;"></code-editor>
         <output-frame></output-frame>
     </div>
-    <div class="flex-shrink section bottom">methods: rect, box, center, width, height</div>
+    <div class="flex-shrink section bottom">methods: rect, box, center, width, height, rand</div>
 </div>
 <notification-bubbles></notification-bubbles>

codeeditor-app/app.less

@@ -60,7 +60,27 @@ body {
 }
 
 .section.bottom {
+    padding: 10px;
     border-top: 1px solid #c2c2c2;
-    font-size: 16px;
+    font-size: 14px;
     text-align: right;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #1e1e1e;
+    }
+
+    .section {
+        color: white;
+        background: #2e2e2e; 
+    }
+
+    .section.top {
+        border-color: #292929;
+    }
+    
+    .section.bottom {
+        border-color: #292929;
+    }
 }

codeeditor-app/elements/code-editor/code-editor.ts

@@ -13,6 +13,7 @@ export class CodeEditor extends BaseElement {
 
         this.initWorkers();
 
+        const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
         var editor = monaco.editor.create(this, {
             value: this.input,
@@ -22,7 +23,8 @@ export class CodeEditor extends BaseElement {
             minimap: {
                 enabled: false
             },
-            autoIndent: "full"
+            autoIndent: "full",
+            theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-white'
         });
 
         monaco.languages.registerCompletionItemProvider("javascript", {

codeeditor-app/elements/code-editor/injects/editor-init.txt

@@ -1,20 +1,20 @@
-var myDiv = document.createElement("div");
+const myDiv = document.createElement("div");
 myDiv.innerText = "hello moto";
 
 document.body.appendChild(myDiv);
 
 
-var i = 0;
+let i = 0;
 
 while (i < 10) {
     console.log("hello " + i);
     i++;
 }
 
-var obj = { hello: true, moto: "enabled" };
+const obj = { hello: true, moto: "enabled" };
 
 console.log(obj);
 
 rect(10, 10, 100, 100);
-rect(rand(10, 30), rand(10, 30), 100, 100);
-rect(30, 30, 100, 100);
+rect(rand(20, 70), rand(20, 70), 100, 100);
+rect(80, 80, 100, 100);

codeeditor-app/elements/notification-bubbles/notification-bubble.less

@@ -35,4 +35,35 @@ notification-bubble.syntax-error {
     background-color: #d15353;
     font-size: 22px;
     padding: 30px;
+}
+
+@media (prefers-color-scheme: dark) {
+    notification-bubble {
+        color: white;
+    }
+
+    notification-bubble.log {
+        background-color: #242424;
+        border-color: #202020;
+    }
+    
+    notification-bubble.info {
+        background-color: #77772e;
+        border-color: #66662f;
+    }
+    
+    notification-bubble.warn {
+        background-color: #928800;
+        border-color: #857c00;
+    }
+    
+    notification-bubble.error {
+        background-color: #920000;
+        border-color: #7c0000;
+    }
+    
+    notification-bubble.syntax-error {
+        background-color: #470000;
+        background-color: #2b0000;
+    }
 }