Skip to content

Commit 11954f0

Browse files
omroy07omroy07
authored
Merge pull request #1700 from nur-hasin/fix/theme-toggle-consistency-dashboard-pages
fix: resolve theme toggle inconsistency across dashboard pages
2 parents c5b5472 + bbc342c commit 11954f0

File tree

18 files changed

+717
-658
lines changed

18 files changed

+717
-658
lines changed

‎Crop_Prices_Tracker/templates/crop_price_tracker.html‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,18 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Crop Price Tracker</title>
8-
8+
<script>
9+
(function () {
10+
const saved = localStorage.getItem("theme");
11+
const prefersDark = window.matchMedia(
12+
"(prefers-color-scheme: dark)",
13+
).matches;
14+
document.documentElement.setAttribute(
15+
"data-theme",
16+
saved || (prefersDark ? "dark" : "light"),
17+
);
18+
})();
19+
</script>
920
<link rel="stylesheet" href="../static/styles.css">
1021
<link rel="stylesheet" href="../../theme.css">
1122
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
@@ -383,12 +394,29 @@
383394
</div>
384395

385396
<div class="header">
386-
<button class="theme-toggle" aria-label="Toggle theme" style="background: rgba(46, 125, 50, 0.1); border: 1px solid rgba(46, 125, 50, 0.3); color: #2e7d32; padding: 8px 12px; border-radius: 20px; cursor: pointer; transition: 0.3s;">
387-
<i class="fas fa-sun sun-icon"></i>
388-
<i class="fas fa-moon moon-icon"></i>
389-
<span class="theme-text">Light</span>
390-
</button>
391397
<a href="/main.html" class="back-button"><i class="fas fa-arrow-left"></i> Back to Main</a>
398+
<button
399+
style="position:fixed;top:2rem;right:2rem;z-index:999;display:flex;align-items:center;justify-content:center;"
400+
class="theme-toggle" type="button" id="themeToggle" title="Switch theme" aria-label="Switch theme">
401+
<svg class="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
402+
stroke-linejoin="round" style="width:22px;height:22px;">
403+
<mask id="moon-mask">
404+
<rect x="0" y="0" width="100%" height="100%" fill="white" />
405+
<circle class="moon-bite" cx="14" cy="9" r="14" fill="black" />
406+
</mask>
407+
<circle class="sun-core" cx="12" cy="12" r="7" fill="currentColor" mask="url(#moon-mask)" />
408+
<g class="sun-rays" stroke="currentColor">
409+
<line x1="12" y1="1" x2="12" y2="3" />
410+
<line x1="12" y1="21" x2="12" y2="23" />
411+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
412+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
413+
<line x1="1" y1="12" x2="3" y2="12" />
414+
<line x1="21" y1="12" x2="23" y2="12" />
415+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
416+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
417+
</g>
418+
</svg>
419+
</button>
392420
<h2>🌾 Crop Price Tracker</h2>
393421
<div style="width: 50px;"></div>
394422
</div>

‎Gov_schemes/app_scheme.js‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -618,39 +618,6 @@ const loadingState = document.getElementById('loadingState');
618618
const noResults = document.getElementById('noResults');
619619
const lastUpdated = document.getElementById('lastUpdated');
620620

