user.css

* Add a warning about updates.
* Add alternative color palettes.
* Change background color (pure dark gray).

data/default.css

@@ -1,9 +1,11 @@
 /*
- * Except for the font, you don't need to restart the extension.
- * Just save this file as ~/.local/share/drawOnYourScreen/user.css and the changes will be applied for your next brushstroke.
+ * WARNING : user.css may be obsolete after an extension update.
  *
  * ~/.local/share/drawOnYourScreen/user.css file is automatically generated by activating "Edit style".
- * Delete ~/.local/share/drawOnYourScreen/user.css file to retrieve default drawing style.
+ * Delete ~/.local/share/drawOnYourScreen/user.css file to retrieve the default drawing style.
+ *
+ * Except for the font, you don't need to restart the extension.
+ * Just save this file as ~/.local/share/drawOnYourScreen/user.css and the changes will be applied for your next brushstroke.
  *
  * line-join (no string):
  * 0 : miter, 1 : round, 2 : bevel
@@ -40,7 +42,7 @@
     /*-drawing-dash-array-on: 5px;*/
     /*-drawing-dash-array-off: 15px;*/
     /*-drawing-dash-offset: 0px;*/
-    -drawing-background-color: #2e3436;
+    -drawing-background-color: #2e2e2e;
     -grid-overlay-gap: 10px;
     -grid-overlay-line-width: 0.4px;
     -grid-overlay-interline-width: 0.2px;
@@ -64,3 +66,85 @@
     -drawing-color8: Gray;
     -drawing-color9: Black;
 }
+
+/*
+Example of alternative palettes from GNOME HIG Colors.
+https://developer.gnome.org/hig/stable/icon-design.html
+
+The last uncommented palette wins.
+*/
+
+/* lighter */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb(153, 193, 241);
+    -drawing-color2: rgb(143, 240, 164);
+    -drawing-color3: rgb(249, 240, 107);
+    -drawing-color4: rgb(255, 190, 111);
+    -drawing-color5: rgb(246,  97,  81);
+    -drawing-color6: rgb(220, 138, 221);
+    -drawing-color7: rgb(205, 171, 143);
+    -drawing-color8: rgb(255, 255, 255);
+    -drawing-color9: rgb(119, 118, 123);
+}
+*/
+
+/* light */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 98, 160, 241);
+    -drawing-color2: rgb( 87, 227, 137);
+    -drawing-color3: rgb(248, 228,  92);
+    -drawing-color4: rgb(255, 163,  72);
+    -drawing-color5: rgb(237,  51,  59);
+    -drawing-color6: rgb(192,  97, 203);
+    -drawing-color7: rgb(181, 131,  90);
+    -drawing-color8: rgb(246, 245, 244);
+    -drawing-color9: rgb( 94,  92, 100);
+}
+*/
+
+/* normal */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 53, 132, 228);
+    -drawing-color2: rgb( 51, 209, 122);
+    -drawing-color3: rgb(246, 211,  45);
+    -drawing-color4: rgb(255, 120,   0);
+    -drawing-color5: rgb(224,  27,  36);
+    -drawing-color6: rgb(145,  65, 172);
+    -drawing-color7: rgb(152, 106,  68);
+    -drawing-color8: rgb(222, 221, 218);
+    -drawing-color9: rgb( 61,  56,  70);
+}
+*/
+
+/* dark */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 28, 113, 216);
+    -drawing-color2: rgb( 46, 194, 126);
+    -drawing-color3: rgb(245, 194,  17);
+    -drawing-color4: rgb(230,  97,   0);
+    -drawing-color5: rgb(192,  28,  40);
+    -drawing-color6: rgb(129,  61, 156);
+    -drawing-color7: rgb(134,  94,  60);
+    -drawing-color8: rgb(192, 191, 188);
+    -drawing-color9: rgb( 36,  31,  49);
+}
+*/
+
+/* darker */
+/*
+.draw-on-your-screen {
+    -drawing-color1: rgb( 26, 095, 180);
+    -drawing-color2: rgb( 38, 162, 105);
+    -drawing-color3: rgb(229, 165,  10);
+    -drawing-color4: rgb(198,  70,   0);
+    -drawing-color5: rgb(165,  29,  45);
+    -drawing-color6: rgb( 97,  53, 131);
+    -drawing-color7: rgb( 99,  69,  44);
+    -drawing-color8: rgb(154, 153, 150);
+    -drawing-color9: rgb(  0,   0,   0);
+}
+*/

draw.js

@@ -837,6 +837,9 @@ var DrawingArea = new Lang.Class({
         this._onKeyboardPopupMenuHandler = this.connect('popup-menu', this._onKeyboardPopupMenu.bind(this));
         this.scrollHandler = this.connect('scroll-event', this._onScroll.bind(this));
         this.get_parent().set_background_color(this.hasBackground ? this.activeBackgroundColor : null);
+        if (this.hasGrid)
+            // redisplay to show the grid before updating the style because _updateStyle is long.
+            this._redisplay();
         this._updateStyle();
     },