diff --git a/htdocs/theme/eldy/btn.inc.php b/htdocs/theme/eldy/btn.inc.php
index edf40cf2b52..4831bb40c4a 100644
--- a/htdocs/theme/eldy/btn.inc.php
+++ b/htdocs/theme/eldy/btn.inc.php
@@ -2,6 +2,32 @@
 if (!defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
 /* <style type="text/css" > */
 
+:root {
+            --btncolortext:rgb(<?php print $colortextlink; ?>);
+            --btncolorbg: #fbfbfb;
+            --btncolorborderhover: none;
+            --btncolorborder: #FFF;
+            --butactionbg:rgb(225, 231, 225);
+            --butactiondeletebg: rgb(234,228,225);
+}
+
+<?php
+if (!empty($conf->global->MAIN_THEME_DARKMODEENABLED)) {
+	print "
+    @media (prefers-color-scheme: dark) {
+      :root {
+
+            --btncolortext: ;
+            --btncolorbg: rgb(26,27,27);
+            --btncolorborderhover: #ffffff;
+            --btncolorborder: #2b2c2e;
+            --butactionbg:rgb(173,140,79);
+            --butactiondeletebg: rgb(252,84,91);
+
+      }
+    }";
+}
+?>
 
 
 /* ============================================================================== */
@@ -24,7 +50,7 @@ span.butAction, span.butActionDelete {
 }
 
 .butAction {
-    background: rgb(225, 231, 225)
+    background: var(--butactionbg);
     /* background: rgb(230, 232, 239); */
 }
 .butActionRefused, .butAction, .butAction:link, .butAction:visited, .butAction:hover, .butAction:active, .butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active {
@@ -109,7 +135,7 @@ span.butActionNewRefused>span.fa, span.butActionNewRefused>span.fa:hover
 }
 
 .butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active, .buttonDelete {
-    background: rgb(234, 228, 225);
+    background: var(--butactiondeletebg);
     /* border: 1px solid #633; */
     color: #633;
 }
@@ -182,18 +208,18 @@ TITLE BUTTON
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    box-shadow: none;
+    box-shadow: var(--btncolorbg);
     text-decoration: none;
     position: relative;
     margin: 0 0 0 10px;
     min-width: 80px;
     text-align: center;
-    color: rgb(<?php print $colortextlink; ?>);
+    color: var(--btncolortext);
     border: none;
     font-size: 12px;
     font-weight: 300;
-    background-color: #fbfbfb;
-	border: 1px solid #fff;
+    background-color: var(--btncolorbg);
+	border: 1px solid var(--btncolorborder);
 }
 
 .btnTitle > .btnTitle-icon{
@@ -225,7 +251,7 @@ TITLE BUTTON
 }
 
 .btnTitle:hover .btnTitle-label{
-    /* color: #ffffff; */
+     color: var(--btncolorborderhover);
 }
 
 .btnTitle.refused .btnTitle-label, .btnTitle.refused:hover .btnTitle-label{
diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php
index 1de1f734f55..8479dc7f67c 100644
--- a/htdocs/theme/eldy/global.inc.php
+++ b/htdocs/theme/eldy/global.inc.php
@@ -5,14 +5,95 @@
 /* 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 +112,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 ?>; 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 ?>; 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;
@@ -69,7 +151,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 {
@@ -229,7 +311,7 @@ select.flat, form.flat select {
 	font-size: unset;
 }
 .optionblue {
-	color: rgb(<?php echo $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 .optiongrey, .opacitymedium {
 	opacity: 0.4;
@@ -536,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;
 }
 
 .floatnone {
@@ -747,16 +829,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;
 }
@@ -1110,7 +1193,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') { ?>
@@ -1157,7 +1240,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 {
@@ -1178,7 +1261,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;
 }
 
@@ -1271,7 +1354,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%;
@@ -1340,7 +1423,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"; } ?>
@@ -1570,10 +1653,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;
 }
 
@@ -1590,8 +1673,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 ?>));
+	background: var(--colorbackhmenu1);
+	background-image: linear-gradient(-45deg, <?php echo colorAdjustBrightness(colorArrayToHex(colorStringToArray($colorbackhmenu1)), '5'); ?>, var(--colorbackhmenu1));
 	/* box-shadow: 0px 0px 5px #eee; */
 <?php } ?>
 }
@@ -1647,7 +1730,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;
 }
@@ -1655,14 +1738,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;
 }
 
@@ -2103,7 +2186,7 @@ div.login_block {
 	<?php } ?>
 }
 div.login_block a {
-	color: #<?php echo $colortextbackhmenu; ?>;
+	color: var(--colortextbackhmenu);
 	display: inline-block;
 }
 div.login_block span.aversion {
@@ -2118,10 +2201,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 {
@@ -2262,11 +2345,19 @@ 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; ?>; 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; ?>;
+	color: #202020;
+	margin: 1px 1px 1px 6px;
+}
 font.vsmenudisabled { font-family: <?php print $fontlist ?>; text-align: <?php print $left; ?>; 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; }
 
@@ -2318,7 +2409,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;
@@ -2331,7 +2422,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 {
@@ -2456,7 +2547,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;
@@ -2464,7 +2555,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 tr.titre td {
 	padding-top: 20px;
@@ -2545,7 +2636,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 ?>;
@@ -2562,20 +2653,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;
 }
@@ -2756,7 +2847,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;
@@ -2792,7 +2883,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;
@@ -2883,13 +2974,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;
 }
@@ -3001,7 +3092,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,
@@ -3038,19 +3129,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 } ?>
 
