Skip to content

Feature request: Missing Dark/Light Mode Toggle Support #20865

@shibadityadeb

Description

@shibadityadeb

Is your feature request related to a problem?

No response

Feature description

I would like to request the addition of a Dark/Light Mode Toggle to improve accessibility and user experience. The feature can be implemented using a simple theme state stored in localStorage and applied via CSS variables.

At a high level, the implementation would include:

Theme Context / State
A global theme state (light/dark) that updates the UI and persists between sessions.

Toggle Button
A small UI button (e.g., in the header) that switches between dark and light themes with a single click.

CSS Variable Themes
Use data-theme="light" and data-theme="dark" on the or tag to swap theme-specific color variables.

Persistence
Store the selected theme in localStorage so the user’s preference is retained on reload.

System Preference Support (optional)
Automatically detect prefers-color-scheme to set an initial default theme.

This feature would modernize the UI, improve accessibility, and align the project with standard UX expectations.

Alternatives

No response

Additional context

If the maintainers are open to it, I would be happy to contribute by implementing this feature.

Feature request checklist

  • The title starts with "Feature request: " and is followed by the requested feature description
  • This is a single feature
  • I have searched for existing issues and to the best of my knowledge this is not a duplicate

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions