[bug]: theme toggle not functioning correctly & button UI inconsistent across multiple dashboard pages

[nur-hasin]

Describe the bug

The dark/light mode theme toggle is visually inconsistent and non-functional across 10 sub-pages of the AgriTech platform. Each affected page has implemented its own independent toggle style, ranging from plain text buttons, pill-shaped labels, icon-only buttons, to emoji-based toggles, none of which are consistent with the platform's design system. Clicking the toggle on these pages either does not switch the theme, does not persist the selection, or shows incorrect label state. A single unified animated sun/moon SVG toggle (already working on privacy-policy.html) should be implemented consistently across all affected pages.

To Reproduce

1. Navigate to any of the affected pages:

   • Dashboard: unstyled icon-only button, no label, no theme switching
   • Crop Calendar: plain "Dark" text label, click has no effect
   • Disease Prediction: "Light Mode" text button, toggle does not respond
   • Organic Farming: plain "Dark" label, click has no effect
   • Farmer Network: green pill "Dark Mode" button, theme does not change
   • Shopkeeper Listings: plain "Light" label only, non-functional
   • Labour Alerts: gear + moon icon with "Light" text, theme does not persist
   • Plantation Guide: "Light Mode" text, toggle broken
   • Crop Price Tracker: toggle present, theme switch does not apply to page
   • Government Schemes: emoji "Light Mode" button, clicking has no effect

2. Click the toggle button on any affected page

3. Observe theme does not switch

4. Refresh the page - theme selection is not persisted

Expected behavior

• All 10 affected pages should replace their current toggle implementation with the single unified animated sun/moon SVG toggle already working on privacy-policy.html:

<button
  style="position: fixed; top: 1rem; right: 1rem; z-index: 999;"
  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">
    <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>

• Toggle should read agritech-theme from localStorage on page load and apply it immediately to prevent theme flash
• Clicking toggle should write the new theme to localStorage and apply data-theme attribute to document.documentElement
• Button label/icon should animate correctly - sun rays visible in light mode, moon shape in dark mode
• Theme state should persist across page refresh and navigation
• Consistent fixed position top: 1rem; right: 1rem across all 10 pages matching platform standard

Additional context

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊

[nur-hasin]

Hi @omroy07, I've created this issue and would be happy to work on it if approved.

[omroy07]

Assigned