@@ -3066,37 +3157,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;
@@ -3167,10 +3258,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; ?>;
 }
@@ -3199,10 +3290,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;
@@ -3230,7 +3321,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 {
@@ -3305,11 +3396,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)
@@ -3321,11 +3412,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)
@@ -3334,7 +3425,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;
 }
 
 
@@ -3363,10 +3454,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 {
@@ -3447,7 +3538,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;
@@ -3508,7 +3599,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;
@@ -3541,8 +3632,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;
@@ -3616,7 +3707,7 @@ div.warning {
     background: #fcf8e3;
 }
 div.warning a, div.info a, div.error a {
-	color: rgb(<?php echo $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 
 /* Error message */
@@ -3676,7 +3767,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: 32px; text-align: <?php echo $left; ?>; }
 span.widthpictotitle { font-size: 2.1em; };
@@ -3684,7 +3775,7 @@ span.widthpictotitle { font-size: 2.1em; };
 .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; }
@@ -3743,7 +3834,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{
@@ -3892,8 +3983,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);
 }
 
 
@@ -3928,7 +4019,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;
@@ -3990,7 +4081,7 @@ table.dp {
 }
 .datenowlink
 {
-	color: rgb(<?php print $colortextlink; ?>);
+	color: var(--colortextlink);
 }
 
 
@@ -4158,7 +4249,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 */
@@ -4168,7 +4259,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;
@@ -4220,7 +4311,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; }
 
 
 
@@ -4353,7 +4444,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;
 }
 
@@ -4813,14 +4904,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;
@@ -4888,10 +4979,11 @@ input.select2-input {
 .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;
@@ -4910,7 +5002,7 @@ input.select2-input {
 	background-image: none;
 }
 .select2-container .select2-choice {
-	color: #000;
+	color: var(--colortext);
 	border-radius: 0;
 }
 .selectoptiondisabledwhite {
@@ -4959,7 +5051,12 @@ input.select2-input {
 	border-left: none;
 	border-right: none;
 	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;
@@ -4970,6 +5067,7 @@ input.select2-input {
 	-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
 {
@@ -4981,11 +5079,12 @@ input.select2-input {
 	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
 {
@@ -4995,7 +5094,7 @@ input.select2-input {
 	border-bottom: none;
 	-webkit-box-shadow: none !important;
 	box-shadow: none !important;
-	background-color: #fff;
+	background-color: var(--colorbackvmenu1);
 }
 .select2-disabled
 {
@@ -5013,7 +5112,7 @@ input.select2-input {
 }
 div.select2-drop-above
 {
-	background: #fff;
+	background: var(--colorbackvmenu1);e
 	-webkit-box-shadow: none !important;
 	box-shadow: none !important;
 }
@@ -5035,13 +5134,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;
@@ -5071,7 +5170,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 {
@@ -5102,15 +5201,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%);
@@ -5175,7 +5274,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;
@@ -5195,7 +5294,7 @@ span.noborderoncategories {
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
-  background-color: #fff;
+  background-color: var(--inputbackgroundcolor);
   cursor: default;
 
   border: none;
@@ -5274,7 +5373,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 */
@@ -5290,8 +5389,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;
@@ -5307,7 +5406,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;
@@ -5410,10 +5509,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 {
@@ -5481,14 +5580,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;
@@ -5498,7 +5597,7 @@ ul.ulmenu {
     border-bottom-width: 0px !important;
 }
 .alilevel0 {
-    color: rgb(<?php echo $colortexttitle; ?>) !important;
+    color: var(--colortexttitle) !important;
     background: #f8f8f8
 }
 .ulmenu {
@@ -5517,7 +5616,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;
@@ -5527,7 +5626,7 @@ div.tabsElem a.tab {
 	background: transparent;
 }
 .alilevel1 {
-    color: rgb(<?php print $colortexttitlenotab; ?>) !important;
+    color: var(--colortexttitlenotab) !important;
 }
 .lilevel1 {
     border-top: 2px solid #444;
@@ -5974,7 +6073,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;
@@ -6035,12 +6134,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 {
@@ -6079,7 +6178,7 @@ div.tabsElem a.tab {
 		text-align: center;
         vertical-align: middle;
 
-		background: rgb(<?php echo $colorbackvmenu1; ?>);
+		background: var(--colorbackvmenu1);
 
         height: 50px;
 
@@ -6145,6 +6244,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);
@@ -6152,3 +6253,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;
+}