Add new param to to define a style color for story mviewer#21

README.md

@@ -73,6 +73,8 @@ Exemple :
 ##### theme
  * prototype 
      **theme.**`css`: "url vers le fichier css à utliser pour personnaliser la storymap" (str).
+ * prototype 
+     **theme.**`color`: "paramètre permettant de définir le code couleur de la storie (couleur des boutons et de la barre de progression pour le mode carousel. Si non définie, la couleur par défaut est #212529)" (str).
 
 Exemple :
 ```

js/storymap.js

@@ -142,14 +142,19 @@ ks = (function() {
         if (options.theme && options.theme.css) {
             var cssfile = [_conf, options.theme.css].join("");
             $('head').append('<link rel="stylesheet" href="'+cssfile+'" type="text/css" />');
-        } else if (options.theme && options.theme.color) {
-            $("#content-title").css("color", options.theme.color);
-        }
+        } 
+        //Add style variables
+        var styleNode = document.createElement('style');
+        document.getElementsByTagName('head')[0].appendChild(styleNode);
+        if(options.theme && options.theme.color){
+            var styleColorStorie = document.createTextNode(':root {--colorStorie :'+ options.theme.color +';}');
+            styleNode.appendChild(styleColorStorie);
+        }        
         //Map title
         $("#content-title h1").text(options.data.title);
         $("#content-title h3").text(options.data.subtitle);
         //Map width
-        $("#map").css("width", options.map.width);
+        $("#map").css("width", options.map.width);        
         // templates config
         _template = new templates[options.data.template.name](document, $("#template"));
         // Config map features styles              

stories/demo_carousel/config.json

@@ -6,7 +6,7 @@
     "enabled":"true"
   },
   "theme": {
-    "css": "demo.css"
+    "color" : "#009688"
   },
   "tooltip": {
     "fields": [

templates/carousel.css

@@ -126,11 +126,15 @@
 	margin: 0;
 }
 
+.progress-bar{
+	background-color: var(--colorStorie, #212529);
+}
+
 .carButton {
     position: fixed;
 	z-index: 10;
 	cursor: pointer;
-	background-color: #212529;
+	background-color: var(--colorStorie, #212529);
     color: white;
     height: 45px;
     width: 45px;