Dark mode is a feature that allows users to switch to a darker design for better visual comfort, especially in low-light environments. It can be enabled directly through the operating system settings (Windows, macOS, iOS, Android) or via the preferences of some web browsers.
Why Offer Dark Mode to Your Readers?
Benefits
Improved visual comfort: Reduces eye strain in low-light conditions.
Personalized user experience: Allows readers to adapt the interface to their preferences.
Energy savings: On OLED screens, dark mode consumes less power.
Considerations
Additional maintenance: Requires specific adjustments to ensure readability and visual consistency.
Testing required: Some contrasts must be verified to guarantee optimal readability.
How to Implement Dark Mode in the Access and Engage Dashboards?
Dark mode activation relies on the CSS media query @media (prefers-color-scheme: dark). This automatically adjusts the appearance based on the user's selected mode.
Example: Changing the Appearance of an Engage Element in Dark Mode
.element {
background-color: #ffffff;
color: #000000;
}
@media (prefers-color-scheme: dark) {
.element {
background-color: #333333;
color: #ffffff;
}
.title {
color: #ffffff;
}
.description {
color: #ffffff;
}
} With this setup, when the user enables dark mode, the background, title, and description will automatically adapt to the appropriate colors.
💡 Please note: Styles applied directly to Poool components take priority over CSS styles. We recommend avoiding inline styling for elements that you want to adapt to both dark and light modes.
How to Test Dark Mode?
The preview mode automatically adapts based on the mode activated on the device generating the preview.
You can test these settings directly in the management interface.
To enable dark mode on your device:
Activate dark mode in your operating system settings.
Some browsers allow you to switch between light and dark modes.
Browser extensions and software can help simulate dark mode without modifying system settings.
Dark mode is a valuable feature for user experience and has become an expected standard among readers.
By leveraging CSS media queries and managing styles effectively, you can offer an optimized version of your interface without compromising readability.
Remember to test your settings to ensure visual consistency across all devices!