added Dark mode to website and styled it up a little (#778)

* added dark mode

* added css and js files
This commit is contained in:
Dhruv
2024-12-31 00:37:16 +05:30
committed by GitHub
parent 4f51f408a1
commit 01ad54a5b7
7 changed files with 432 additions and 111 deletions

36
js/darkmode.js Normal file
View File

@@ -0,0 +1,36 @@
const darkBG = "#141414";
const darkLink = "#ff1c5c";
const darkText = "Dark Mode";
const darkColor = "black";
const lightBG = "white";
const lightLink = "#9e1bd6";
const lightText = "Light Mode";
const lightColor = "white";
darkMode = false;
function lightDark(s) {
let root = document.documentElement;
document.querySelector("img").classList.toggle("invert");
document.querySelector("button").classList.toggle("hover");
document.querySelector("form select").classList.toggle("hover");
document
.querySelectorAll("form input")
.forEach((e) => e.classList.toggle("hover"));
document.querySelector("form input[type='text']").classList.toggle("white");
document.querySelector("form span").classList.toggle("muted-color");
if (!darkMode) {
darkMode = true;
s.innerText = lightText;
root.style.setProperty("--link-color", darkLink);
root.style.setProperty("--bg-color", darkBG);
} else {
darkMode = false;
s.innerText = darkText;
root.style.setProperty("--link-color", lightLink);
root.style.setProperty("--bg-color", lightBG);
}
console.log(darkMode);
}