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

outputframe-app/app.less

@@ -11,6 +11,14 @@ html, body {
 
 body {
     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
-    
-    background-color: #e3e3e3;
+    margin: 10px;
+    background-color: #f0f0f0;
+}
+
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #272727;
+        color: white;
+    }
 }

outputframe-app/elements/render-canvas/render-canvas.less

@@ -17,4 +17,12 @@ render-canvas canvas {
     transform: translate(-50%, -50%);
     border: 1px solid #c2c2c2;
     background-color: white;
+}
+
+
+@media (prefers-color-scheme: dark) {
+    render-canvas canvas {
+        background-color: #2c2c2c;
+        border-color: #3a3a3a;
+    }
 }

outputframe-app/elements/render-canvas/render-canvas.ts

@@ -10,11 +10,14 @@ export class RenderCanvas extends BaseElement {
         width: 400,
         heigt: 400
     }
+    
+    public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
     onInit(): void {
         this.canvas = document.createElement("canvas");
         this.ctx = <CanvasRenderingContext2D>this.canvas.getContext("2d");
         this.appendChild(this.canvas);
+        this.canvas.style.display = "none";
 
         window.addEventListener("resize", () => {
             this.handleCanvasResize();
@@ -25,8 +28,8 @@ export class RenderCanvas extends BaseElement {
 
     private handleCanvasResize() {
         if (this.parentElement && this.canvas) {
-            this.width = this.parentElement.clientWidth;
-            this.height = this.parentElement.clientHeight;
+            this.width = this.parentElement.clientWidth - 20;
+            this.height = this.parentElement.clientHeight - 20;
 
             var smallest = Math.min(this.width, this.height);
 
@@ -38,9 +41,10 @@ export class RenderCanvas extends BaseElement {
     }
 
     drawPoly(points: { x: number, y: number }[]) {
-        if (this.ctx) {
+        if (this.ctx && this.canvas) {
+            this.canvas.style.display = "block";
             this.ctx.fillStyle = "rgba(0,0,0,0)";
-            this.ctx.strokeStyle = "rgba(0,0,0,1)";
+            this.ctx.strokeStyle = this.getColor();
             this.ctx.beginPath();
 
             for (var i = 0; i < points.length; i++) {
@@ -60,12 +64,16 @@ export class RenderCanvas extends BaseElement {
         }
     }
 
+    getColor() {
+        return this.prefersDarkScheme.matches ? 'rgba(255,255,255,1)' : 'rgba(0,0,0,1)';
+    }
+
     drawRect(x: number, y: number, width: number, height: number) {
         this.drawPoly([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }]);
     }
 
     unitsToPx(unitNumber: number) {
-        var newPPU = (this.width / this.units.width);
+        var newPPU = Math.min(this.width, this.height) / this.units.width;
         return unitNumber * newPPU;
     }