[Enhancement]: Confusing UI/UX for Theme Switcher Button

[Biswas-Samrat]

Type of Enhancement

Proposing a minor new measure (🍎 or ✅) within an existing section

Relevant Page(s) URL (if applicable)

https://discover-cookbook.numfocus.org/

Current Content Snippet (Optional, but helpful)

The theme switcher button displays the text/icon corresponding to the current active theme, for example, a sun icon ☀️ when the theme is already light.

Proposed Enhancement / Suggestion

I propose modifying the logic for the theme switcher button to display the mode that will be applied after clicking it.

When the site is in Light Mode: The button should display the Dark Mode icon (a moon 🌙) and/or the label "Dark".

When the site is in Dark Mode: The button should display the Light Mode icon (a sun ☀️) and/or the label "Light".

Example:

If the user is currently viewing the page with a white background (Light Mode), the button should show a black moon icon 🌙.

If the user is currently viewing the page with a black background (Dark Mode), the button should show a white sun icon ☀️.

Rationale & Expected Impact

This enhancement is valuable because it improves the clarity and usability of the entire platform's interface. The current behavior (button shows current state) creates confusion, forcing users to pause and think about what clicking the button will do. Switching the label to reflect the next state (button shows "Light" when the theme is Dark) makes the functionality immediate and intuitive, reducing friction.

Additional Resources / Further Reading

Since this is standard UI/UX best practice, This is reference general design principles .

Note the theme switch button in react official website

• https://react.dev/

Contribution

• I agree to follow the DISCOVER Cookbook's Code of Conduct and Contributing Guidelines.
• I would be willing to draft a pull request to implement this enhancement.

[Biswas-Samrat]

@AR21SM Assign this issue to me

[Harish-Nesrekar]

is the issue resolved?