Add Dark mode

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;
+    background-color: var(--btncolorbg);
-	border: 1px solid #fff;
+	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{