--- a/src/pyams_skin/resources/less/layout.less	Tue Sep 25 11:31:52 2018 +0200
+++ b/src/pyams_skin/resources/less/layout.less	Wed Sep 26 14:52:58 2018 +0200
@@ -645,7 +645,7 @@
 
 #ribbon {
 	height: 40px;
-	background: #6f8696;
+	background: @ribbonBgColor;
 	padding: 0 40px 0 13px;
 	position: relative;
 
@@ -654,9 +654,9 @@
 		padding-right: 5px;
 	}
 	@media only screen and (min-width:0) and (max-width:679px) {
-		border-bottom: 1px solid #CFCFCF;
-		border-top: 1px solid #E6E6E6;
-		background: #F5F5F5;
+		border-bottom: 1px solid @ribbonMobileBorderBottomColor;
+		border-top: 1px solid @ribbonMobileBorderTopColor;
+		background: @ribbonMobileBgColor;
 	}
 	.breadcrumb {
 		display: inline-block;
@@ -670,20 +670,20 @@
 				line-height: 1em;
 				font-weight: bold;
 				font-size: 120%;
-				color: white!important;
+				color: @ribbonLinkStrongColor!important;
 
 				@media only screen and (min-width:0) and (max-width:679px) {
-					color: #333!important;
+					color: @ribbonMobileLinkStrongColor!important;
 				}
 			}
 		}
 		&,
 		a {
-			color: #ddd!important;
+			color: @ribbonLinkColor!important;
 			text-decoration: none!Important;
 
 			@media only screen and (min-width:0) and (max-width:679px) {
-				color: #6D6C6C!important;
+				color: @ribbonMobileLinkColor!important;
 			}
 		}
 		>li+li:before {
@@ -696,10 +696,10 @@
 		}
 		li:last-child,
 		>.active {
-			color: #eee;
+			color: @ribbonActiveLinkColor;
 
 			@media only screen and (min-width:0) and (max-width:679px) {
-				color: #333!important;
+				color: @ribbonMobileActiveLinkColor!important;
 			}
 			a {
 				font-weight: bold;