# 26 Dark Mode ✅

[aminetunc]

Value proposition

As a user of the app, I want the ability to switch between a light and dark mode, so that I can use the app more comfortably in low-light environments.

Description

Acceptance criteria

• [ ] The user can choose between light and dark mode in the app via a toggle button.
• [ ] A theme toggle button is visible on the top right corner of every page in the app, allowing users to switch between modes at any time.
• [ ] The app detects the system-wide theme preference (e.g., if the user has enabled dark mode in the device’s settings) and automatically switches to the appropriate mode.
• [ ] All relevant UI elements (e.g., background colors, text colors, buttons, etc.) adapt to provide optimal readability and user experience when switching between modes.
• [ ] The app retains the user’s preferred mode (light or dark) across sessions, so it remains the same when reopening the app.
• [ ] Switching between modes should be fast and seamless, without noticeable delays.
• [ ] The dark mode must provide sufficient contrast to ensure that text and icons are easily readable in low-light conditions.
• [ ] The dark mode implementation is consistent across every page of the app, providing a uniform experience in both light and dark modes.

  Tasks

  • [ ] Review the current UI design and determine which elements need to change based on the theme (light/dark), such as background colors, text colors, buttons, icons, etc.
  • [ ] Create or update theme assets (icons, logos, etc.) for dark mode if necessary.
  • [ ] Ensure sufficient contrast in dark mode for text readability (contrast guidelines).
  • [ ] Design toggles and options for switching between light and dark mode in app settings.
  • [ ] Add a theme toggle in every page, allowing users to manually switch between light and dark modes.
  • [ ] Implement logic for theme switching, ensuring that when a user selects a theme in settings, it applies consistently across the app.
  • [ ] Store the selected theme locally so that the app opens with the user’s last chosen mode.

[ana-nova]

"The user can choose between light and dark mode in the app (Landing Page)." This point is not specific enough. It’s missing either a detail that the button is located on the landing page and enables light/dark mode globally for all other pages, or that only the landing page has light/dark mode.

rest looks good to me 👌

[jan-riemenschneider]

First of all: A great User Story! I find it a bit confusing when the text “Your next adventure starts here” does not appear in the wireframe. However, I understand your point about showcasing optimal readability. Maybe you could reconsider that? Green check incoming!