Skip to content

fix: resolve theme toggle inconsistency across dashboard pages #1700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
omroy07 merged 1 commit into from
Mar 6, 2026
Merged

fix: resolve theme toggle inconsistency across dashboard pages #1700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 34 additions & 6 deletions Crop_Prices_Tracker/templates/crop_price_tracker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,18 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crop Price Tracker</title>

<script>
(function () {
const saved = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
document.documentElement.setAttribute(
"data-theme",
saved || (prefersDark ? "dark" : "light"),
);
})();
</script>
<link rel="stylesheet" href="../static/styles.css">
<link rel="stylesheet" href="../../theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
Expand Down Expand Up @@ -383,12 +394,29 @@
</div>

<div class="header">
<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;">
<i class="fas fa-sun sun-icon"></i>
<i class="fas fa-moon moon-icon"></i>
<span class="theme-text">Light</span>
</button>
<a href="/main.html" class="back-button"><i class="fas fa-arrow-left"></i> Back to Main</a>
<button
style="position:fixed;top:2rem;right:2rem;z-index:999;display:flex;align-items:center;justify-content:center;"
class="theme-toggle" type="button" id="themeToggle" title="Switch theme" aria-label="Switch theme">
<svg class="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" style="width:22px;height:22px;">
<mask id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle class="moon-bite" cx="14" cy="9" r="14" fill="black" />
</mask>
<circle class="sun-core" cx="12" cy="12" r="7" fill="currentColor" mask="url(#moon-mask)" />
<g class="sun-rays" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</g>
</svg>
</button>
<h2>🌾 Crop Price Tracker</h2>
<div style="width: 50px;"></div>
</div>
Expand Down
38 changes: 1 addition & 37 deletions Gov_schemes/app_scheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -618,39 +618,6 @@ const loadingState = document.getElementById('loadingState');
const noResults = document.getElementById('noResults');
const lastUpdated = document.getElementById('lastUpdated');

// Theme Management
let isDarkMode = localStorage.getItem('darkMode') === 'true';

function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.classList.toggle('dark-mode', isDarkMode);
localStorage.setItem('darkMode', isDarkMode);

const themeBtn = document.querySelector('.theme-btn');
const themeIcon = document.querySelector('.theme-icon');

if (isDarkMode) {
themeIcon.textContent = '🌙';
themeBtn.childNodes[1].textContent = ' Dark Mode';
} else {
themeIcon.textContent = '🌞';
themeBtn.childNodes[1].textContent = ' Light Mode';
}
}

// Initialize theme
function initializeTheme() {
if (isDarkMode) {
document.body.classList.add('dark-mode');
const themeIcon = document.querySelector('.theme-icon');
const themeBtn = document.querySelector('.theme-btn');
if (themeIcon && themeBtn) {
themeIcon.textContent = '🌙';
themeBtn.childNodes[1].textContent = ' Dark Mode';
}
}
}

