added dark mode and margin changes

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