added dark mode and margin changes

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