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="stylesheet" href="styles.css">
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
</head> </head>
<body> <body id="test-body">
<!--Cookie Popup(does it matter if im not tracking them? i have no idea)--> <!--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> <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"> <div class="item">
<h2 for="darkmode-button">Dark Mode:</h2> <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> <button title="darkmode-button" id="darkmode-button">Off</button>
</div> </div>
--> -->

12
Client/scripts.js
View file

@ -280,6 +280,17 @@ function checkWhatSongWasClicked(e) {
submitSong(itemId); 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 = [] 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 //makes the controls look mostly normal on all screens, best solution i could find, idk man
let tempWidth = document.getElementById('controls').clientWidth; let tempWidth = document.getElementById('controls').clientWidth;
document.getElementById("controls").style.marginLeft = "-"+String(parseInt(tempWidth/2))+"px"; 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 //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 //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) //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 */ /* testing */
.dark-mode {
background-color: #333333;
color:#ffffff;
/* -webkit-filter:invert(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); */
}
/* Things that are always visible */ /* Things that are always visible */
body { body {