KristyF/PartyJukebox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dark mode testing

Browse source
This commit is contained in:
Kristy Fournier 2025-01-19 19:14:18 -05:00
parent b1f1a38748
commit bdcb955165
3 changed files with 21 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Client/index.html
View file

@ -6,7 +6,7 @@
<link rel="stylesheet" href="styles.css">
<link rel="manifest" href="manifest.json" />
</head>
<body>
<body id="test-body">
<!--Cookie Popup(does it matter if im not tracking them? i have no idea)-->
<script type="text/javascript" src="https://cookieconsent.popupsmart.com/src/js/popper.js"></script><script> window.start.init({Palette:"palette2",Mode:"floating left",Theme:"classic",LinkText:" Learn More!",Message:"This website uses cookies to save necessary data to your device, and no tracking is performed.",Time:"0",})</script>
@ -56,7 +56,7 @@ changes visibility with JS-->
<!--
<div class="item">
<h2 for="darkmode-button">Dark Mode:</h2>
<p class="italic">opposite of light mode</p>
<p class="italic">Opposite of light mode</p>
<button title="darkmode-button" id="darkmode-button">Off</button>
</div>
-->

12
Client/scripts.js
View file

@ -280,6 +280,17 @@ function checkWhatSongWasClicked(e) {
submitSong(itemId);
}
}
function toggleDark(e) {
let x = document.getElementById("test-body").classList
if (!(x.contains("dark-mode"))) {
document.getElementById("darkmode-button").innerHTML = "On"
x.add("dark-mode");
} else {
document.getElementById("darkmode-button").innerHTML = "Off"
x.remove("dark-mode");
}
}
let optionslist = []
@ -317,6 +328,7 @@ document.getElementById("songlist").addEventListener('click', function(e){checkW
//makes the controls look mostly normal on all screens, best solution i could find, idk man
let tempWidth = document.getElementById('controls').clientWidth;
document.getElementById("controls").style.marginLeft = "-"+String(parseInt(tempWidth/2))+"px";
document.getElementById("darkmode-button").addEventListener('click',function(){toggleDark()})
//for my use case (my immediate family), they dont know how to set an ip
//using this allows the creator of the link for, a qr code for example, to set the ip before distributing the code, and it would all work smoothly
//example (http://192.168.1.100:8000/?ip=192.168.1.100:19054 sets the ip to the same host at the default port)

7
Client/styles.css
View file

@ -1,5 +1,12 @@
/* testing */
.dark-mode {
background-color: #333333;
color:#ffffff;
/* -webkit-filter:invert(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); */
}
/* Things that are always visible */
body {