Seamless Dark Mode Integration | Fixed issue #819

[barchakuz]

Summary

The proposed feature introduces a dark mode system to the entire caMicroscope website, allowing users to toggle between light and dark modes seamlessly. This feature aims to enhance user experience and accessibility by providing an alternative color scheme that is easier on the eyes, particularly in low-light environments.

Motivation

Dark mode has become a popular feature in web applications and websites due to its benefits in reducing eye strain, improving readability, and conserving battery life on devices with OLED screens. By implementing dark mode in caMicroscope, we can cater to users' preferences and offer a more comfortable viewing experience across different environments.

Testing

The dark mode feature has been thoroughly tested beyond the automatic hooks. Testing involved:

• Verifying functionality across various web browsers and devices.
• Ensuring compatibility with different screen sizes and resolutions.
• Testing accessibility features to guarantee usability for all users, including those with visual impairments or sensitivity to bright light. Older Version https://github.com/camicroscope/caMicroscope/assets/66128370/58769efb-ce38-4ebc-92d0-e732931b888d

Newer Version

https://github.com/camicroscope/caMicroscope/assets/66128370/dce239f7-8faa-4783-98d0-a4a3513b3a8e

##benefits

• In future any Style changes for Darkmode (e.g Background-color etc) can be done from single file.
• Simplified Maintenance: Dark mode implementation simplifies maintenance tasks for developers.
• Streamlined Updates: Future changes to dark mode color schemes or styles can be made in a single location.
• Consistency Across Pages: Changes made centrally will automatically apply to all pages, ensuring uniformity.
• Enhanced Efficiency: Eliminates the need to update dark mode settings individually for each page.
• Improved Maintainability: Streamlined approach enhances codebase organization and reduces complexity.
• Ensured Consistency: Dark mode consistency throughout the website is maintained effortlessly.