https://harshit-jain52.github.io/scripts/theme.js

1const loadTheme = (theme) => {
2  const root = document.querySelector(":root");
3  const darkLogos = document.querySelectorAll(".logo-dark");
4  const lightLogos = document.querySelectorAll(".logo-light");
5  const langsCard = document.querySelector(".langs-card");
6
7  root.setAttribute("color-scheme", `${theme}`);
8  localStorage.setItem("hjpf.theme", `${theme}`);
9
10  if (theme == "dark") {
11    if (langsCard) {
12      langsCard.src =
13        "https://github-readme-stats.vercel.app/api/top-langs/?username=harshit-jain52&hide_progress=true&hide=cmake&langs_count=10&theme=algolia";
14    }
15
16    darkLogos.forEach((logo) => {
17      logo.style.display = "flex";
18    });
19
20    lightLogos.forEach((logo) => {
21      logo.style.display = "none";
22    });
23
24    document.querySelector(".dark").style.display = "flex";
25    document.querySelector(".light").style.display = "none";
26  } else {
27    if (langsCard) {
28      langsCard.src =
29        "https://github-readme-stats.vercel.app/api/top-langs/?username=harshit-jain52&hide_progress=true&hide=cmake&langs_count=10&theme=noctis_minimus";
30    }
31
32    darkLogos.forEach((logo) => {
33      logo.style.display = "none";
34    });
35
36    lightLogos.forEach((logo) => {
37      logo.style.display = "flex";
38    });
39
40    document.querySelector(".dark").style.display = "none";
41    document.querySelector(".light").style.display = "flex";
42  }
43};
44
45const getCurrentTheme = () => {
46  let theme = matchMedia("(prefers-color-scheme: dark)").matches
47    ? "dark"
48    : "light";
49  let local = localStorage.getItem("hjpf.theme");
50  if (local) theme = local;
51  return theme;
52};
53
54currTheme = getCurrentTheme();
55loadTheme(currTheme);
56
57const btn = document.querySelector("#theme");
58btn.addEventListener("click", () => {
59  let theme = getCurrentTheme();
60  if (theme == "dark") {
61    theme = "light";
62    loadTheme(theme);
63  } else {
64    theme = "dark";
65    loadTheme(theme);
66  }
67});