mapml-viewer
This experiment demonstrates the integration of adaptive color schemes for the mapml-viewer
custom element, enabling it to adjust between light and dark modes based on the user’s system preferences. By implementing a color scheme that responds to the OS or browser’s preferred settings, we aim to enhance visual comfort and accessibility across different environments.
The page automatically detects and applies the appropriate theme, allowing users to experience the map viewer seamlessly in both light and dark modes. This implementation uses the <meta name="color-scheme" content="dark light">
attribute to signal to the browser the compatibility with both modes, ensuring a responsive and user-friendly experience.
chrome://settings/appearance
and toggle the "Theme" to "System default" or "Dark."F12
or right-click > Inspect) > click on the "More Tools" menu (three dots) > "Rendering" > "Emulate CSS prefers-color-scheme" > select "light" or "dark."about:addons
, select "Themes," and set it to "System Theme" for automatic adjustment.edge://settings/appearance
and set the theme to "System default" or "Dark."These settings will allow you to see how the mapml-viewer
element adapts to different color schemes in real-time, providing an intuitive user experience that aligns with system preferences.