Skip to content

Add Dark Mode Toggle #201

Closed
Closed
@AeleSahithi

Description

@AeleSahithi

Adding a dark mode toggle will enhance accessibility and improve user experience by offering a visually comfortable alternative.

Suggested Solution:

UI: Add a toggle switch in the top-right corner of the header.
Theme Settings: Implement CSS variables for colors, adjusting them to provide a darker theme when toggled.
Persistence: Use localStorage to remember the user's theme choice between sessions.
Acceptance Criteria:

Dark mode toggle should appear in the header.
Switching themes should apply consistent styles across all UI components.
The selected theme (light or dark) should persist even after refreshing or closing the app.
Additional Notes:

Consider testing on both desktop and mobile layouts.
Reference Material Design color guidelines for dark themes if needed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions