configurable avatar colors

* data-isso-avatar-bg="#f0f0f0" sets the background color
* data-isso-avatar-fg="#0abf99 #5698c4 etc." sets up to 8 different
  forground colors

docs/docs/configuration/client.rst

@@ -10,6 +10,8 @@ preferably in the script tag which embeds the JS:
             data-isso-css="true"
             data-isso-lang="ru"
             data-isso-reply-to-self="false"
+            data-avatar-bg="#f0f0f0"
+            data-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
             src="/prefix/js/embed.js"></script>
 
 Furthermore you can override the automatic title detection inside
@@ -44,13 +46,26 @@ data-isso-lang
 --------------
 
 Override useragent's preferred language. Currently available: german (de),
-english (en) and french (fr).
+english (en), french (fr), italian (it) and russian (ru).
 
 data-isso-reply-to-self
 -----------------------
 
 Set to `true` when spam guard is configured with `reply-to-self = true`.
 
+data-isso-avatar-bg
+-------------------
+
+Set avatar background color. Any valid CSS color will do.
+
+data-isso-avatar-fg
+-------------------
+
+Set avatar foreground color. Up to 8 colors are possible. The default color
+scheme is based in `this color palette <http://colrd.com/palette/19308/>`_.
+Multiple colors must be separated by space. If you use less than eight colors
+and not a multiple of 2, the color distribution is not even.
+
 data-isso-id
 ------------
 

isso/js/app/config.js

@@ -4,7 +4,10 @@ define(function() {
     var config = {
         "css": true,
         "lang": (navigator.language || navigator.userLanguage).split("-")[0],
-        "reply-to-self": false
+        "reply-to-self": false,
+        "avatar-bg": "#f0f0f0",
+        "avatar-fg": ["#9abf88", "#5698c4", "#e279a3", "#9163b6",
+                      "#be5168", "#f19670", "#e4bf80", "#447c69"].join(" ")
     };
 
     var js = document.getElementsByTagName("script");
@@ -21,6 +24,9 @@ define(function() {
         });
     }
 
+    // split avatar-fg on whitespace
+    config["avatar-fg"] = config["avatar-fg"].split(" ");
+
     return config;
 
 });

isso/js/app/lib/identicons.js

@@ -4,7 +4,7 @@
 
   Inspired by http://codepen.io/gschier/pen/GLvAy
 */
-define(["app/lib/promise"], function(Q) {
+define(["app/lib/promise", "app/config"], function(Q, config) {
 
     "use strict";
 
@@ -40,7 +40,7 @@ define(["app/lib/promise"], function(Q) {
         svg.setAttribute("viewBox", "0 0 " + size + " " + size);
         svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
         svg.setAttribute("shape-rendering", "crispEdges");
-        fill(svg, 0, 0, 0, size + 2*padding, "#F0F0F0");
+        fill(svg, 0, 0, 0, size + 2*padding, config["avatar-bg"]);
 
         if (typeof key === null) {
             return svg;
@@ -48,46 +48,20 @@ define(["app/lib/promise"], function(Q) {
 
         Q.when(key, function(key) {
             var hash = pad((parseInt(key, 16) % Math.pow(2, 18)).toString(2), 18),
-                index = 0, color = null;
+                index = 0;
 
             svg.setAttribute("data-hash", key);
 
-            // via http://colrd.com/palette/19308/
-            switch (hash.substring(hash.length - 3, hash.length)) {
-            case "000":
-                color = "#9abf88";
-                break;
-            case "001":
-                color = "#5698c4";
-                break;
-            case "010":
-                color = "#e279a3";
-                break;
-            case "011":
-                color = "#9163b6";
-                break;
-            case "100":
-                color = "#be5168";
-                break;
-            case "101":
-                color = "#f19670";
-                break;
-            case "110":
-                color = "#e4bf80";
-                break;
-            case "111":
-                color = "#447c69";
-                break;
-            }
+            var i = parseInt(hash.substring(hash.length - 3, hash.length), 2),
+                color = config["avatar-fg"][i % config["avatar-fg"].length];
 
-            // FILL THE SQUARES
             for (var x=0; x<Math.ceil(GRID/2); x++) {
                 for (var y=0; y<GRID; y++) {
 
                     if (hash.charAt(index) === "1") {
                         fill(svg, x, y, padding, 8, color);
 
-                        // FILL RIGHT SIDE SYMMETRICALLY
+                        // fill right sight symmetrically
                         if (x < Math.floor(GRID/2)) {
                             fill(svg, (GRID-1) - x, y, padding, 8, color);
                         }