diff --git a/editor/extensions/ext-grid.js b/editor/extensions/ext-grid.js
index 0d81847d..5b405240 100644
--- a/editor/extensions/ext-grid.js
+++ b/editor/extensions/ext-grid.js
@@ -96,7 +96,7 @@ svgEditor.addExtension('view_grid', function() {
 		var part = big_int / 10;
 
 		ctx.globalAlpha = 0.2;
-		ctx.strokeStyle = '#000';
+		ctx.strokeStyle = svgEditor.curConfig.gridColor;
 		for (var i = 1; i < 10; i++) {
 			var sub_d = Math.round(part * i) + 0.5;
 			// var line_num = (i % 2)?12:10;
diff --git a/editor/locale/lang.af.js b/editor/locale/lang.af.js
index 37d8cb2d..f5e10c88 100644
--- a/editor/locale/lang.af.js
+++ b/editor/locale/lang.af.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.ar.js b/editor/locale/lang.ar.js
index d1076f1e..e3ed14ef 100644
--- a/editor/locale/lang.ar.js
+++ b/editor/locale/lang.ar.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.az.js b/editor/locale/lang.az.js
index c4350a29..895f1937 100644
--- a/editor/locale/lang.az.js
+++ b/editor/locale/lang.az.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.be.js b/editor/locale/lang.be.js
index 6c201e1f..a2995c90 100644
--- a/editor/locale/lang.be.js
+++ b/editor/locale/lang.be.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.bg.js b/editor/locale/lang.bg.js
index 5b58f568..3ef34a78 100644
--- a/editor/locale/lang.bg.js
+++ b/editor/locale/lang.bg.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.ca.js b/editor/locale/lang.ca.js
index d08a60dd..a94ac09e 100644
--- a/editor/locale/lang.ca.js
+++ b/editor/locale/lang.ca.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.cs.js b/editor/locale/lang.cs.js
index e39f8627..b5161c64 100644
--- a/editor/locale/lang.cs.js
+++ b/editor/locale/lang.cs.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.cy.js b/editor/locale/lang.cy.js
index 4808073b..80dd5857 100644
--- a/editor/locale/lang.cy.js
+++ b/editor/locale/lang.cy.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.da.js b/editor/locale/lang.da.js
index ae209cde..d3de070c 100644
--- a/editor/locale/lang.da.js
+++ b/editor/locale/lang.da.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.de.js b/editor/locale/lang.de.js
index d0e7ad3e..6de1d413 100644
--- a/editor/locale/lang.de.js
+++ b/editor/locale/lang.de.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.el.js b/editor/locale/lang.el.js
index 319ebc3b..500934c0 100644
--- a/editor/locale/lang.el.js
+++ b/editor/locale/lang.el.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.en.js b/editor/locale/lang.en.js
index de63d8b3..71f9b313 100644
--- a/editor/locale/lang.en.js
+++ b/editor/locale/lang.en.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.es.js b/editor/locale/lang.es.js
index 9b3c1aed..0d0294d6 100644
--- a/editor/locale/lang.es.js
+++ b/editor/locale/lang.es.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.et.js b/editor/locale/lang.et.js
index 436c509c..8a74a784 100644
--- a/editor/locale/lang.et.js
+++ b/editor/locale/lang.et.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.fa.js b/editor/locale/lang.fa.js
index 2d4d6aae..e687fb94 100644
--- a/editor/locale/lang.fa.js
+++ b/editor/locale/lang.fa.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.fi.js b/editor/locale/lang.fi.js
index ecec14c0..6bfd66f5 100644
--- a/editor/locale/lang.fi.js
+++ b/editor/locale/lang.fi.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.fr.js b/editor/locale/lang.fr.js
index c30612a7..93670fd7 100644
--- a/editor/locale/lang.fr.js
+++ b/editor/locale/lang.fr.js
@@ -181,7 +181,8 @@ svgEditor.readLang({
 		"base_unit": "Unité de mesure:",
 		"grid": "Grille",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Couleur de la grille"
 	},
 	shape_cats: {
 		"basic": "Basique",
diff --git a/editor/locale/lang.fy.js b/editor/locale/lang.fy.js
index 18655a76..dfc09dea 100644
--- a/editor/locale/lang.fy.js
+++ b/editor/locale/lang.fy.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.ga.js b/editor/locale/lang.ga.js
index 7f069481..6dea5821 100644
--- a/editor/locale/lang.ga.js
+++ b/editor/locale/lang.ga.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.gl.js b/editor/locale/lang.gl.js
index c7be0c9c..739be429 100644
--- a/editor/locale/lang.gl.js
+++ b/editor/locale/lang.gl.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.he.js b/editor/locale/lang.he.js
index 555c9f75..c0e859d2 100755
--- a/editor/locale/lang.he.js
+++ b/editor/locale/lang.he.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.hi.js b/editor/locale/lang.hi.js
index c495cd02..a5f518cc 100644
--- a/editor/locale/lang.hi.js
+++ b/editor/locale/lang.hi.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.hr.js b/editor/locale/lang.hr.js
index 629abb34..72f21f54 100644
--- a/editor/locale/lang.hr.js
+++ b/editor/locale/lang.hr.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.hu.js b/editor/locale/lang.hu.js
index 00006869..cb9d1d09 100644
--- a/editor/locale/lang.hu.js
+++ b/editor/locale/lang.hu.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.hy.js b/editor/locale/lang.hy.js
index 54851b77..dcd52b2c 100644
--- a/editor/locale/lang.hy.js
+++ b/editor/locale/lang.hy.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.id.js b/editor/locale/lang.id.js
index aedfa756..50a7b6c9 100644
--- a/editor/locale/lang.id.js
+++ b/editor/locale/lang.id.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.is.js b/editor/locale/lang.is.js
index 2ef73f71..76966483 100644
--- a/editor/locale/lang.is.js
+++ b/editor/locale/lang.is.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.it.js b/editor/locale/lang.it.js
index 594e5128..7f05734f 100644
--- a/editor/locale/lang.it.js
+++ b/editor/locale/lang.it.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.ja.js b/editor/locale/lang.ja.js
index 27c58d41..35fdc0fd 100644
--- a/editor/locale/lang.ja.js
+++ b/editor/locale/lang.ja.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.ko.js b/editor/locale/lang.ko.js
index 28cced19..eba87753 100644
--- a/editor/locale/lang.ko.js
+++ b/editor/locale/lang.ko.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.lt.js b/editor/locale/lang.lt.js
index 9224941a..60e74bc2 100644
--- a/editor/locale/lang.lt.js
+++ b/editor/locale/lang.lt.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.lv.js b/editor/locale/lang.lv.js
index 76c7dbfd..9053f07b 100644
--- a/editor/locale/lang.lv.js
+++ b/editor/locale/lang.lv.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.mk.js b/editor/locale/lang.mk.js
index 2b0812ee..9eb1c354 100644
--- a/editor/locale/lang.mk.js
+++ b/editor/locale/lang.mk.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.ms.js b/editor/locale/lang.ms.js
index fbdf01bb..15fe0f9a 100644
--- a/editor/locale/lang.ms.js
+++ b/editor/locale/lang.ms.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.mt.js b/editor/locale/lang.mt.js
index 3ba830d8..28f612ac 100644
--- a/editor/locale/lang.mt.js
+++ b/editor/locale/lang.mt.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.nl.js b/editor/locale/lang.nl.js
index 35830347..8dd6acac 100644
--- a/editor/locale/lang.nl.js
+++ b/editor/locale/lang.nl.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.no.js b/editor/locale/lang.no.js
index c1f5cf04..b659197b 100644
--- a/editor/locale/lang.no.js
+++ b/editor/locale/lang.no.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.pl.js b/editor/locale/lang.pl.js
index 00b42661..ba025f9d 100644
--- a/editor/locale/lang.pl.js
+++ b/editor/locale/lang.pl.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.pt-PT.js b/editor/locale/lang.pt-PT.js
index 22a21f91..c0a1ce38 100644
--- a/editor/locale/lang.pt-PT.js
+++ b/editor/locale/lang.pt-PT.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.ru.js b/editor/locale/lang.ru.js
index c2d7e7d9..ab105c91 100644
--- a/editor/locale/lang.ru.js
+++ b/editor/locale/lang.ru.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.sk.js b/editor/locale/lang.sk.js
index 53bc7e50..5dd17b94 100644
--- a/editor/locale/lang.sk.js
+++ b/editor/locale/lang.sk.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.sl.js b/editor/locale/lang.sl.js
index e969a8bb..102a58d4 100644
--- a/editor/locale/lang.sl.js
+++ b/editor/locale/lang.sl.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.sq.js b/editor/locale/lang.sq.js
index afa2b56e..5b189836 100644
--- a/editor/locale/lang.sq.js
+++ b/editor/locale/lang.sq.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.sr.js b/editor/locale/lang.sr.js
index 2866b894..aba72ac5 100644
--- a/editor/locale/lang.sr.js
+++ b/editor/locale/lang.sr.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.sv.js b/editor/locale/lang.sv.js
index 49f6a3b8..a61bbd13 100644
--- a/editor/locale/lang.sv.js
+++ b/editor/locale/lang.sv.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.sw.js b/editor/locale/lang.sw.js
index ec0275a1..0704cb57 100644
--- a/editor/locale/lang.sw.js
+++ b/editor/locale/lang.sw.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.test.js b/editor/locale/lang.test.js
index fe69bc1e..1110de7e 100644
--- a/editor/locale/lang.test.js
+++ b/editor/locale/lang.test.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.th.js b/editor/locale/lang.th.js
index e937da74..4fd53d74 100644
--- a/editor/locale/lang.th.js
+++ b/editor/locale/lang.th.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.tl.js b/editor/locale/lang.tl.js
index 4c820a62..7b0c1f02 100644
--- a/editor/locale/lang.tl.js
+++ b/editor/locale/lang.tl.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.tr.js b/editor/locale/lang.tr.js
index f802615f..c026d13f 100644
--- a/editor/locale/lang.tr.js
+++ b/editor/locale/lang.tr.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.uk.js b/editor/locale/lang.uk.js
index c909fb97..1867de4a 100644
--- a/editor/locale/lang.uk.js
+++ b/editor/locale/lang.uk.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.vi.js b/editor/locale/lang.vi.js
index 8f8119d2..39940a98 100644
--- a/editor/locale/lang.vi.js
+++ b/editor/locale/lang.vi.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.yi.js b/editor/locale/lang.yi.js
index 2233da0f..09b88185 100644
--- a/editor/locale/lang.yi.js
+++ b/editor/locale/lang.yi.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.zh-CN.js b/editor/locale/lang.zh-CN.js
index d4c0b0a5..e5d84914 100644
--- a/editor/locale/lang.zh-CN.js
+++ b/editor/locale/lang.zh-CN.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.zh-HK.js b/editor/locale/lang.zh-HK.js
index 06a55a78..6d744b6c 100644
--- a/editor/locale/lang.zh-HK.js
+++ b/editor/locale/lang.zh-HK.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/lang.zh-TW.js b/editor/locale/lang.zh-TW.js
index 5d32e0fb..c7f33e6f 100644
--- a/editor/locale/lang.zh-TW.js
+++ b/editor/locale/lang.zh-TW.js
@@ -182,7 +182,8 @@ svgEditor.readLang({
 		"base_unit": "Base Unit:",
 		"grid": "Grid",
 		"snapping_onoff": "Snapping on/off",
-		"snapping_stepsize": "Snapping Step-Size:"
+		"snapping_stepsize": "Snapping Step-Size:",
+		"grid_color": "Grid color"
 	},
 	shape_cats: {
 		"basic": "Basic",
diff --git a/editor/locale/locale.js b/editor/locale/locale.js
index 1225d01c..fdde2eb0 100644
--- a/editor/locale/locale.js
+++ b/editor/locale/locale.js
@@ -137,7 +137,8 @@ var svgEditor = (function($, Editor) {
 			
 			svginfo_grid_settings: config.grid,
 			svginfo_snap_onoff: config.snapping_onoff,
-			svginfo_snap_step: config.snapping_stepsize
+			svginfo_snap_step: config.snapping_stepsize,
+			svginfo_grid_color: config.grid_color
 		}, true);
 		
 		// Shape categories
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 59a082c9..2884e5ef 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -529,7 +529,7 @@
 						<option value="5,2,2,2">- .</option>
 						<option value="5,2,2,2,2,2">- ..</option>
 					</select>
-				</label>	
+				</label>
 
  				<div class="stroke_tool dropdown" id="stroke_linejoin">
 					<div id="cur_linejoin" title="Linejoin: Miter"></div>
@@ -717,6 +717,7 @@
 				<legend id="svginfo_grid_settings">Grid</legend>
 				<label><span id="svginfo_snap_onoff">Snapping on/off</span><input type="checkbox" value="snapping_on" id="grid_snapping_on"></label>
 				<label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="10"/></label>
+				<label><span id="svginfo_grid_color">Grid color:</span> <input type="text" id="grid_color" size="3" value="#000"/></label>
 			</fieldset>
 
 			<fieldset id="units_rulers">
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 0729fd1b..c8f63df2 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -2705,9 +2705,9 @@
 				if (url) {
 					$('#canvas_bg_url').val(url);
 				}
-				$('grid_snapping_step').attr('value', curConfig.snappingStep);
-
 				$('#grid_snapping_on').prop('checked', curConfig.gridSnapping);
+				$('#grid_snapping_step').attr('value', curConfig.snappingStep);
+				$('#grid_color').attr('value', curConfig.gridColor);
 
 				$('#svg_prefs').show();
 			};
@@ -2807,6 +2807,7 @@
 				// set grid setting
 				curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
 				curConfig.snappingStep = $('#grid_snapping_step').val();
+				curConfig.gridColor = $('#grid_color').val();
 				curConfig.showRulers = $('#show_rulers')[0].checked;
 
 				$('#rulers').toggle(curConfig.showRulers);
@@ -4127,17 +4128,21 @@
 					$('#show_rulers')[0].checked = true;
 				}
 
-				if (curConfig.gridSnapping) {
-					$('#grid_snapping_on')[0].checked = true;
-				}
-
 				if (curConfig.baseUnit) {
 					$('#base_unit').val(curConfig.baseUnit);
 				}
 
+				if (curConfig.gridSnapping) {
+					$('#grid_snapping_on')[0].checked = true;
+				}
+
 				if (curConfig.snappingStep) {
 					$('#grid_snapping_step').val(curConfig.snappingStep);
 				}
+
+				if (curConfig.gridColor) {
+					$('#grid_color').val(curConfig.gridColor);
+				}
 			});
 
 			// init SpinButtons