Dark Mode / Light Mode (OS)

[aupyay]

Context

This feature will provide users with the ability to switch between a light and dark theme, and additionally, select from a predefined set of color palettes for the Yosemite Crew platform (both web and mobile applications). This significantly enhances user experience by allowing them to choose a visual presentation that suits their preferences, lighting conditions, and even personal style. Dark mode can reduce eye strain, especially in low-light environments, and can also improve battery life on certain devices. Light mode provides a more traditional, bright interface. The introduction of multiple color palettes offers a deeper level of personalization beyond just light and dark.

Guiding questions for community discussion

Default behavior: Should Yosemite Crew follow the device/OS preference automatically, or should users be able to override it with a manual toggle?

Granularity: Should dark/light mode apply globally, or should users be able to set different themes for desktop vs mobile?

Persistence: Should the system remember each user’s theme preference across devices, or just per session?

Accessibility: How do we ensure color contrast, font readability, and visibility for users with visual impairments in both modes?

Design consistency: Should reports, invoices, and exports always use a “light mode” for printing, even if the app is in dark mode?

Branding: Should clinics be able to customize their theme colors, or is that out of scope for now?

Performance: Any concerns about adding multiple stylesheets/themes (impact on load times or complexity)?

Call to Action: Vote/comment if this is important to you, and share design inspiration if you have any.

Detailed overview

Design: The implementation will require a comprehensive redesign of the Yosemite Crew user interface (UI) in Figma, creating separate light and dark mode versions of all screens and components. Furthermore, a set of distinct color palettes will be designed for each mode, ensuring aesthetic appeal and consistency across all UI elements. This includes careful consideration of color variables, typography, and iconography to ensure readability and accessibility across all chosen themes and modes. The design will adhere to accessibility guidelines for contrast ratios.

Development: The development team will implement a toggle control (likely a switch or button) for Dark/Light mode and a selection mechanism (e.g., dropdown, swatches) within the application settings for users to easily choose their preferred color palette. CSS variables or a similar robust theming system will be used to dynamically apply the appropriate styles based on the user's selections. The user's theme and color palette preferences will be stored (e.g., in local storage or user settings) so that the selected modes are persisted across sessions.

Platforms: This feature will be implemented across all platforms: web (desktop and mobile browsers), iOS app, and Android app.

Testing: Thorough testing will be conducted to ensure that all UI elements are displayed correctly, that the switch between modes is seamless and bug-free, and that all defined color palettes render correctly across all components and functionalities. Accessibility testing will be crucial to verify sufficient contrast and readability in all light, dark, and custom color palette combinations.

User benefits

Improved User Experience: Offers users a wider choice of visual themes for personalized comfort and style.
Enhanced Personalization: Allows users to truly customize the look and feel of the application to match their aesthetic preferences.

Accessibility: Addresses potential eye strain and caters to users with light sensitivity, with all palettes designed for accessibility.

Modern Design: Aligns with modern design trends that prioritize user customization and visual flexibility.

Potential for Branding: Offers flexibility for future branding alignments or seasonal themes if needed.

Potential meta level deliverables

• Updated Figma designs for both light and dark modes, including designs for multiple predefined color palettes.

• Implementation of the theme toggle and color palette selection mechanism, along with dynamic styling.

• Comprehensive testing and bug fixes across all themes and color palettes.