621-
// Theme Management
622-
let isDarkMode = localStorage.getItem('darkMode') === 'true';
623-
624-
function toggleTheme() {
625-
isDarkMode = !isDarkMode;
626-
document.body.classList.toggle('dark-mode', isDarkMode);
627-
localStorage.setItem('darkMode', isDarkMode);
628-
629-
const themeBtn = document.querySelector('.theme-btn');
630-
const themeIcon = document.querySelector('.theme-icon');
631-
632-
if (isDarkMode) {
633-
themeIcon.textContent = '🌙';
634-
themeBtn.childNodes[1].textContent = ' Dark Mode';
635-
} else {
636-
themeIcon.textContent = '🌞';
637-
themeBtn.childNodes[1].textContent = ' Light Mode';
638-
}
639-
}
640-
641-
// Initialize theme
642-
function initializeTheme() {
643-
if (isDarkMode) {
644-
document.body.classList.add('dark-mode');
645-
const themeIcon = document.querySelector('.theme-icon');
646-
const themeBtn = document.querySelector('.theme-btn');
647-
if (themeIcon && themeBtn) {
648-
themeIcon.textContent = '🌙';
649-
themeBtn.childNodes[1].textContent = ' Dark Mode';
650-
}
651-
}
652-
}
653-
654621
// Filter by gender
655622
function filterByGender(gender) {
656623
currentGenderFilter = gender;
@@ -863,9 +830,6 @@ function initialize() {
863830
lastUpdated.textContent = new Date().toLocaleDateString('en-IN');
864831
}
865832

866-
// Initialize theme
867-
initializeTheme();
868-
869833
// Add event listeners
870834
if (searchInput) {
871835
searchInput.addEventListener('input', debounce(applyFilters, 300));
@@ -917,7 +881,7 @@ document.addEventListener('keydown', function(e) {
917881
// T key to toggle theme
918882
if (e.key === 't' && e.target.tagName !== 'INPUT') {
919883
e.preventDefault();
920-
toggleTheme();
884+
window.themeManager?.toggleTheme();
921885
}
922886
});
923887

‎Gov_schemes/index_scheme.html‎

Lines changed: 37 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Government Sponsored Agricultural Schemes Portal</title>
77
<link rel="icon" type="image/png" href="../images/logo.png" />
8+
<script>
9+
(function () {
10+
const saved = localStorage.getItem("theme");
11+
const prefersDark = window.matchMedia(
12+
"(prefers-color-scheme: dark)",
13+
).matches;
14+
document.documentElement.setAttribute(
15+
"data-theme",
16+
saved || (prefersDark ? "dark" : "light"),
17+
);
18+
})();
19+
</script>
820
<link rel="stylesheet" href="styles_scheme.css" />
921
<link rel="stylesheet" href="/index.css">
1022
</head>
@@ -16,23 +28,30 @@ <h1>🌾 Government Agricultural Schemes</h1>
1628
<p>Your complete directory of central and state-backed agriculture schemes</p>
1729

1830
<div class="header-actions">
19-
<!-- THEME TOGGLE BUTTON -->
20-
<!-- When in LIGHT mode: shows 🌙 Dark Mode -->
21-
<!-- When in DARK mode: shows 🌞 Light Mode -->
22-
<button
23-
type="button"
24-
class="theme-btn"
25-
id="themeToggle"
26-
aria-label="Toggle color theme"
27-
>
28-
<span class="theme-icon" id="themeIcon">🌙</span>
29-
<span id="themeLabel">Dark Mode</span>
30-
</button>
31-
3231
<!-- BACK BUTTON -->
3332
<button class="back-btn" type="button" onclick="handleBackNavigation()">
3433
← Back
3534
</button>
35+
<button class="theme-toggle" type="button" id="themeToggle" title="Switch theme" aria-label="Switch theme">
36+
<svg class="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
37+
stroke-linejoin="round" style="width:22px;height:22px;pointer-events:none;">
38+
<mask id="moon-mask">
39+
<rect x="0" y="0" width="100%" height="100%" fill="white" />
40+
<circle class="moon-bite" cx="14" cy="9" r="14" fill="black" />
41+
</mask>
42+
<circle class="sun-core" cx="12" cy="12" r="7" fill="currentColor" mask="url(#moon-mask)" />
43+
<g class="sun-rays" stroke="currentColor">
44+
<line x1="12" y1="1" x2="12" y2="3" />
45+
<line x1="12" y1="21" x2="12" y2="23" />
46+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
47+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
48+
<line x1="1" y1="12" x2="3" y2="12" />
49+
<line x1="21" y1="12" x2="23" y2="12" />
50+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
51+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
52+
</g>
53+
</svg>
54+
</button>
3655
</div>
3756
</div>
3857
</header>
@@ -238,51 +257,8 @@ <h4>Contact</h4>
238257
</footer>
239258
<!-- Cursor Trail -->
240259
<div class="circle-container" id="cursorTrail"></div>
241-
<!-- THEME + BACK BUTTON JS -->
260+
<!-- BACK BUTTON JS -->
242261
<script>
243-
// Initialise theme on load (localStorage > default)[web:30][web:33]
244-
document.addEventListener("DOMContentLoaded", function () {
245-
const body = document.body;
246-
const themeIcon = document.getElementById("themeIcon");
247-
const themeLabel = document.getElementById("themeLabel");
248-
const savedTheme = localStorage.getItem("theme");
249-
250-
if (savedTheme === "dark") {
251-
body.classList.add("dark-mode");
252-
// Page is dark -> button offers Light Mode
253-
themeIcon.textContent = "🌞";
254-
themeLabel.textContent = "Light Mode";
255-
} else {
256-
body.classList.remove("dark-mode");
257-
// Page is light -> button offers Dark Mode
258-
themeIcon.textContent = "🌙";
259-
themeLabel.textContent = "Dark Mode";
260-
}
261-
});
262-
263-
// Toggle theme: text always indicates TARGET theme
264-
function toggleTheme() {
265-
const body = document.body;
266-
const themeIcon = document.getElementById("themeIcon");
267-
const themeLabel = document.getElementById("themeLabel");
268-
269-
const isDark = body.classList.toggle("dark-mode");
270-
271-
if (isDark) {
272-
// Now in dark mode → show Light Mode in button
273-
themeIcon.textContent = "🌞";
274-
themeLabel.textContent = "Light Mode";
275-
localStorage.setItem("theme", "dark");
276-
} else {
277-
// Now in light mode → show Dark Mode in button
278-
themeIcon.textContent = "🌙";
279-
themeLabel.textContent = "Dark Mode";
280-
localStorage.setItem("theme", "light");
281-
}
282-
}
283-
284-
document.getElementById("themeToggle").addEventListener("click", toggleTheme);
285-
286262
// Back navigation with history + fallback
287263
function handleBackNavigation() {
288264
if (window.history.length > 1 && document.referrer !== "") {
@@ -300,12 +276,13 @@ <h4>Contact</h4>
300276
let mouseY = 0;
301277

302278
// Create circles
303-
for (let i = 0; i < circleCount; i++) {
279+
for (let i = 0; i < circleCount; i++) {
304280
const circle = document.createElement('div');
305281
circle.classList.add('cursor-circle');
282+
circle.style.pointerEvents = 'none';
306283
container.appendChild(circle);
307284
circles.push({ el: circle, x: 0, y: 0 });
308-
}
285+
}
309286

310287
// Mouse move
311288
document.addEventListener('mousemove', (e) => {
@@ -354,7 +331,7 @@ <h4>Contact</h4>
354331
animateCursor();
355332
</script>
356333

357-
334+
<script src="../theme.js"></script>
358335
<script src="app_scheme.js"></script>
359336
</body>
360337
</html>

0 commit comments

Comments
 (0)