From 7457796a953c0865a3972aa8bece9d455a05d4fe Mon Sep 17 00:00:00 2001
From: Pierre Ardoin <32256817+mapiolca@users.noreply.github.com>
Date: Fri, 21 Feb 2020 17:38:10 +0100
Subject: [PATCH] Add Dark mode

---
 htdocs/theme/eldy/btn.inc.php | 42 +++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/htdocs/theme/eldy/btn.inc.php b/htdocs/theme/eldy/btn.inc.php
index edf40cf2b52..9788a1176bb 100644
--- a/htdocs/theme/eldy/btn.inc.php
+++ b/htdocs/theme/eldy/btn.inc.php
@@ -3,6 +3,34 @@ 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_DARKMODEENABLEDMAIN_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);
+ 
+      }
+    }";
+    }
+?>
+
 
 /* ============================================================================== */
 /* Buttons for actions                                                            */
@@ -24,7 +52,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 +137,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 +210,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 +253,7 @@ TITLE BUTTON
 }
 
 .btnTitle:hover .btnTitle-label{
-    /* color: #ffffff; */
+     color: var(--btncolorborderhover); 
 }
 
 .btnTitle.refused .btnTitle-label, .btnTitle.refused:hover .btnTitle-label{