Skip to content

[Enhancement] Implement Site-Wide Dark/Light Mode Theme Toggle #170

Description

@SUDIPTO-2005

📌 Problem Description

EduBridge is currently locked to a single light/default theme. Coding students frequently prefer a dark-themed UI to reduce eye strain during long learning sessions.

✨ Proposed Solution

Add a universal theme toggle switch in the main navigation bar.

  1. Use CSS custom properties/variables (--bg-color, --text-color) globally across all stylesheet elements.
  2. Use JavaScript to add/remove a .dark-theme class on the <body> tag.
  3. Save the user’s choice in localStorage so the theme persists when navigating between pages (index.html, login.html, quiz.html, etc.).

📂 Proposed Code Changes

  • All .html files: Add the toggle switch widget in the header navigation element.
  • styles/: Refactor colors to utilize modern CSS variables.
  • scripts/: Create a global helper script to handle state reading/writing on page load.

🏷️ Target Labels

  • feature
  • easy

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions