Skip to content

Commit fdc7cf4

Browse files
mdazfar2mdazfar2
authored
Merge pull request #216 from Varsani2520/contact-form-dark
apply dark moode in feedback form
2 parents a906006 + f1d20b4 commit fdc7cf4

3 files changed

Lines changed: 442 additions & 197 deletions

File tree

‎Official_Website/darkmode.js‎

Lines changed: 142 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,148 @@
1-
/* app.js */
1+
// darkmode.js
22

33
function toggleTheme() {
44
document.body.classList.toggle("dark-mode");
5-
document.querySelector("header").classList.toggle("dark-mode");
6-
document.querySelector(".sponsor-button").classList.toggle("dark-mode");
7-
document.querySelectorAll(".icons a").forEach((icon) => {
8-
icon.classList.toggle("dark-mode");
5+
6+
// Check if dark mode is currently active and store the preference
7+
if (document.body.classList.contains("dark-mode")) {
8+
localStorage.setItem("theme", "dark");
9+
} else {
10+
localStorage.setItem("theme", "light");
11+
}
12+
13+
applyThemeToElements();
14+
}
15+
16+
function applyThemeToElements() {
17+
const darkMode = document.body.classList.contains("dark-mode");
18+
const elements = [
19+
document.querySelector("header"),
20+
document.querySelector(".sponsor-button"),
21+
...document.querySelectorAll(".icons a"),
22+
document.getElementById("search-bar"),
23+
document.getElementById("search-box"),
24+
...document.querySelectorAll("#folders-container div"),
25+
document.querySelector(".feedback"),
26+
document.querySelector("#feedback-section"),
27+
...document.querySelectorAll(".feedback-form input"),
28+
...document.querySelectorAll(".feedback-form textarea"),
29+
...document.querySelectorAll(".feedback-form button")
30+
];
31+
32+
elements.forEach((element) => {
33+
if (element) {
34+
if (darkMode) {
35+
element.classList.add("dark-mode");
36+
} else {
37+
element.classList.remove("dark-mode");
38+
}
39+
}
40+
});
41+
}
42+
43+
function loadTheme() {
44+
const theme = localStorage.getItem("theme");
45+
if (theme === "dark") {
46+
document.body.classList.add("dark-mode");
47+
} else {
48+
document.body.classList.remove("dark-mode");
49+
}
50+
applyThemeToElements();
51+
}
52+
53+
document.addEventListener("DOMContentLoaded", loadTheme);
54+
55+
56+
function toggleTheme() {
57+
document.body.classList.toggle('dark-mode');
58+
document.querySelectorAll('.card-header').forEach(element => {
59+
element.classList.toggle('dark-mode');
60+
});
61+
document.querySelectorAll('.card-body').forEach(element => {
62+
element.classList.toggle('dark-mode');
963
});
10-
document.getElementById("search-bar").classList.toggle("dark-mode");
11-
document.getElementById("search-box").classList.toggle("dark-mode");
12-
document.querySelectorAll("#folders-container div").forEach((folder) => {
13-
folder.classList.toggle("dark-mode");
64+
document.querySelectorAll('.about-button1').forEach(element => {
65+
element.classList.toggle('dark-mode');
1466
});
67+
document.querySelectorAll('.nav__item a').forEach(element => {
68+
element.classList.toggle('dark-mode');
69+
});
70+
document.body.classList.toggle('dark-mode'); // Toggle dark mode on the body
71+
72+
// Toggle dark mode on specific elements as needed
73+
document.querySelectorAll('.header').forEach(element => {
74+
element.classList.toggle('dark-mode');
75+
});
76+
77+
document.querySelectorAll('.nav__item a').forEach(element => {
78+
element.classList.toggle('dark-mode');
79+
});
80+
81+
document.querySelectorAll('.about-button').forEach(element => {
82+
element.classList.toggle('dark-mode');
83+
});
84+
}
85+
// darkmode.js
86+
87+
function toggleTheme() {
88+
document.body.classList.toggle("dark-mode");
89+
90+
// Check if dark mode is currently active and store the preference
91+
if (document.body.classList.contains("dark-mode")) {
92+
localStorage.setItem("theme", "dark");
93+
} else {
94+
localStorage.setItem("theme", "light");
95+
}
96+
97+
applyThemeToElements();
1598
}
99+
100+
function applyThemeToElements() {
101+
const darkMode = document.body.classList.contains("dark-mode");
102+
const elements = [
103+
document.querySelector("header"),
104+
document.querySelector(".sponsor-button"),
105+
...document.querySelectorAll(".icons a"),
106+
document.getElementById("search-bar"),
107+
document.getElementById("search-box"),
108+
document.getElementById("folders-container"), // Add folders-container here
109+
document.querySelector(".feedback"),
110+
document.querySelector("#feedback-section"),
111+
...document.querySelectorAll(".feedback-form input"),
112+
...document.querySelectorAll(".feedback-form textarea"),
113+
...document.querySelectorAll(".feedback-form button")
114+
];
115+
116+
elements.forEach((element) => {
117+
if (element) {
118+
if (darkMode) {
119+
element.classList.add("dark-mode");
120+
} else {
121+
element.classList.remove("dark-mode");
122+
}
123+
}
124+
});
125+
}
126+
127+
function loadTheme() {
128+
const theme = localStorage.getItem("theme");
129+
if (theme === "dark") {
130+
document.body.classList.add("dark-mode");
131+
} else {
132+
document.body.classList.remove("dark-mode");
133+
}
134+
applyThemeToElements();
135+
}
136+
137+
document.addEventListener("DOMContentLoaded", loadTheme);
138+
139+
// Additional logic for specific elements as per your design
140+
document.addEventListener("DOMContentLoaded", function () {
141+
// Example: Apply dark mode to folders-container initially
142+
const foldersContainer = document.getElementById("folders-container");
143+
if (localStorage.getItem("theme") === "dark") {
144+
foldersContainer.classList.add("dark-mode");
145+
} else {
146+
foldersContainer.classList.remove("dark-mode");
147+
}
148+
});

0 commit comments

Comments
 (0)