1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-22 08:35:57 +01:00

dark mode for galene interface

This commit is contained in:
ray 2021-05-24 15:03:02 +02:00
parent 84856f537b
commit 8cd7bfc855
3 changed files with 72 additions and 0 deletions

View file

@ -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*/

View file

@ -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">

View file

@ -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();