Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Introduce Light/Dark Mode with User Control and Auto-Detect #3300

Open
5 tasks
bettybondoc opened this issue Nov 11, 2024 · 1 comment
Open
5 tasks

✨ Introduce Light/Dark Mode with User Control and Auto-Detect #3300

bettybondoc opened this issue Nov 11, 2024 · 1 comment

Comments

@bettybondoc
Copy link
Member

bettybondoc commented Nov 11, 2024

Hi @wicksipedia, @hveraus, @tiagov8 and @adamcogan
cc @jaydenalchin @Pravino24

Is your feature request related to a problem? Please describe.
The current SSW website has an inconsistent theme—some pages are in light mode, others in dark. This inconsistency can be jarring for users and lacks a user preference option, limiting comfort and personalization.

Describe the solution you'd like
As per our conversation, we’ll implement a consistent light and dark mode on the SSW Website with a user-controlled toggle and auto-detect based on system settings. See https://code.visualstudio.com/

  • Initial Audit - Review all site components and establish a prioritized rollout plan (e.g., SSW.Website, SSW.Rules, SSW.People)
  • Unified Light and Dark Mode Design - Design a consistent light and dark theme for all components and pages, ensuring readability and accessibility.
  • Theme Toggle - Add a toggle switch for users to manually choose light or dark mode.
  • Auto-Detect System Preference - Auto-detect system theme on first visit #3341
  • Development Integration - Implement consistent theming across the site, with smooth transitions and saved preferences.

Describe alternatives you've considered

  • Single Theme Standardization (all light or all dark)
  • Manual Theme Toggle Only, without auto-detect

Additional context
This solution will provide a modern, personalized user experience, balancing simplicity with user control. This initiative should be managed as an epic, with tasks assigned to both designers and developers. We’ll need to book a designer for a few sprints to create light/dark mode components and the theme switcher. Gradual implementation will allow us to update each page as part of our modernization process.

Image
Figure: Potential placement of toggle

@isaaclombardssw
Copy link
Member

isaaclombardssw commented Dec 3, 2024

Issue #3318 is completed but currently masks images to white. Once dark mode is configured this will need to be accounted for (dark mode detection and either normal colours or masking to black).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: 🤷‍♂️ Needs Triage
Development

No branches or pull requests

2 participants