diff --git a/README.md b/README.md
index afdfdc7..bdc9283 100644
--- a/README.md
+++ b/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 :
 ```
diff --git a/js/storymap.js b/js/storymap.js
index e051dca..44a7138 100755
--- a/js/storymap.js
+++ b/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              
diff --git a/stories/demo_carousel/config.json b/stories/demo_carousel/config.json
index 8a56126..f9bd441 100644
--- a/stories/demo_carousel/config.json
+++ b/stories/demo_carousel/config.json
@@ -6,7 +6,7 @@
     "enabled":"true"
   },
   "theme": {
-    "css": "demo.css"
+    "color" : "#009688"
   },
   "tooltip": {
     "fields": [
diff --git a/templates/carousel.css b/templates/carousel.css
index cfc8a8e..fb19570 100644
--- a/templates/carousel.css
+++ b/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;