US - Dark Mode

[franziska-caroline]

Value proposition

As a plant enthusiast, I want to switch between dark and light mode and change the color scheme of the PlantBuddy application to use darker colors, so that i can profit from its functional benefits, including enhanced accessibility for users with visual impairments.

Description

Acceptance criteria

• [ ] on the homepage is top right a dark-/lightmode button
• [ ] when clicking on the button the color scheme toggles between light- and darkmode depending on which color scheme is active

Tasks

• [ ] create feature branch "feature-dark-mode"
• [ ] create DarkmodeButton component
• [ ] implementing a icon on the homepage to toggle the color scheme
• [ ] Using system settings(Media-queries)
• [ ] Storing the user’s preferred mode using useLocalStorageState
• [ ] Selecting dark theme colors
• [ ] Managing themes using CSS variables

[ThomasKirst]

The user value / benefit is not really clear here (though I understand what you mean):

"so that i can profit from its functional benefits, including enhanced accessibility for users with visual impairments."

In general, the value should be tailored to the individual user's role.

So, to exaggerate a little: "... in my botanical greenhouse, where I use the app and it is very dark, not to be dazzled by the light of my mobile phone" 😉