From bdcb955165bc7799bb435a9aa01ba5962b43d22e Mon Sep 17 00:00:00 2001
From: Kristy Fournier <124598538+kristy-fournier@users.noreply.github.com>
Date: Sun, 19 Jan 2025 19:14:18 -0500
Subject: [PATCH] dark mode testing
---
Client/index.html | 4 ++--
Client/scripts.js | 12 ++++++++++++
Client/styles.css | 7 +++++++
3 files changed, 21 insertions(+), 2 deletions(-)
diff --git a/Client/index.html b/Client/index.html
index 97ab4aa..c2f2400 100644
--- a/Client/index.html
+++ b/Client/index.html
@@ -6,7 +6,7 @@
-
+
@@ -56,7 +56,7 @@ changes visibility with JS-->
diff --git a/Client/scripts.js b/Client/scripts.js
index bc36002..e17be30 100644
--- a/Client/scripts.js
+++ b/Client/scripts.js
@@ -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)
diff --git a/Client/styles.css b/Client/styles.css
index eab1d5c..8857c11 100644
--- a/Client/styles.css
+++ b/Client/styles.css
@@ -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 {