From 501728ce364461bc14025550cff221cfa3c206f7 Mon Sep 17 00:00:00 2001
From: Pierre Ardoin <32256817+mapiolca@users.noreply.github.com>
Date: Fri, 21 Feb 2020 17:31:53 +0100
Subject: [PATCH] AD

---
 htdocs/theme/eldy/global.inc.php | 371 ++++++++++++++++++++-----------
 1 file changed, 237 insertions(+), 134 deletions(-)

diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php
index 2eebcb19a6b..a7f0dd936bd 100644
--- a/htdocs/theme/eldy/global.inc.php
+++ b/htdocs/theme/eldy/global.inc.php
@@ -5,14 +5,96 @@
 /* Default styles                                                                 */
 /* ============================================================================== */
 
+    :root {
+
+            --colorbackhmenu1: rgb(<?php print $colorbackhmenu1; ?>);
+            --colorbackvmenu1: rgb(<?php print $colorbackvmenu1; ?>);
+            --colorbacktitle1: rgb(<?php print $colorbacktitle1; ?>);
+            --colorbacktabcard1: rgb(<?php print $colorbacktabcard1; ?>);
+            --colorbacktabactive: rgb(<?php print $colorbacktabactive; ?>);
+            --colorbacklineimpair1: rgb(<?php print $colorbacklineimpair1; ?>);
+            --colorbacklineimpair2: rgb(<?php print $colorbacklineimpair2; ?>);
+            --colorbacklinepair1: rgb(<?php print $colorbacklinepair1; ?>);
+            --colorbacklinepair2: rgb(<?php print $colorbacklinepair2; ?>);
+            --colorbacklinepairhover: rgb(<?php print $colorbacklinepairhover; ?>);
+            --colorbacklinepairchecked: rgb(<?php print $colorbacklinepairchecked; ?>);
+            --colorbackbody: rgb(<?php print $colorbackbody; ?>);
+            --colortexttitlenotab: rgb(<?php print $colortexttitlenotab; ?>);
+            --colortexttitle: rgb(<?php print $colortexttitle; ?>);
+            --colortext: rgb(<?php print $colortext; ?>);
+            --colortextlink: rgb(<?php print $colortextlink; ?>);
+            --colortextbackhmenu: #<?php echo $colortextbackhmenu; ?>;
+            --colortextbackvmenu: #<?php print $colortextbackvmenu; ?>) ;
+            --listetotal: #551188;
+            --inputbackgroundcolor: #FFF;
+            --inputbordercolor: rgba(0,0,0,.2);
+            --tooltipbgcolor: <?php print $toolTipBgColor; ?>;
+			--tooltipfontcolor : <?php print $toolTipFontColor; ?>;
+			--oddevencolor: #202020;
+			--colorboxstatsborder: #ddd;
+			--dolgraphbg: rgba(255,255,255,0);
+			--fieldrequiredcolor: #000055;
+			--colortextbacktab: #<?php print $colortextbacktab; ?>) ;
+			--colorboxiconbg: #eee;
+			--refidnocolor:#444;
+			--tableforfieldcolor:#666;
+			--amountremaintopaycolor:#880000;
+			--amountpaymentcomplete:#008800;
+			--amountremaintopaybackcolor:none;
+
+		}
+<?php 
+	if (!empty($conf->global->MAIN_THEME_DARKMODEENABLED)) {
+
+	    print "@media (prefers-color-scheme: dark) {
+	      :root {
+	        
+	            --colorbackhmenu1: #1d1e20;
+	            --colorbackvmenu1: #2b2c2e;
+	            --colorbacktitle1: #2b2d2f;
+	            --colorbacktabcard1: #38393d;
+	            --colorbacktabactive: rgb(220,220,220);
+	            --colorbacklineimpair1: #38393d;
+	            --colorbacklineimpair2: #2b2d2f;
+	            --colorbacklinepair1: #38393d;
+	            --colorbacklinepair2: #2b2d2f;
+	            --colorbacklinepairhover: #2b2d2f;
+	            --colorbacklinepairchecked: #0e5ccd;
+	            --colorbackbody: #1d1e20;
+	            --tooltipbgcolor: #2b2d2f; 
+	            --colortexttitlenotab: rgb(220,220,220);
+	            --colortexttitle: rgb(220,220,220);
+	            --colortext: rgb(220,220,220);
+	            --colortextlink: #4390dc;
+	            --colortextbackhmenu: rgb(220,220,220);
+	            --colortextbackvmenu: rgb(220,220,220);
+				--tooltipfontcolor : rgb(220,220,220);
+	            --listetotal: rgb(245, 83, 158);
+	            --inputbackgroundcolor: #2b2d2f;
+	            --inputbordercolor: rgb(220,220,220);
+	            --oddevencolor: rgb(220,220,220);
+	            --colorboxstatsborder: rgb(65,100,138);
+	            --dolgraphbg: #1d1e20;
+	            --fieldrequiredcolor: rgb(250,183,59);
+	            --colortextbacktab: rgb(220,220,220);
+	            --colorboxiconbg: rgb(36,38,39);
+	            --refidnocolor: rgb(220,220,220);
+	            --tableforfieldcolor:rgb(220,220,220);
+	            --amountremaintopaycolor:rgb(252,84,91);
+	            --amountpaymentcomplete:rgb(101,184,77);
+	            --amountremaintopaybackcolor:rbg(245,130,46);
+	      }
+	    }";
+	}
+?>
 
 body {
 <?php if (GETPOST('optioncss', 'aZ09') == 'print') {  ?>
 	background-color: #FFFFFF;
 <?php } else { ?>
-	background: rgb(<?php print $colorbackbody; ?>);
+	background: var(--colorbackbody);
 <?php } ?>
-	color: rgb(<?php echo $colortext; ?>);
+	color: var(--colortext);
 	font-size: <?php print is_numeric($fontsize) ? $fontsize.'px' : $fontsize; ?>;
 	line-height: 1.4;
 	font-family: <?php print $fontlist ?>;
@@ -31,12 +113,13 @@ body {
 th a { font-weight: <?php echo ($useboldtitle ? 'bold' : 'normal'); ?> !important; }
 a.tab { font-weight: 500 !important; }
 
-a:link, a:visited, a:hover, a:active { font-family: <?php print $fontlist ?>; font-weight: normal; color: rgb(<?php print $colortextlink; ?>); text-decoration: none;  }
-a:hover { text-decoration: underline; color: rgb(<?php print $colortextlink; ?>); }
-a.commonlink { color: rgb(<?php print $colortextlink; ?>) !important; text-decoration: none; }
+a:link, a:visited, a:hover, a:active { font-family: <?php print $fontlist ?>; font-weight: normal; color: var(--colortextlink); text-decoration: none;  }
+a:hover { text-decoration: underline; color: var(--colortextlink); }
+a.commonlink { color: var(--colortextlink) !important; text-decoration: none; }
 th.liste_titre a div div:hover, th.liste_titre_sel a div div:hover { text-decoration: underline; }
 input, input.flat, textarea, textarea.flat, form.flat select, select, select.flat, .dataTables_length label select {
-	background-color: #FFF;
+	background-color: var(--inputbackgroundcolor);
+	color: var(--colortext);
 }
 select.vmenusearchselectcombo {
 	background-color: unset;
@@ -77,7 +160,7 @@ input, input.flat, textarea, textarea.flat, form.flat select, select, select.fla
     font-family: <?php print $fontlist ?>;
     outline: none;
     margin: 0px 0px 0px 0px;
-    border<?php echo empty($conf->global->THEME_HIDE_BORDER_ON_INPUT) ? '-bottom' : ''; ?>: solid 1px rgba(0,0,0,.2);
+    border<?php echo empty($conf->global->THEME_HIDE_BORDER_ON_INPUT) ? '-bottom' : ''; ?>: solid 1px var(--inputbordercolor);
 }
 
 input {
@@ -237,7 +320,7 @@ select.flat, form.flat select {
 	font-size: unset;
 }
 .optionblue {
-	color: rgb(<?php echo $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 .select2-results .select2-highlighted.optionblue {
 	color: #FFF !important;
@@ -535,7 +618,7 @@ body[class*="colorblind-"] .text-success{
     color: #ccc !important;
 }
 .editfielda span.fa-pencil-alt:hover, .editfielda span.fa-trash:hover {
-    color: rgb(<?php echo $colortexttitle; ?>) !important;
+    color: var(--colortexttitle) !important;
 }
 
 .fa-toggle-on, .fa-toggle-off { font-size: 2em; }
@@ -708,16 +791,17 @@ select.flat.selectlimit {
 .amountalreadypaid {
 }
 .amountpaymentcomplete {
-	color: #008800;
+	color: var(--amountpaymentcomplete);
 	font-weight: bold;
 	font-size: 1.2em;
 }
 .amountremaintopay {
-	color: #880000;
+	color: var(--amountremaintopaycolor);
 	font-weight: bold;
 	font-size: 1.2em;
 }
 .amountremaintopayback {
+	color: var(--amountremaintopaybackcolor);
 	font-weight: bold;
 	font-size: 1.2em;
 }
@@ -1067,7 +1151,7 @@ table[summary="list_of_modules"] .fa-cog {
 .linkobject { cursor: pointer; }
 
 table.tableforfield tr>td:first-of-type, div.tableforfield div.tagtr>div.tagtd:first-of-type {
-	color: #666;
+	color: var(--tableforfieldcolor);
 }
 
 <?php if (GETPOST('optioncss', 'aZ09') == 'print') { ?>
@@ -1114,7 +1198,7 @@ td.showDragHandle {
 #id-right {	/* This must stay id-right and not be replaced with echo $right */
 	padding-top: 10px;
 	width: 100%;
-	background: rgb(<?php print $colorbackbody; ?>);
+	background: var(--colorbackbody);
 	padding-bottom: 20px;
 }
 #id-left {
@@ -1135,7 +1219,7 @@ td.showDragHandle {
 	display: table-cell;
 	border-<?php echo $right; ?>: 1px solid #d0d0d0;
 	box-shadow: 3px 0 6px -2px #eee;
-	background: rgb(<?php echo $colorbackvmenu1; ?>);
+	background: var(--colorbackvmenu1);
 	transition: left 0.5s ease;
 }
 
@@ -1228,7 +1312,7 @@ body.sidebar-collapse .login_block {
 
 .menuhider { display: block !important; }
 .dropdown-user-image { display: none; }
-.user-header { height: auto !important; color: rgb(<?php echo $colorbackbody; ?>); }
+.user-header { height: auto !important; color: var(--colorbackbody); }
 
 #id-container {
 	width: 100%;
@@ -1297,7 +1381,7 @@ div.fichetwothirdright {
 	<?php if ($conf->browser->layout == 'phone') { print "padding-bottom: 6px\n"; } ?>
 }
 div.fichetwothirdright div.ficheaddleft {
-    padding-<?php echo $left; ?>: 20px;
+     padding-<?php echo $left; ?>: 20px;
 }
 div.fichehalfleft {
 	<?php if ($conf->browser->layout != 'phone') { print "float: ".$left.";\n"; } ?>
@@ -1517,10 +1601,10 @@ img.photorefnoborder {
 }
 .underbanner {
 	border-bottom: <?php echo $borderwidth ?>px solid rgb(<?php echo $colortopbordertitle1 ?>);
-	/* border-bottom: 2px solid rgb(<?php echo $colorbackhmenu1 ?>); */
+	/* border-bottom: 2px solid var(--colorbackhmenu1); */
 }
 .trextrafieldseparator td {
-    /* border-bottom: 2px solid rgb(<?php echo $colorbackhmenu1 ?>) !important; */
+    /* border-bottom: 2px solid var(--colorbackhmenu1) !important; */
     border-bottom: 2px solid rgb(<?php echo $colortopbordertitle1 ?>) !important;
 }
 
@@ -1537,9 +1621,8 @@ div#id-top {
 <?php if (GETPOST('optioncss', 'aZ09') == 'print') {  ?>
 	display:none;
 <?php } else { ?>
-	background: rgb(<?php echo $colorbackhmenu1 ?>);
-	background-image: linear-gradient(-45deg, <?php echo colorAdjustBrightness(colorArrayToHex(colorStringToArray($colorbackhmenu1)), '5'); ?>, rgb(<?php echo $colorbackhmenu1 ?>));
-	/* box-shadow: 0px 0px 5px #eee; */
+	background: var(--colorbackhmenu1);
+	background-image: linear-gradient(-45deg, <?php echo colorAdjustBrightness(colorArrayToHex(colorStringToArray($colorbackhmenu1)), '5'); ?>, var(--colorbackhmenu1));
 <?php } ?>
 }
 
@@ -1594,7 +1677,7 @@ a.tmenu, a.tmenusel, a.tmenudisabled {
 a.tmenudisabled:link, a.tmenudisabled:visited, a.tmenudisabled:hover, a.tmenudisabled:active {
 	padding: 0px 5px 0px 5px;
 	white-space: nowrap;
-	color: #<?php echo $colortextbackhmenu; ?>;
+	color: var(--colortextbackhmenu);
 	text-decoration: none;
 	cursor: not-allowed;
 }
@@ -1602,14 +1685,14 @@ a.tmenudisabled:link, a.tmenudisabled:visited, a.tmenudisabled:hover, a.tmenudis
 a.tmenu:link, a.tmenu:visited, a.tmenu:hover, a.tmenu:active {
 	padding: 0px 4px 0px 4px;
 	white-space: nowrap;
-	color: #<?php echo $colortextbackhmenu; ?>;
+	color: var(--colortextbackhmenu);
     text-decoration: none;
 }
 a.tmenusel:link, a.tmenusel:visited, a.tmenusel:hover, a.tmenusel:active {
 	padding: 0px 4px 0px 4px;
 	margin: 0px 0px 0px 0px;
 	white-space: nowrap;
-	color: #<?php echo $colortextbackhmenu; ?>;
+	color: var(--colortextbackhmenu);
 	text-decoration: none !important;
 }
 
@@ -2050,7 +2133,7 @@ div.login_block {
 	<?php } ?>
 }
 div.login_block a {
-	color: #<?php echo $colortextbackhmenu; ?>;
+	color: var(--colortextbackhmenu);
 	display: inline-block;
 }
 div.login_block table {
@@ -2062,10 +2145,10 @@ div.login {
 	float: right;
 }
 div.login a {
-	color: #<?php echo $colortextbackvmenu; ?>;
+	color: var(--colortextbackvmenu);
 }
 div.login a:hover {
-	color: #<?php echo $colortextbackvmenu; ?>;
+	color: var(--colortextbackvmenu);
 	text-decoration:underline;
 }
 .login_block_elem a span.atoplogin, .login_block_elem span.atoplogin {
@@ -2197,11 +2280,20 @@ input.vmenusearchselectcombo[type=text] {
 
 a.vmenu:link, a.vmenu:visited, a.vmenu:hover, a.vmenu:active, span.vmenu, span.vsmenu { white-space: nowrap; font-family: <?php print $fontlist ?>; text-align: <?php print $left; ?>; font-weight: bold; }	/* bold = 600, 500 is ko with Edge on 1200x960 */
 font.vmenudisabled  { font-family: <?php print $fontlist ?>; text-align: <?php print $left; ?>; font-weight: bold; color: #aaa; margin-left: 4px; }												/* bold = 600, 500 is ko with Edge on 1200x960 */
-a.vmenu:link, a.vmenu:visited { color: #<?php echo $colortextbackvmenu; ?>; }
+a.vmenu:link, a.vmenu:visited { color: var(--colortextbackvmenu); }
 
-a.vsmenu:link, a.vsmenu:visited, a.vsmenu:hover, a.vsmenu:active, span.vsmenu { font-family: <?php print $fontlist ?>; text-align: <?php print $left; ?>; font-weight: normal; color: #202020; margin: 1px 1px 1px 6px; }
+a.vsmenu:link, a.vsmenu:visited, a.vsmenu:hover, a.vsmenu:active, span.vsmenu { 
+	font-family: <?php print $fontlist ?>; 
+	text-align: <?php print $left; ?>; 
+	font-weight: normal; 
+	color: #202020; 
+	margin: 1px 1px 1px 6px; 
+}
 font.vsmenudisabled { font-family: <?php print $fontlist ?>; text-align: <?php print $left; ?>; font-weight: normal; color: #aaa; }
-a.vsmenu:link, a.vsmenu:visited { color: #<?php echo $colortextbackvmenu; ?>; white-space: nowrap; }
+a.vsmenu:link, a.vsmenu:visited { 
+	color: var(--colortextbackvmenu); 
+	white-space: nowrap; 
+}
 font.vsmenudisabledmargin { margin: 1px 1px 1px 6px; }
 li a.vsmenudisabled, li.vsmenudisabled { color: #aaa !important; }
 
@@ -2253,7 +2345,7 @@ div.blockvmenupair, div.blockvmenuimpair, div.blockvmenubookmarks, div.blockvmen
     padding-bottom: 7px;
     margin: 0 0 0 2px;
 
-	background: rgb(<?php echo $colorbackvmenu1; ?>);
+	background: var(--colorbackvmenu1);
 
     border-left: 1px solid #AAA;
     border-right: 1px solid #BBB;
@@ -2266,7 +2358,7 @@ div.blockvmenusearch
 	text-align: <?php print $left; ?>;
 	text-decoration: none;
     margin: 1px 0px 0px 2px;
-	background: rgb(<?php echo $colorbackvmenu1; ?>);
+	background: var(--colorbackvmenu1);
 }
 
 div.blockvmenusearch > form > div {
@@ -2391,7 +2483,7 @@ div.tabsElem a.tabactive::before, div.tabsElem a.tabunactive::before {
 }
 */
 div.tabBar {
-    color: #<?php echo $colortextbacktab; ?>;
+    color: var(--colortextbacktab);
     padding-top: 16px;
     padding-left: 0px; padding-right: 0px;
     padding-bottom: 2px;
@@ -2399,7 +2491,7 @@ div.tabBar {
     border-top: 1px solid #BBB;
     /* border-bottom: 1px solid #AAA; */
 	width: auto;
-	background: rgb(<?php echo $colorbacktabcard1; ?>);
+	background: var(--colorbacktabcard1);
 }
 div.tabBar div.titre {
 	padding-top: 20px;
@@ -2477,7 +2569,7 @@ a.tabTitle {
 }
 
 a.tabunactive {
-    color: rgb(<?php print $colortextlink; ?>) !important;
+    color: var(--colortextlink) !important;
 }
 a.tab:link, a.tab:visited, a.tab:hover, a.tab#active {
 	font-family: <?php print $fontlist ?>;
@@ -2494,20 +2586,20 @@ a.tab:link, a.tab:visited, a.tab:hover, a.tab#active {
 	background-image: none !important;
 }
 .tabactive, a.tab#active {
-	color: #<?php echo $colortextbacktab; ?> !important;
-	background: rgb(<?php echo $colorbacktabcard1; ?>) !important;
+	color: var(--colortextbacktab); !important;
+	background: var(--colorbacktabcard1) !important;
 	margin: 0 0.2em 0 0.2em !important;
 
 	border-right: 1px solid #CCC !important;
 	border-left: 1px solid #CCC !important;
 	/* border-top: <?php echo 2; ?>px solid rgb(<?php echo $colortopbordertitle1; ?>) !important; */
-	border-top: <?php echo 2; ?>px solid rgb(<?php echo $colorbackhmenu1 ?>) !important;
+	border-top: <?php echo 2; ?>px solid var(--colorbackhmenu1) !important;
 }
 a.tab:hover
 {
 	/*
-	background: rgba(<?php echo $colorbacktabcard1; ?>, 0.5)  url(<?php echo dol_buildpath($path.'/theme/'.$theme.'/img/nav-overlay3.png', 1); ?>) 50% 0 repeat-x;
-	color: #<?php echo $colortextbacktab; ?>;
+	background: var(--colorbacktabcard1), 0.5)  url(<?php echo dol_buildpath($path.'/theme/'.$theme.'/img/nav-overlay3.png', 1); ?>) 50% 0 repeat-x;
+	color: var(--colortextbacktab);
 	*/
 	text-decoration: underline;
 }
@@ -2679,7 +2771,7 @@ table.liste, table.noborder, table.formdoc, div.noborder {
 	border-top-color: rgb(<?php echo $colortopbordertitle1 ?>);
 	border-top-style: solid;
 	/* border-top-width: 2px;
-	border-top-color: rgb(<?php echo $colorbackhmenu1 ?>);
+	border-top-color: var(--colorbackhmenu1);
 	border-top-style: solid; */
 
 	/*border-bottom-width: 1px;
@@ -2715,7 +2807,7 @@ table.paddingtopbottomonly tr td {
 	padding-bottom: 2px;
 }
 .liste_titre_filter {
-	background: rgb(<?php echo $colorbacktitle1; ?>) !important;
+	background: var(--colorbacktitle1) !important;
 }
 table:not(.listwithfilterbefore) tr.liste_titre_filter:first-of-type td.liste_titre {
     padding-top: 5px;
@@ -2806,13 +2898,13 @@ div.refidpadding  {
 }
 div.refid  {
 	font-weight: bold;
-  	color: rgb(<?php print $colortexttitlenotab; ?>);
+  	color: var(--colortexttitlenotab);
   	font-size: 1.2em;
 }
 div.refidno  {
 	padding-top: 3px;
 	font-weight: normal;
-  	color: #444;
+  	color: var(--refidnocolor);
   	font-size: <?php print is_numeric($fontsize) ? $fontsize.'px' : $fontsize ?>;
   	line-height: 21px;
 }
@@ -2924,7 +3016,7 @@ div.pagination li .active span:focus {
   z-index: 2;
   color: #fff;
   cursor: default;
-  background-color: rgb(<?php echo $colorbackhmenu1 ?>);
+  background-color: var(--colorbackhmenu1);
   border-color: #337ab7;
 }
 div.pagination .disabled span,
@@ -2961,19 +3053,19 @@ div.pagination li.paginationafterarrows {
 /* Set the color for hover lines */
 .oddeven:hover, .evenodd:hover, .impair:hover, .pair:hover
 {
-	background: rgb(<?php echo $colorbacklinepairhover; ?>) !important;		/* Must be background to be stronger than background of odd or even */
+	background: var(--colorbacklinepairhover) !important;		/* Must be background to be stronger than background of odd or even */
 }
 .tredited, .tredited td {
-	background: rgb(<?php echo $colorbacklinepairchecked; ?>) !important;   /* Must be background to be stronger than background of odd or even */
+	background: var(--colorbacklinepairchecked) !important;   /* Must be background to be stronger than background of odd or even */
 	border-bottom: 0 !important;
 }
 .treditedlinefordate {
-	background: rgb(<?php echo $colorbacklinepairchecked; ?>) !important;   /* Must be background to be stronger than background of odd or even */
+	background: var(--colorbacklinepairchecked) !important;   /* Must be background to be stronger than background of odd or even */
     border-bottom: 0px;
 }
 <?php if ($colorbacklinepairchecked) { ?>
 .highlight {
-	background: rgb(<?php echo $colorbacklinepairchecked; ?>) !important;   /* Must be background to be stronger than background of odd or even */
+	background: var(--colorbacklinepairchecked) !important;   /* Must be background to be stronger than background of odd or even */
 }
 <?php } ?>
 
@@ -2989,37 +3081,37 @@ div.pagination li.paginationafterarrows {
 {
 	font-family: <?php print $fontlist ?>;
 	margin-bottom: 1px;
-	color: #202020;
+	color: var(--oddevencolor);
 }
 .impair, .nohover .impair:hover, tr.impair td.nohover
 {
-	background: #<?php echo colorArrayToHex(colorStringToArray($colorbacklineimpair1)); ?>;
+	background: var(--colorbacklineimpair1);
 }
 #GanttChartDIV {
-	background-color: #<?php echo colorArrayToHex(colorStringToArray($colorbacklineimpair1)); ?>;
+	background-color: var(--colorbacklineimpair1);
 }
 
 .oddeven, .evenodd, .pair, .nohover .pair:hover, tr.pair td.nohover, .tagtr.oddeven {
 	font-family: <?php print $fontlist ?>;
 	margin-bottom: 1px;
-	color: #202020;
+	color: var(--oddevencolor);
 }
 .pair, .nohover .pair:hover, tr.pair td.nohover {
-	background-color: #<?php echo colorArrayToHex(colorStringToArray($colorbacklinepair1)); ?>;
+	background-color: var(--colorbacklinepair1);
 }
 
 table.dataTable tr.oddeven {
-	background-color: #<?php echo colorArrayToHex(colorStringToArray($colorbacklinepair1)); ?> !important;
+	background-color: var(--colorbacklinepair1) !important;
 }
 
 /* For no hover style */
 td.oddeven, table.nohover tr.impair, table.nohover tr.pair, table.nohover tr.impair td, table.nohover tr.pair td, tr.nohover td, form.nohover, form.nohover:hover {
-	background-color: #<?php echo colorArrayToHex(colorStringToArray($colorbacklineimpair1)); ?> !important;
-	background: #<?php echo colorArrayToHex(colorStringToArray($colorbacklineimpair1)); ?> !important;
+	background-color: var(--colorbacklineimpair1) !important;
+	background: var(--colorbacklineimpair1) !important;
 }
 td.evenodd, tr.nohoverpair td, #trlinefordates td {
-	background-color: #<?php echo colorArrayToHex(colorStringToArray($colorbacklinepair1)); ?> !important;
-	background: #<?php echo colorArrayToHex(colorStringToArray($colorbacklinepair1)); ?> !important;
+	background-color: var(--colorbacklinepair1) !important;
+	background: var(--colorbacklinepair1) !important;
 }
 .trforbreak td {
 	font-weight: bold;
@@ -3090,10 +3182,10 @@ div.colorback	/* for the form "assign user" on time spent view */
 }
 div.liste_titre_bydiv, .liste_titre div.tagtr, tr.liste_titre, tr.liste_titre_sel, .tagtr.liste_titre, .tagtr.liste_titre_sel, form.liste_titre, form.liste_titre_sel, table.dataTable thead tr
 {
-	background: rgb(<?php echo $colorbacktitle1; ?>);
+	background: var(--colorbacktitle1);
 	font-weight: <?php echo $useboldtitle ? 'bold' : 'normal'; ?>;
 
-    color: rgb(<?php echo $colortexttitle; ?>);
+    color: var(--colortexttitle);
     font-family: <?php print $fontlist ?>;
     text-align: <?php echo $left; ?>;
 }
@@ -3122,10 +3214,10 @@ tr.liste_titre_topborder td {
 }
 .liste_titre td a {
 	text-shadow: none !important;
-	color: rgb(<?php echo $colortexttitle; ?>);
+	color: var(--colortexttitle);
 }
 .liste_titre td a.notasortlink {
-	color: rgb(<?php echo $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 .liste_titre td a.notasortlink:hover {
 	background: transparent;
@@ -3153,7 +3245,7 @@ input.liste_titre {
 	line-height: 24px;
 }
 .noborder tr.liste_total td, tr.liste_total td, form.liste_total div, .noborder tr.liste_total_wrap td, tr.liste_total_wrap td, form.liste_total_wrap div {
-    color: #551188;
+    color: var(--listetotal);
     font-weight: normal;
 }
 .noborder tr.liste_total td, tr.liste_total td, form.liste_total div {
@@ -3228,11 +3320,11 @@ div.tabBar .noborder {
 div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright):not(.ficheaddleft) > .border > tbody > tr:nth-of-type(even):not(.liste_titre), .liste > tbody > tr:nth-of-type(even):not(.liste_titre),
 div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright):not(.ficheaddleft) .oddeven.tagtr:nth-of-type(even):not(.liste_titre)
 {
-	background: linear-gradient(bottom, rgb(<?php echo $colorbacklineimpair1; ?>) 85%, rgb(<?php echo $colorbacklineimpair2; ?>) 100%);
-	background: -o-linear-gradient(bottom, rgb(<?php echo $colorbacklineimpair1; ?>) 85%, rgb(<?php echo $colorbacklineimpair2; ?>) 100%);
-	background: -moz-linear-gradient(bottom, rgb(<?php echo $colorbacklineimpair1; ?>) 85%, rgb(<?php echo $colorbacklineimpair2; ?>) 100%);
-	background: -webkit-linear-gradient(bottom, rgb(<?php echo $colorbacklineimpair1; ?>) 85%, rgb(<?php echo $colorbacklineimpair2; ?>) 100%);
-	background: -ms-linear-gradient(bottom, rgb(<?php echo $colorbacklineimpair1; ?>) 85%, rgb(<?php echo $colorbacklineimpair2; ?>) 100%);
+	background: linear-gradient(bottom, var(--colorbacklineimpair1) 85%, var(--colorbacklineimpair2) 100%);
+	background: -o-linear-gradient(bottom, var(--colorbacklineimpair1) 85%, var(--colorbacklineimpair2) 100%);
+	background: -moz-linear-gradient(bottom, var(--colorbacklineimpair1) 85%, var(--colorbacklineimpair2) 100%);
+	background: -webkit-linear-gradient(bottom, var(--colorbacklineimpair1) 85%, var(--colorbacklineimpair2) 100%);
+	background: -ms-linear-gradient(bottom, var(--colorbacklineimpair1) 85%, var(--colorbacklineimpair2) 100%);
 }
 .noborder > tbody > tr:nth-child(even):not(:last-child) td:not(.liste_titre), .liste > tbody > tr:nth-child(even):not(:last-child) td:not(.liste_titre),
 .noborder .oddeven.tagtr:nth-child(even):not(:last-child) .tagtd:not(.liste_titre)
@@ -3244,11 +3336,11 @@ div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright):not(.ficheaddleft
 div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright):not(.ficheaddleft) > .border > tbody > tr:nth-of-type(odd):not(.liste_titre), .liste > tbody > tr:nth-of-type(odd):not(.liste_titre),
 div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright):not(.ficheaddleft) .oddeven.tagtr:nth-of-type(odd):not(.liste_titre)
 {
-	background: linear-gradient(bottom, rgb(<?php echo $colorbacklinepair1; ?>) 85%, rgb(<?php echo $colorbacklinepair2; ?>) 100%);
-	background: -o-linear-gradient(bottom, rgb(<?php echo $colorbacklinepair1; ?>) 85%, rgb(<?php echo $colorbacklinepair2; ?>) 100%);
-	background: -moz-linear-gradient(bottom, rgb(<?php echo $colorbacklinepair1; ?>) 85%, rgb(<?php echo $colorbacklinepair2; ?>) 100%);
-	background: -webkit-linear-gradient(bottom, rgb(<?php echo $colorbacklinepair1; ?>) 85%, rgb(<?php echo $colorbacklinepair2; ?>) 100%);
-	background: -ms-linear-gradient(bottom, rgb(<?php echo $colorbacklinepair1; ?>) 85%, rgb(<?php echo $colorbacklinepair2; ?>) 100%);
+	background: linear-gradient(bottom, var(--colorbacklinepair1) 85%, var(--colorbacklinepair2) 100%);
+	background: -o-linear-gradient(bottom, var(--colorbacklinepair1) 85%, var(--colorbacklinepair2) 100%);
+	background: -moz-linear-gradient(bottom, var(--colorbacklinepair1) 85%, var(--colorbacklinepair2) 100%);
+	background: -webkit-linear-gradient(bottom, var(--colorbacklinepair1) 85%, var(--colorbacklinepair2) 100%);
+	background: -ms-linear-gradient(bottom, var(--colorbacklinepair1) 85%, var(--colorbacklinepair2) 100%);
 }
 .noborder > tbody > tr:nth-child(odd):not(:last-child) td:not(.liste_titre), .liste > tbody > tr:nth-child(odd):not(:last-child) td:not(.liste_titre),
 .noborder .oddeven.tagtr:nth-child(odd):not(:last-child) .tagtd:not(.liste_titre)
@@ -3257,7 +3349,7 @@ div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright):not(.ficheaddleft
 }
 
 ul.noborder li:nth-child(even):not(.liste_titre) {
-	background-color: rgb(<?php echo $colorbacklinepair2; ?>) !important;
+	background-color: var(--colorbacklinepair2) !important;
 }
 
 
@@ -3286,10 +3378,10 @@ ul.noborder li:nth-child(even):not(.liste_titre) {
     margin-bottom: 5px;
     text-align: center;
 
-    background: #fcfcfc;
-    border: 1px solid #eee;
-    border-left: 6px solid #ddd;
-    box-shadow: 1px 1px 8px #ddd;
+    background: var(--colorbacktitle1);
+    border: 1px solid var(--colorboxstatsborder);
+    border-left: 6px solid var(--colorboxstatsborder);
+    box-shadow: 1px 1px 8px var(--colorboxstatsborder);
     border-radius: 0px;
 }
 .boxstats, .boxstats130, .boxstatscontent {
@@ -3370,7 +3462,7 @@ ul.noborder li:nth-child(even):not(.liste_titre) {
 span.boxstatstext {
 	opacity: 0.7;
     line-height: 18px;
-    color: #000;
+    color: var(--colortext);
 }
 span.boxstatstext img, a.dashboardlineindicatorlate img {
 	border: 0;
@@ -3431,7 +3523,7 @@ span.dashboardlineko {
     border-bottom-width: 1px;
 
     border-top: <?php echo $borderwidth ?>px solid rgb(<?php echo $colortopbordertitle1 ?>);
-	/* border-top: 2px solid rgb(<?php echo $colorbackhmenu1 ?>) !important; */
+	/* border-top: 2px solid var(--colorbackhmenu1) !important; */
 }
 table.noborder.boxtable tr td {
     height: unset;
@@ -3464,8 +3556,8 @@ tr.box_titre {
 	color: #000 !important;*/
 
 	/* TO MATCH ELDY */
-	background: rgb(<?php echo $colorbacktitle1; ?>)
-	color: rgb(<?php echo $colortexttitle; ?>);
+	background: var(--colorbacktitle1);
+	color: var(--colortexttitle);
     font-family: <?php print $fontlist ?>, sans-serif;
     font-weight: <?php echo $useboldtitle ? 'bold' : 'normal'; ?>;
     border-bottom: 1px solid #FDFFFF;
@@ -3539,7 +3631,7 @@ div.warning {
     background: #fcf8e3;
 }
 div.warning a, div.info a, div.error a {
-	color: rgb(<?php echo $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 
 /* Error message */
@@ -3599,7 +3691,7 @@ div.boximport {
 .product_line_stock_ok { color: #002200; }
 .product_line_stock_too_low { color: #884400; }
 
-.fieldrequired { font-weight: bold; color: #000055; }
+.fieldrequired { font-weight: bold; color: var(--fieldrequiredcolor); }
 
 .widthpictotitle { width: 44px; text-align: <?php echo $left; ?>; }
 span.widthpictotitle { font-size: 2.5em; };
@@ -3607,7 +3699,7 @@ span.widthpictotitle { font-size: 2.5em; };
 .dolgraphtitle { margin-top: 6px; margin-bottom: 4px; }
 .dolgraphtitlecssboxes { /* margin: 0px; */ }
 .legendColorBox, .legendLabel { border: none !important; }
-div.dolgraph div.legend, div.dolgraph div.legend div { background-color: rgba(255,255,255,0) !important; }
+div.dolgraph div.legend, div.dolgraph div.legend div { background-color: var(--dolgraphbg) !important; }
 div.dolgraph div.legend table tbody tr { height: auto; }
 td.legendColorBox { padding: 2px 2px 2px 0 !important; }
 td.legendLabel { padding: 2px 2px 2px 0 !important; }
@@ -3666,7 +3758,7 @@ div.titre {
 }
 div.titre, .secondary {
 	font-family: <?php print $fontlist ?>;
-	color: rgb(<?php print $colortexttitlenotab; ?>);
+	color: var(--colortexttitlenotab);
 }
 
 table.table-fiche-title .col-title div.titre{
@@ -3815,8 +3907,8 @@ div.ui-tooltip.mytooltip {
 	-o-box-shadow:     0.5px 0.5px 4px 0px rgba(0, 0, 0, 0.5);
 	box-shadow:        0.5px 0.5px 4px 0px rgba(0, 0, 0, 0.5);
 	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
-	background: <?php print $toolTipBgColor; ?> !important;
-	color : <?php print $toolTipFontColor; ?>;
+	background: var(--tooltipbgcolor) !important;
+	color : var(--tooltipfontcolor);
 }
 
 
@@ -3851,7 +3943,7 @@ img.datecallink { padding-left: 2px !important; padding-right: 2px !important; }
 }
 table.dp {
     width: 180px;
-    background-color: #FFFFFF;
+    background-color: var(--inputbackgroundcolor);
     border-top: solid 2px #DDDDDD;
     border-<?php print $left; ?>: solid 2px #DDDDDD;
     border-<?php print $right; ?>: solid 1px #222222;
@@ -3913,7 +4005,7 @@ table.dp {
 }
 .datenowlink
 {
-	color: rgb(<?php print $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 
 
@@ -4081,7 +4173,7 @@ td.cal_other_month {
 	       position:absolute;
 	       width:auto;
 	       font-size: 1.0em;
-	       background-color:white;
+	       background-color: var(--inputbackgroundcolor);
 	       border:1px solid #888;
 	       margin:0px;
 /*	       padding:0px; This make combo crazy */
@@ -4091,7 +4183,7 @@ td.cal_other_month {
 	       margin:0px;
 	       padding:0px;
 	     }
-.ui-autocomplete ul li.selected { background-color: #D3E5EC;}
+.ui-autocomplete ul li.selected { background-color: var(--inputbackgroundcolor);}
 .ui-autocomplete ul li {
 	       list-style-type:none;
 	       display:block;
@@ -4143,7 +4235,7 @@ td.cal_other_month {
 /* CSS for treeview */
 .treeview ul { background-color: transparent !important; margin-top: 4px; padding-top: 4px !important; }
 .treeview li { background-color: transparent !important; padding: 0 0 0 16px !important; min-height: 26px; }
-.treeview .hover { color: rgb(<?php print $colortextlink; ?>) !important; text-decoration: underline !important; }
+.treeview .hover { color: var(--colortextlink) !important; text-decoration: underline !important; }
 
 
 
@@ -4276,7 +4368,7 @@ A.none, A.none:active, A.none:visited, A.none:hover {
 /* Style to overwrites JQuery styles */
 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
     border: 1px solid #888;
-    background: rgb(<?php echo $colorbacktitle1; ?>);
+    background: var(--colorbacktitle1);
     color: unset;
 }
 
@@ -4724,14 +4816,14 @@ table.dataTable tr.odd td.sorting_1, table.dataTable tr.even td.sorting_1 {
 	height: inherit !important;
 }
 .paging_full_numbers a.paginate_active:hover, .paging_full_numbers a.paginate_button:hover {
-	background-color: #DDD !important;
+	background-color: var(--colorbackbody) !important;
 }
 .paging_full_numbers, .paging_full_numbers a.paginate_active, .paging_full_numbers a.paginate_button {
-	background-color: #FFF !important;
+	background-color: var(--colorbackbody) !important;
 	border-radius: inherit !important;
 }
 .paging_full_numbers a.paginate_button_disabled:hover, .paging_full_numbers a.disabled:hover {
-    background-color: #FFF !important;
+    background-color: var(--colorbackbody) !important;
 }
 .paginate_button, .paginate_active {
   border: 1px solid #ddd !important;
@@ -4765,11 +4857,6 @@ div.dataTables_length select {
 /*  Select2                                                                       */
 /* ============================================================================== */
 
-.select2-container--default .select2-results__option--highlighted[aria-selected] {
-    background-color: rgb(<?php echo $colorbackhmenu1 ?>);
-    color: #<?php echo $colortextbackhmenu; ?>;
-}
-
 .select2-container--focus span.select2-selection.select2-selection--single {
     border-bottom: 1px solid #666 !important;
 }
@@ -4777,10 +4864,11 @@ div.dataTables_length select {
 .blockvmenusearch .select2-container--default .select2-selection--single,
 .blockvmenubookmarks .select2-container--default .select2-selection--single
 {
-    background-color: unset;
+    background-color: var(--colorbackvmenu1);
 }
 .select2-container--default .select2-selection--single .select2-selection__rendered {
-    color: unset;
+    color: var(--colortext);
+    background-color: var(--colorbackvmenu1);
 }
 .select2-default {
     color: #999 !important;
@@ -4799,7 +4887,7 @@ div.dataTables_length select {
 	background-image: none;
 }
 .select2-container .select2-choice {
-	color: #000;
+	color: var(--colortext);
 	border-radius: 0;
 }
 .selectoptiondisabledwhite {
@@ -4840,7 +4928,12 @@ div.dataTables_length select {
 .select2-container--default .select2-selection--multiple {
 	border: solid 1px rgba(0,0,0,.2);
 	border-radius: 0 !important;
+	background: var(--inputbackgroundcolor);
 }
+.select2-container--default .select2-selection--multiple .select2-selection__choice{
+	background-color: var(--inputbackgroundcolor);
+}
+
 .select2-search__field
 {
 	outline: none;
@@ -4851,6 +4944,7 @@ div.dataTables_length select {
 	-webkit-box-shadow: none !important;
 	box-shadow: none !important;
 	border-radius: 0 !important;
+	color: black;
 }
 .select2-container-active .select2-choice, .select2-container-active .select2-choices
 {
@@ -4862,11 +4956,12 @@ div.dataTables_length select {
 	box-shadow: none !important;
 }
 .select2-dropdown {
-	border: 1px solid #ccc;
-	box-shadow: 1px 2px 10px #ddd;
+	background-color: var(--colorbackvmenu1);
+	border: 1px solid var(--colorbackvmenu1);;
+	box-shadow: 1px 2px 10px var(--colorbackvmenu1);
 }
 .select2-dropdown-open {
-	background-color: #fff;
+	background-color: var(--colorbackvmenu1);
 }
 .select2-dropdown-open .select2-choice, .select2-dropdown-open .select2-choices
 {
@@ -4876,7 +4971,7 @@ div.dataTables_length select {
 	border-bottom: none;
 	-webkit-box-shadow: none !important;
 	box-shadow: none !important;
-	background-color: #fff;
+	background-color: var(--colorbackvmenu1);
 }
 .select2-disabled
 {
@@ -4894,7 +4989,7 @@ div.dataTables_length select {
 }
 div.select2-drop-above
 {
-	background: #fff;
+	background: var(--colorbackvmenu1);e
 	-webkit-box-shadow: none !important;
 	box-shadow: none !important;
 }
@@ -4916,13 +5011,13 @@ a span.select2-chosen
 }
 .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit
 {
-	background: #FFFFFF;
+	background: var(--colorbackvmenu1);
 }
 .select2-results {
 	max-height:	400px;
 }
 .select2-container.select2-container-disabled .select2-choice, .select2-container-multi.select2-container-disabled .select2-choices {
-	background-color: #FFFFFF;
+	background-color: var(--colorbackvmenu1);
 	background-image: none;
 	border: none;
 	cursor: default;
@@ -4952,7 +5047,7 @@ a span.select2-chosen
     opacity: 0.4;
 }
 .select2-container--default .select2-selection--single .select2-selection__placeholder {
-	color: unset;
+	color: var(--colortext);
 	opacity: 0.4;
 }
 span#select2-boxbookmark-container, span#select2-boxcombo-container {
@@ -4983,15 +5078,15 @@ span#select2-boxbookmark-container, span#select2-boxcombo-container {
   cursor: default;
   border: 1px solid #aaaaaa;
   border-radius: 3px;
-  -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 0 2px var(--inputbackgroundcolor) inset, 0 1px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 2px var(--inputbackgroundcolor) inset, 0 1px 0 rgba(0, 0, 0, 0.05);
   background-clip: padding-box;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background-color: #e4e4e4;
+  background-color: var(--inputbackgroundcolor);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
   background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
   background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
@@ -5056,7 +5151,7 @@ span.noborderoncategories {
   top: 0.8em;
   float: left;
   min-width: 100%;
-  background: #fff;
+  background: var(--inputbackgroundcolor);
   margin: 1em 0;
   padding: 0.4em 0;
   border: 1px solid #aaa;
@@ -5076,7 +5171,7 @@ span.noborderoncategories {
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
-  background-color: #fff;
+  background-color: var(--inputbackgroundcolor);
   cursor: default;
 
   border: none;
@@ -5155,7 +5250,7 @@ dl.dropdown {
     display:none;
 }
 .dropdown dd ul {
-    background-color: #FFF;
+    background-color: var(--inputbackgroundcolor);
     box-shadow: 1px 1px 10px #aaa;
     display:none;
     <?php echo $right; ?>:0px;						/* pop is align on right */
@@ -5171,8 +5266,8 @@ dl.dropdown {
 	white-space: nowrap;
 	font-weight: normal;
 	padding: 7px 8px 7px 8px;
-	/* color: rgb(<?php print $colortext; ?>); */
-	color: #000;
+	/* color: var(--colortext); */
+	color: var(--colortext);
 }
 .dropdown dd ul li:hover {
 	background: #eee;
@@ -5188,7 +5283,7 @@ dl.dropdown {
 	color: #888;
 }
 .dropdown dd ul li a:hover {
-    background-color:#eee;
+    background-color: var(--inputbackgroundcolor);
 }
 dd.dropdowndd ul li {
     text-overflow: ellipsis;
@@ -5291,10 +5386,10 @@ a.tab span.ui-btn-inner
 }
 
 .ui-link {
-	color: rgb(<?php print $colortext; ?>);
+	color: var(--colortext);
 }
 .liste_titre .ui-link {
-	color: rgb(<?php print $colortexttitle; ?>) !important;
+	color: var(--colortexttitle) !important;
 }
 
 a.ui-link {
@@ -5362,14 +5457,14 @@ ul.ulmenu {
     border: none;
     background: none;
     text-shadow: none;
-    color: rgb(<?php print $colortexttitlenotab; ?>) !important;
+    color: var(--colortexttitlenotab) !important;
 }
 .ui-bar-b, .lilevel0 {
     background-repeat: repeat-x;
     border: none;
     background: none;
     text-shadow: none;
-    color: rgb(<?php print $colortexttitlenotab; ?>) !important;
+    color: var(--colortexttitlenotab) !important;
 }
 .alilevel0 {
 	font-weight: normal !important;
@@ -5379,7 +5474,7 @@ ul.ulmenu {
     border-bottom-width: 0px !important;
 }
 .alilevel0 {
-    color: rgb(<?php echo $colortexttitle; ?>) !important;
+    color: var(--colortexttitle) !important;
     background: #f8f8f8
 }
 .ulmenu {
@@ -5398,7 +5493,7 @@ ul.ulmenu {
 	text-shadow: none;
 }
 .ui-body-c .ui-link, .ui-body-c .ui-link:visited, .ui-body-c .ui-link:hover {
-	color: rgb(<?php print $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 .ui-btn-up-c .vsmenudisabled {
 	color: #<?php echo $colorshadowtitle; ?> !important;
@@ -5408,7 +5503,7 @@ div.tabsElem a.tab {
 	background: transparent;
 }
 .alilevel1 {
-    color: rgb(<?php print $colortexttitlenotab; ?>) !important;
+    color: var(--colortexttitlenotab) !important;
 }
 .lilevel1 {
     border-top: 2px solid #444;
@@ -5855,7 +5950,7 @@ div.tabsElem a.tab {
     	white-space: nowrap;
   		overflow: hidden;
   		text-overflow: ellipsis;
-  		color: #<?php echo $colortextbackhmenu; ?>;
+  		color: var(--colortextbackhmenu);
 	}
 	.mainmenuaspan {
   		font-size: 0.9em;
@@ -5916,12 +6011,12 @@ div.tabsElem a.tab {
 {
 	.side-nav {
 		z-index: 200;
-		background: rgb(<?php echo $colorbackvmenu1; ?>);
+		background: var(--colorbackvmenu1);
 		padding-top: 70px;
     }
 	#id-left {
     	z-index: 201;
-		background: rgb(<?php echo $colorbackvmenu1; ?>);
+		background: var(--colorbackvmenu1);
 	}
 
     .login_vertical_align {
@@ -5960,7 +6055,7 @@ div.tabsElem a.tab {
 		text-align: center;
         vertical-align: middle;
 
-		background: rgb(<?php echo $colorbackvmenu1; ?>);
+		background: var(--colorbackvmenu1);
 
         height: 50px;
 
@@ -6026,6 +6121,8 @@ div.tabsElem a.tab {
 	}
 }
 
+
+
 <?php
 include dol_buildpath($path.'/theme/'.$theme.'/dropdown.inc.php', 0);
 include dol_buildpath($path.'/theme/'.$theme.'/info-box.inc.php', 0);
@@ -6033,3 +6130,9 @@ include dol_buildpath($path.'/theme/'.$theme.'/progress.inc.php', 0);
 include dol_buildpath($path.'/theme/'.$theme.'/timeline.inc.php', 0);
 
 if (!empty($conf->global->THEME_CUSTOM_CSS)) print $conf->global->THEME_CUSTOM_CSS;
+
+?>
+
+div.flot-text .flot-tick-label .tickLabel{
+	color: unset;
+}