// Filter by gender
function filterByGender(gender) {
currentGenderFilter = gender;
Expand Down Expand Up @@ -863,9 +830,6 @@ function initialize() {
lastUpdated.textContent = new Date().toLocaleDateString('en-IN');
}

// Initialize theme
initializeTheme();

// Add event listeners
if (searchInput) {
searchInput.addEventListener('input', debounce(applyFilters, 300));
Expand Down Expand Up @@ -917,7 +881,7 @@ document.addEventListener('keydown', function(e) {
// T key to toggle theme
if (e.key === 't' && e.target.tagName !== 'INPUT') {
e.preventDefault();
toggleTheme();
window.themeManager?.toggleTheme();
}
});

Expand Down
97 changes: 37 additions & 60 deletions Gov_schemes/index_scheme.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Government Sponsored Agricultural Schemes Portal</title>
<link rel="icon" type="image/png" href="../images/logo.png" />
<script>
(function () {
const saved = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
document.documentElement.setAttribute(
"data-theme",
saved || (prefersDark ? "dark" : "light"),
);
})();
</script>
<link rel="stylesheet" href="styles_scheme.css" />
<link rel="stylesheet" href="/index.css">
</head>
Expand All @@ -16,23 +28,30 @@ <h1>🌾 Government Agricultural Schemes</h1>
<p>Your complete directory of central and state-backed agriculture schemes</p>

<div class="header-actions">
<!-- THEME TOGGLE BUTTON -->
<!-- When in LIGHT mode: shows 🌙 Dark Mode -->
<!-- When in DARK mode: shows 🌞 Light Mode -->
<button
type="button"
class="theme-btn"
id="themeToggle"
aria-label="Toggle color theme"
>
<span class="theme-icon" id="themeIcon">🌙</span>
<span id="themeLabel">Dark Mode</span>
</button>

<!-- BACK BUTTON -->
<button class="back-btn" type="button" onclick="handleBackNavigation()">
← Back
</button>
<button class="theme-toggle" type="button" id="themeToggle" title="Switch theme" aria-label="Switch theme">
<svg class="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" style="width:22px;height:22px;pointer-events:none;">
<mask id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle class="moon-bite" cx="14" cy="9" r="14" fill="black" />
</mask>
<circle class="sun-core" cx="12" cy="12" r="7" fill="currentColor" mask="url(#moon-mask)" />
<g class="sun-rays" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</g>
</svg>
</button>
</div>
</div>
</header>
Expand Down Expand Up @@ -238,51 +257,8 @@ <h4>Contact</h4>
</footer>
<!-- Cursor Trail -->
<div class="circle-container" id="cursorTrail"></div>
<!-- THEME + BACK BUTTON JS -->
<!-- BACK BUTTON JS -->
<script>
// Initialise theme on load (localStorage > default)[web:30][web:33]
document.addEventListener("DOMContentLoaded", function () {
const body = document.body;
const themeIcon = document.getElementById("themeIcon");
const themeLabel = document.getElementById("themeLabel");
const savedTheme = localStorage.getItem("theme");

if (savedTheme === "dark") {
body.classList.add("dark-mode");
// Page is dark -> button offers Light Mode
themeIcon.textContent = "🌞";
themeLabel.textContent = "Light Mode";
} else {
body.classList.remove("dark-mode");
// Page is light -> button offers Dark Mode
themeIcon.textContent = "🌙";
themeLabel.textContent = "Dark Mode";
}
});

// Toggle theme: text always indicates TARGET theme
function toggleTheme() {
const body = document.body;
const themeIcon = document.getElementById("themeIcon");
const themeLabel = document.getElementById("themeLabel");

const isDark = body.classList.toggle("dark-mode");

if (isDark) {
// Now in dark mode → show Light Mode in button
themeIcon.textContent = "🌞";
themeLabel.textContent = "Light Mode";
localStorage.setItem("theme", "dark");
} else {
// Now in light mode → show Dark Mode in button
themeIcon.textContent = "🌙";
themeLabel.textContent = "Dark Mode";
localStorage.setItem("theme", "light");
}
}

document.getElementById("themeToggle").addEventListener("click", toggleTheme);

// Back navigation with history + fallback
function handleBackNavigation() {
if (window.history.length > 1 && document.referrer !== "") {
Expand All @@ -300,12 +276,13 @@ <h4>Contact</h4>
let mouseY = 0;

// Create circles
for (let i = 0; i < circleCount; i++) {
for (let i = 0; i < circleCount; i++) {
const circle = document.createElement('div');
circle.classList.add('cursor-circle');
circle.style.pointerEvents = 'none';
container.appendChild(circle);
circles.push({ el: circle, x: 0, y: 0 });
}
}

// Mouse move
document.addEventListener('mousemove', (e) => {
Expand Down Expand Up @@ -354,7 +331,7 @@ <h4>Contact</h4>
animateCursor();
</script>


<script src="../theme.js"></script>
<script src="app_scheme.js"></script>
</body>
</html>
Loading
Loading