storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark mode in the web interface

Browse Source
This commit is contained in:
Terry Geng 2020-03-11 23:38:17 +08:00
parent 3e795fc713
commit 44ce79189a
3 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/css/bootstrap.darkly.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

21
static/css/custom.css
View File

@ -5,3 +5,24 @@
.playlist-title{float:left; } .playlist-title{float:left; }
.playlist-artwork{float:left; margin-left:10px;} .playlist-artwork{float:left; margin-left:10px;}
.tag-click{cursor:pointer;} .tag-click{cursor:pointer;}
.floating-button {
width: 50px;
height: 50px;
background-color: #aaaaaa40;
border-radius: 50%;
box-shadow: 0 6px 10px 0 #66666647;
transition: all 0.1s ease-in-out;
font-size: 25px;
color: #9896967a;
text-align: center;
line-height: 52px;
position: fixed;
right: 50px;
bottom: 40px;
}
.floating-button:hover {
background-color: hsl(0, 0%, 43%);
color: white;
}

23
templates/index.html
View File

@ -107,7 +107,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>botamusique web interface</title> <title>botamusique web interface</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css"> <link id="pagestyle" rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/custom.css"> <link rel="stylesheet" href="static/css/custom.css">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="Expires" CONTENT="-1">
@ -335,6 +335,8 @@
</div> </div>
</div> </div>
<div class="floating-button" onclick="switchTheme()"> <i class="fas fa-lightbulb" aria-hidden="true"></i> </div>
<script src="static/js/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="static/js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="static/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="static/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="static/js/fontawesome.all.js" crossorigin="anonymous"></script> <script src="static/js/fontawesome.all.js" crossorigin="anonymous"></script>
@ -433,6 +435,25 @@
} }
var theme = "light";
function switchTheme(){
if(theme === "light"){
setPageTheme("dark");
theme = "dark";
}else{
setPageTheme("light");
theme = "light";
}
}
function setPageTheme(theme) {
if(theme === "light")
document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.min.css");
else if(theme === "dark")
document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.darkly.min.css");
}
// Check the version of playlist to see if update is needed. // Check the version of playlist to see if update is needed.
setInterval(function(){ setInterval(function(){
$.ajax({ $.ajax({