Load colors from theme

desktop/sources/links/main.css

@@ -49,12 +49,6 @@ body { background:var(--background) !important; }
 .b_inv { background:var(--b_inv) !important ; ; }
 .icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }
 #dotgrid svg.vector { stroke:var(--f_high) !important; }
-#dotgrid svg.vector #layer_1 { stroke:var(--f_high) !important; }
-#dotgrid svg.vector #layer_2 { stroke:var(--f_med) !important; }
-#dotgrid svg.vector #layer_3 { stroke:var(--f_low) !important; }
-#dotgrid svg.vector #mirror_layer_1 { stroke:var(--f_high) !important; }
-#dotgrid svg.vector #mirror_layer_2 { stroke:var(--f_med) !important; }
-#dotgrid svg.vector #mirror_layer_3 { stroke:var(--f_low) !important; }
 #dotgrid #preview { stroke:var(--f_high) !important; } 
 #dotgrid #cursor { border-color:var(--f_med); }
 #dotgrid #cursor.keyboard { border-color:var(--f_high) !Important; }

desktop/sources/scripts/dotgrid.js

@@ -110,6 +110,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
     this.svg_el.appendChild(this.mirror_el);
 
     this.theme.start();
+    this.tool.start();
     this.guide.start();
     this.interface.start();
 
@@ -438,21 +439,34 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
 
     this.svg_el.style.width = this.width;
     this.svg_el.style.height = this.height;
-    this.svg_el.style.stroke = this.color;
-    this.svg_el.style.strokeWidth = this.tool.style().thickness;
     this.svg_el.style.fill = this.fill ? this.theme.active.f_high : "none";
 
     this.layer_1.style.strokeWidth = this.tool.styles[0].thickness;
-    this.layer_2.style.strokeWidth = this.tool.styles[1].thickness;
-    this.layer_3.style.strokeWidth = this.tool.styles[2].thickness;
-
     this.layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
-    this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
-    this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
-
     this.layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
+    this.layer_1.style.stroke = this.tool.styles[0].color;
+    this.mirror_layer_1.style.strokeWidth = this.tool.styles[0].thickness;
+    this.mirror_layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
+    this.mirror_layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
+    this.mirror_layer_1.style.stroke = this.tool.styles[0].color;
+
+    this.layer_2.style.strokeWidth = this.tool.styles[1].thickness;
+    this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
     this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
+    this.layer_2.style.stroke = this.tool.styles[1].color;
+    this.mirror_layer_2.style.strokeWidth = this.tool.styles[1].thickness;
+    this.mirror_layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
+    this.mirror_layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
+    this.mirror_layer_2.style.stroke = this.tool.styles[1].color;
+
+    this.layer_3.style.strokeWidth = this.tool.styles[2].thickness;
+    this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
     this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
+    this.layer_3.style.stroke = this.tool.styles[2].color;
+    this.mirror_layer_3.style.strokeWidth = this.tool.styles[2].thickness;
+    this.mirror_layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
+    this.mirror_layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
+    this.mirror_layer_3.style.stroke = this.tool.styles[2].color;
 
     // Draw Mirror
     if(this.mirror_index == 1){
@@ -476,7 +490,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
       this.mirror_layer_3.setAttribute("transform","")
     }
 
-    this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")")
+    this.offset_el.setAttribute("transform","translate(0,0)")
 
     this.preview();
     this.render.draw();

desktop/sources/scripts/tool.js

@@ -3,13 +3,20 @@ function Tool()
   this.index = 0;
   this.layers = [[],[],[]];
   this.styles = [
-    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round"},
+    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00"},
-    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round"},
+    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0"},
-    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round"}
+    {thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f"}
   ];
   this.verteces = [];
   this.reqs = {line:2,arc_c:2,arc_r:2,bezier:3,close:0};
 
+  this.start = function()
+  {
+    this.styles[0].color = dotgrid.theme.active.f_high
+    this.styles[1].color = dotgrid.theme.active.f_med
+    this.styles[2].color = dotgrid.theme.active.f_low
+  }
+
   this.reset = function()
   {
     this.layers = [[],[],[]];