From 8cd7bfc8559310c90874aca6a3d951d81b4ed111 Mon Sep 17 00:00:00 2001
From: ray <rayane.boucherit@etu.u-paris.fr>
Date: Mon, 24 May 2021 15:03:02 +0200
Subject: [PATCH] dark mode for galene interface

---
 static/galene.css  | 55 ++++++++++++++++++++++++++++++++++++++++++++++
 static/galene.html |  5 +++++
 static/galene.js   | 12 ++++++++++
 3 files changed, 72 insertions(+)

diff --git a/static/galene.css b/static/galene.css
index 29c0150..89733a8 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -1311,3 +1311,58 @@ header .collapse {
     }
 
 }
+
+/* Changes made by dark mode */
+.app-dark {
+    background-color: #212529;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    box-shadow: 0 1px 1px 0 rgba(90, 89, 89, 0.06), 0 2px 5px 0 rgba(0, 0, 0, .2);
+}
+
+.sidenav-content-dark {
+    padding: 10px;
+    background: #212529;
+    height: 100%;
+}
+
+#left-sidebar.left-sidebar-dark {
+    min-width: 200px;
+    max-width: 200px;
+    transition: all 0.3s;
+    background: #212529;
+    border-right: 1px solid #3b3b3b;
+    z-index: 1039;
+}
+
+#chat.chat-dark {
+    padding: 0;
+    margin: 0;
+    background-color: #212529;
+    background-size: cover;
+    overflow-y: scroll;
+    border: none;
+        border-right-color: currentcolor;
+        border-right-style: none;
+        border-right-width: medium;
+    border-right: 4px solid #3b3b3b;
+    height: 100% !important;
+    width: 100%;
+    min-width: 300px;
+    overflow: hidden;
+}
+
+#users.users-dark {
+    padding: 0;
+    margin: 0;
+    height: calc(100% - 84px);
+    width: 100%;
+    z-index: 1;
+    position: relative;
+    display: block;
+    background-color: #212529;
+    overflow-y: auto;
+    border: 1px solid #3b3b3b;
+}
+/*end of changes*/
\ No newline at end of file
diff --git a/static/galene.html b/static/galene.html
index 487b022..d43c41a 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -229,6 +229,11 @@
             <label for="activitybox">Activity detection</label>
           </form>
 
+          <form>
+            <input id="darkmode" type="checkbox"/>
+            <label for="darkmode">Dark mode</label>
+          </form>
+
         </fieldset>
 
         <form id="fileform">
diff --git a/static/galene.js b/static/galene.js
index 7e1a6a2..ea47c45 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -2727,4 +2727,16 @@ function start() {
     document.getElementById("login-container").classList.remove('invisible');
 }
 
+//Dark mode function
+getInputElement('darkmode').onchange = function (e){
+    e.preventDefault();
+    if(!(this instanceof HTMLInputElement))
+        throw new Error('Unexpected type for this');
+    document.getElementById('main').classList.toggle('app-dark');
+    document.getElementById('optionsdiv').classList.toggle('sidenav-content-dark');
+    document.getElementById('left-sidebar').classList.toggle('left-sidebar-dark');
+    document.getElementById('chat').classList.toggle('chat-dark');
+    document.getElementById('users').classList.toggle('users-dark');
+}
+
 start();